Outdated IPS CSS Framework

[Lisownik]

Hi,

Short opinion about CSS Framework.

In my opinion IPS CSS Framework is outdated, some lines of code is very complicated and unfriendly for developers. And now is coded for desktop and additionaly support mobile, no "mobile first". Please start using flexbox or new css grid system. 

Best regards,
Martin

[Charles]

Of course it's showing its age: version 4's framework was done in 2014. It's the nature of all software that things that were new and flashy at one time slowly become out of fashion as technology moves on. Much of the technology you now ask for didn't exist or was unproven then and will also itself be outdated a few years from now.

I'm sure it goes without saying that we plan on updating the framework to the latest trend come Invision Community 5 but have no plans to make drastic changes in the 4 series as it would break all existing themes.

[Lisownik]

2 minutes ago, Charles said:

but have no plans to make drastic changes in the 4 series as it would break all existing themes.

I know about it ? But please in Invision Community 5 you should make more clean code and more friendly ?

Example you can edit these below backgrounds, but where is .ipsBox, .ipsTabs, leaderboard cards and other? Change these below colors to dark and text to light color, also widget is still white background and light text and this is not too much friendly.

• Area background
• Dark area background
• Light area background
• Reset area background

I think main area should have a own specific colors and widget too should have own specifics colors. Example main area is white with dark text and widgets in sidebar is dark with light text and it is easy to edit. Maybe all elements shoud have together classes and attributes like padding, margin, etc., but please don't add sub background like this widget and "show more", this should be a button, no background.

 

[Joy Rex]

Would it be worthwhile to adopt a well-known and well-supported framework like Bootstrap so theme authors and Pages users would have a standard library of components and structures to work with rather than IPS rolling their own, and having to update it, etc.?

[Hexsplosions]

17 hours ago, Charles said:

we plan on updating the framework to the latest trend come Invision Community 5

Release date please? ? (I kid of course!)

[Charles]

16 hours ago, Joy Rex said:

Would it be worthwhile to adopt a well-known and well-supported framework like Bootstrap so theme authors and Pages users would have a standard library of components and structures to work with rather than IPS rolling their own, and having to update it, etc.?

The problem with that is they also get out of date. If we did Bootstrap 3 in 4.0 we would now be hearing "but Bootstrap 4!" and the same will happen when Bootstrap 5 comes out. It's best we use broadly adapted concepts than specific frameworks.

[Lisownik]

@Charles

I have one big question. IC5 will be rewrite like IPS4 or this is big update for IPS4? If this is top secret of course I understand ?

[Matt]

No, it won't be a rewrite.

The IPS4 framework is pretty modular and we've kept it up to date as PHP versions have brought in new features, like traits.

We'll take the time to do any larger scale housekeeping though. The kind of thing that we needs a lot of testing and affects many areas at once which we're reluctant to do in the middle of a product's life cycle.

 

2 hours ago, Charles said:

The problem with that is they also get out of date. If we did Bootstrap 3 in 4.0 we would now be hearing "but Bootstrap 4!" and the same will happen when Bootstrap 5 comes out. It's best we use broadly adapted concepts than specific frameworks.

Also, we'd end up with KBs full of code we won't use, just like jQuery UI, etc.

 

[Joy Rex]

3 hours ago, Charles said:

The problem with that is they also get out of date. If we did Bootstrap 3 in 4.0 we would now be hearing "but Bootstrap 4!" and the same will happen when Bootstrap 5 comes out. It's best we use broadly adapted concepts than specific frameworks.

Well, that's software in general, no? ?

My point was, if it was established on a framework like Bootstrap, it would be relatively easy to keep it up to date (other than major changes to the framework, I haven't had issues moving from Bootstrap 1 to 2, and from 2 to 4 in my applications we develop.

The other big benefit of a well-known and highly-used framework is the level of support - bugs are sorted out pretty quickly, and IPS isn't having to maintain their own framework - just ensure they keep it up-to-date with the latest changes. From an consumer perspective, it makes developing themes and apps consistent and even allows the possibility of incorporating other components that are Bootstrap-friendly into their forum themes and Pages applications.

I can actually see the benefits to both though, so maybe it's me just not wanting to learn yet another framework?

1 hour ago, Matt said:

No, it won't be a rewrite.

The IPS4 framework is pretty modular and we've kept it up to date as PHP versions have brought in new features, like traits.

We'll take the time to do any larger scale housekeeping though. The kind of thing that we needs a lot of testing and affects many areas at once which we're reluctant to do in the middle of a product's life cycle.

 

Also, we'd end up with KBs full of code we won't use, just like jQuery UI, etc.

 

Other than jQuery itself, which IPS uses, the only other library Bootstrap uses is Popper.js

[SJ77]

9 hours ago, The Heff said:

Release date please? ? (I kid of course!)

Hopefully not for a LONG time

[Hexsplosions]

3 hours ago, SJ77 said:

Hopefully not for a LONG time

No sense of adventure. ? 

[Rikki]

We do use flexbox as of 4.2, although not in the core styles - only in new styles added for new features. Updating the CSS framework is on the radar for IPS5, and it'll incorporate everything we've learned from IPS4, and, hopefully, some new approaches to development.

There's another reason we stay away from an established framework: namespaced classes. Thousands of customers incorporate their existing website wrappers into their theme, and in 3.x there were frequently clashes between our own classnames and the third-party CSS on the page. Using a CSS framework can lead to similar problems, where the website wrapper is including a different framework with the same generic classnames (e.g. 'popup' or 'button'). That's why all classes in IPS4 are prefixed ips. 

[TSP]

I personally hope you'll consider changing px-values for font-sizes etc. with something less "set in stone". Like using rem-units where it can be applied or for example no unit type where it can be applied (line-height being the only one I really know about for that atm.)

[Rikki]

19 minutes ago, TSP said:

I personally hope you'll consider changing px-values for font-sizes etc. with something less "set in stone". Like using rem-units where it can be applied or for example no unit type where it can be applied (line-height being the only one I really know about for that atm.)

No decision has been made on things like that yet, since we're still a long way off, but REMs also run the risk of interference from third-party styles unfortunately, if another CSS is setting the root size different to what we expect.

[asigno]

It would be great if before version 5 we could have page speed issues taken into account with CSS.

E.g. render blocking style sheets, 12 CSS files, if we could have the critical CSS inline etc.

For v5, it would be amazing if there was a tool we could run in the ACP which removed un-needed CSS styles.

[Woodsman]

2 hours ago, asigno said:

It would be great if before version 5 we could have page speed issues taken into account with CSS.

E.g. render blocking style sheets, 12 CSS files, if we could have the critical CSS inline etc.

For v5, it would be amazing if there was a tool we could run in the ACP which removed un-needed CSS styles.

Kidding Right?
Have to be....

All the above can already be done with the templates and CSS as it stands if you are willing learn what and where to modify. But I guess for some it's to much like work to get a theme, plugin or app to work well with others.

As far as a tool in the ACP to remove unneeded CSS. Be careful of what you wish for. It will only take one broken CSS rule to destroy many areas if you don't have a clue to its full function.

And as far as Bootstrap frame work. I worked 6 months on a project for a guy I Knew built around this frame work. Never again. You know the type.... Those that turn on a computer and go to the internet and think its a whole staff of munchkins inside their computer with a notepad, typewriter, 35 mm camera and Bell and Howell projector feeding them information. No clue at all the written code behind the scenes.

Don't get me wrong Bootstrap has found its place and it is a great framework but to be truthful I can't see it with many of IPS apps primary or 3rd party.

Well that is my 2 cents worth.
Now to go and take my anti grumpy medication.

 

[asigno]

2 hours ago, Woodsman said:

Kidding Right?
Have to be....

All the above can already be done with the templates and CSS as it stands if you are willing learn what and where to modify. But I guess for some it's to much like work to get a theme, plugin or app to work well with others.

Of course it can, but not everyone is a developer nor has the time or rationale to learn. Also this is not open source software, it's a paid platform. IPB have a fantastic team of developers who can easily do this, I assume it just hasn't been prioritised to date. But if site owners are wanting to continue to get organic traffic from the likes of Google, it's critical these issues are addressed soon.

Fast loading sites are critical for usability:

• Research from Amazon showed that every 100ms increase in load time, sales decreased by 1%
• Two key studies by Akamai and Gomez are regularly cited in reports on page load speed, as both are several years old it’s likely that web users’ expectations are even higher. The Akamai study, published in September 2009, interviewed 1,048 online shoppers and found that:
  • 47% of people expect a web page to load in two seconds or less.
  • 40% will abandon a web page if it takes more than three seconds to load.
  • 52% of online shoppers claim that quick page loads are important for their loyalty to a site.
  • 14% will start shopping at a different site if page loads are slow, 23% will stop shopping or even walk away from their computer.
  • 64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time.

Google have been working on educating web developers and building tools to make pages load fast for years and continue to do so. E.g. Their page speed assessment tool Lighthouse, their nginx mod_pagespeed, their AMP project, their yearly IO conference e.g. [Session] Web performance made easy, the Chrome User Experience Report. etc

Page speed is also a significant factor in Google's ranking algorithms for both paid and organic search, the slower your site the more you pay, or the worse you rank.  Google have been testing red slow labels for slow loading sites (attached).

I could go on and on how important this is, this should be standard practice in the development of the platform and not for users to have to modify code themselves.

 

[opentype]

1 hour ago, asigno said:

I could go on and on how important this is …

I don’t think anyone is doubting this. The problem is that all the blame is put on IPS. Admins pick crappy shared hosting, install complex themes with huge background images, put gallery widgets and 5 ad slots loading external content on the front page and then they complain that their site is loading too slow – but apparently IPS is too blame, since some online checkers say there is render-blocking. That’s just not reasonable. You can indeed have super fast IPS sites without messing with the CSS loading in any way. 

[asigno]

I'm sure there are many examples where there are far more important issues to address such as having a good host etc, like you've said.

But here's an example, this is a brand new board with no changes, running on MediaTemple (not shared hosting) with HTTP2 enabled, PHP 7.0.30/MariaDB 10.2.15.
The CSS is delaying the site loading by 1.4 seconds. This is just one of many other opportunities which could be implemented to speed up the site.

 

 

[opentype]

6 minutes ago, asigno said:

The CSS is delaying the site loading by 1.4 seconds.

That’s from my site:

Seems fine to me. Nothing done manually to get it all loaded under 300ms. 

Putting “critical CSS” in the HTML file is easy to do for a specific site, but IPS 4 needs to run on thousands of sites and admins have unlimited choices to put blocks wherever they want on their sites. So which part of it will be critical? No one really knows. That’s the problem. 

[ehren.]

Is the css framework outdated? Yes, absolutely. As mentioned by Charles above, it was coded 4 years ago which is ancient in terms of web coding practices, especially front-end. 

Floats are used to align content (and some areas even fail to clear the floats), grid containers are structured with javascript, absolute positioning is used to position the user bar, dozens of classes assign various colours and font-sizes (in px) to text, and countless hard-coded hex values are scattered throughout the css. I've made sure my theme framework has kept up with modern trends (by using flexbox and grid) to fix many of these issues, so even though the default IPS framework is outdated, it's absolutely possible to modernize it a little. But I imagine a complete re-write of the HTML, css and theme system would be priority for v5.

Is a 3rd party framework like Bootstrap the solution? No - and I think plenty of people have already expressed their views as to why. Bloated files, excess classes which are never used, non-prefixed classes (such as .ips), and the pressure to keep the software compatible with the latest Bootstrap version are just a handful of reasons. IPS needs to create a clean, versatile and modern style for version 5 if communities are going to survive in the future, and I don't think a Bootstrap copy/paste layout is going to achieve that.

[Meddysong]

37 minutes ago, ehren. said:

As mentioned by Charles above, it was coded 4 years ago which is ancient in terms of web coding practices, especially front-end. 

As an aside, I've found it very enlightening to see Rikki adopt emerging norms in newer parts of the IPS site as they appear. There's use of flexbox, Bootstrap-style grids, adoption of BEM methodology for naming his CSS, use of a preprocessor for his stylesheets... I've no doubt that whatever the new norms are when IPS5 comes along, he'll be on top of it ?

[Lisownik]

One option in ACP is missing... Why administrators don't have permission to upload file a SVG format? Good example is logo and reactions, vector is better than raster ?

[Stuart Silvester]

2 hours ago, asigno said:

I'm sure there are many examples where there are far more important issues to address such as having a good host etc, like you've said.

But here's an example, this is a brand new board with no changes, running on MediaTemple (not shared hosting) with HTTP2 enabled, PHP 7.0.30/MariaDB 10.2.15.
The CSS is delaying the site loading by 1.4 seconds. This is just one of many other opportunities which could be implemented to speed up the site.

 

 

You are comparing the software when it's in development mode, that is why you are seeing things load slower than usual.

Quote

Warning

Developer Mode will cause the software to run much slower than usual and may introduce security vulnerabilities. You should only enable Developer Mode if you are a PHP developer intending to develop Applications and Plugins and should only do so on a local installation that is not web-accessible

https://invisioncommunity.com/developers/docs/general/enabling-developer-mode-r23/

[Rikki]

6 hours ago, Volpe said:

One option in ACP is missing... Why administrators don't have permission to upload file a SVG format? Good example is logo and reactions, vector is better than raster ?

I believe this is on our internal roadmap.

7 hours ago, Meddysong said:

As an aside, I've found it very enlightening to see Rikki adopt emerging norms in newer parts of the IPS site as they appear. There's use of flexbox, Bootstrap-style grids, adoption of BEM methodology for naming his CSS, use of a preprocessor for his stylesheets... I've no doubt that whatever the new norms are when IPS5 comes along, he'll be on top of it ?

Thanks for that kind comment. Our main website (which is easier to develop for, since we have full control over it) uses BEM, LESS, Bootstrap 4's grid and is mobile-first. That should give some insight to the kind of approaches we want to take in 5. How far we can go will depend on how much backwards compatibility we plan to have, and that's a discussion we haven't had yet. If anyone has any thoughts on that aspect, feel free to share it ?