Jump to content

Invision Community Blog


Managing successful online communities

Rikki
 

4.5: Improvements for theme designers

If you've been around Invision Community for a while, you'll know our frontend default theme hasn't significantly evolved since the early days of 4.0. Indeed, the last significant refresh came with 4.2.

With the upcoming release of 4.5, we wanted to revisit the default theme and give it a facelift for 2020, as well as make incremental improvements to the underlying codebase as a stepping stone to a bigger re-engineering in a future version. Keep an eye out for our next blog for more on the facelift.

In this entry, I want to go over some of the design and code-level changes we've implemented that will be of particular interest to third-party theme designers, or those building a custom theme for their community.

IE11 Support

Until now, we've supported IE11 as a 'B' browser - meaning we didn't aim for perfect support (especially visually), but did aim to make all functionality work, and we fixed IE11-specific issues if possible.

As of 4.5, we no longer support IE11 in any way and Invision Community will not work well in that browser. By removing support for IE11, we are able to make use of newer CSS technologies which significantly eases development for us and third-party designers. I'll discuss some of those below.

Combined theme settings

We've combined a number of existing theme settings into one new setting. We've found that settings like poll_bar, step_background, rating_hover and so on are nearly always set to the same color - typically the site's main brand color. These settings have therefore been replaced with one new brand_color setting, which is used throughout the CSS in places where this primary color would be needed. This will simplify the early stages of theme development and make it easier to match branding in Invision Community.

Front-end-colours.jpg

Front end colors

Removing hardcoded colors

While our theme settings have allowed community owners to change most colors, there were still many hardcoded in our CSS framework. These were typically neutral colors used for things like 'close' links, semi-transparent backgrounds and so on, but it was enough to make creating a dark theme an unrealistic prospect without an awful lot of effort (and kudos to those designers who have offered dark themes up until now!).

In 4.5, we've removed hardcoded colors from our framework, and instead rely on colors already defined by theme settings. You can now, finally, create a dark theme just by editing the built-in theme settings.

Type scale & {fontsize} tag

While we've had fixed type-size classes (e.g. ipsType_normal) for a long time, in practice many elements had their own font sizes set. This leads to inconsistency and poor visual rhythm too. Another side effect is it was also tough to globally change the font size (such as for branding purposes, or to create a theme for visually-impaired users).

To solve these problems, we first created a type scale; that is, a fixed number of sizes to choose from. A product the size of Invision Community does have need for a flexibility, so we settled on the following scale:

x_small: 12; small: 13; medium: 14; base: 16; large: 18; x_large: 20; 2x_large: 24; 3x_large: 30; 4x_large: 36.

All of these values are editable as theme settings, so each theme can adjust the type scale used. Our default CSS in 4.5 has been fully updated to put all type on this scale.

To actually make use of these settings, we have added a new {fontsize} tag which accepts either a scale key, or a specific pixel size (for those occasional situations where a specific size is absolutely needed, e.g. icons).

Why couldn't we just use {theme="x_small"}, or even CSS variables? To solve the problem of globally scaling text, we have also added a percentage-based scale setting that will save you from having to create your own type scale. The {fontsize} tag automatically applies the global scale to any values passed into it. Want text in your theme to be twice as big as default? Simply set the global type scale to 200% and the entire theme will reflect the change immediately. 

font-scale.jpg

The new font size options

Spacing scale

The lack of a consistent spacing scale has led to some arbitrary values being used in any given situation, which again has had a negative impact on the visual harmony of our design. We've therefore implemented a 4px spacing scale (using CSS variables rather than theme settings this time) and applied across almost all padding/margin values. In time, we anticipate fully switching all measurement values to the scale.

New CSS class families

We have added a range of new spacing classes for padding and margins, allowing far more control over how these are applied, especially on different device sizes. Previously, ipsPad (15px) was simply halved on small screens - with no 'opt-out' short of adding specific CSS. We've felt this has been imprecise for some time, especially since mobile devices typically have larger screens in 2020 and don't need to be so tightly-spaced.

ipsPad_all now replaces the existing ipsPad, and does not halve itself on small screens. Instead, there's a new responsive naming convention that allows you to apply specific padding on specific device sizes:

ipsPad_all:double md:ipsPad_all sm:ipsPad_all:half

In this arbitrary example, desktop size (the default) get double padding, medium (tablets) get regular padding and small (phones) get half padding.

We've added similar classes for top, bottom, left and right padding, as well as horizontal, vertical and none (to removing all padding) shortcuts.

For margins, the old ipsSpacer_* classes have been replaced with a new ipsMargin family that work exactly the same as the padding classes above, with the same range of flexibility.

The old ipsPad/ipsSpacer classes will continue working as they did before for backwards compatibility, but should be considered deprecated from 4.5 onwards.

We've also added a whole range of new ipsFlex classes, also with responsive controls (making it easy to have horizontal layouts on desktop and vertical layouts on mobile, for example), as well as a new ipsGap utility that automatically adds spacing between elements, without requiring manual :first-child/:last-child exclusions.

CSS variables & calc()

In 4.5, thanks to IE11 support ending, we're finally making use of CSS variables and calc() to make CSS more maintainable and easier to customize. A lot of repeating or often-customized styles - such as form field styles, message colors, card styles, border radii etc. - are now created as CSS variables, allowing theme designers to easily change styling in one place. Instead of magic numbers, we either stick to our spacing scale, or use calc() to avoid hardcoded numbers.

The future

The work we've done so far is just a 'first-pass'. We'll be pressing forward with modernization throughout the 4.5.* series and beyond with a view to reducing our footprint, improving our ability to maintain our CSS and, of course, making theming easier for our customers.

Edited by Rikki


Comments



Recommended Comments

4 minutes ago, Maxxius said:

Great changes! However @Rikki please add support for STICKY SIDEBARS!! These would be so great in this day and age.

I mean like this one here: https://ggames.com.br/

You can use new CSS features to do this in (literally) four lines of code 🙂 

#ipsLayout_sidebar {
	position: sticky;
	top: 0;
}

 

Share this comment


Link to comment
Share on other sites
1 hour ago, Rikki said:

You can use new CSS features to do this in (literally) four lines of code 🙂 


#ipsLayout_sidebar {
	position: sticky;
	top: 0;
}

 

This absolutely does not work. I even put that code you posted into the default skin and nothing happens. Also note the sticky sidebar behavior as you scroll down and as you scroll up. I guess that IPS default sticky feature would simply stick the top of the sidebar for all of the time while you are going down. And that's not what I'm after. Sidebar stickyness should act like the facebook left side menu.

Share this comment


Link to comment
Share on other sites
1 hour ago, McAtze said:

Whats about to use LESS or SCSS?

They are on our radar but aren't particularly viable right now. We still need to allow for CSS editing via the AdminCP, and so we would need to compile LESS or SCSS on the server. While some libraries appear to be available to do that, integrating them and updating our own CSS is simply too big of a change for a point release.

Depending on the scope of our next major version, it may be something we're able to contemplate then 🙂 

Share this comment


Link to comment
Share on other sites
1 hour ago, Wishmasters said:

@Maxxius Try this, works for me:


#ipsLayout_sidebar .cWidgetContainer {
	position: sticky;
	top: 0;
}

 

Thank you man! This is one good version of it and it works smoothly.

But it's not entirely what I'm after. Thing is that when you are scrolling downward it sticks the top of the sidebar and not the bottom of it like facebook does. and when going upward - its good. You understand what I'm trying to describe?

Share this comment


Link to comment
Share on other sites

Very nice news! One the the features that I want the most is related to website loading speed. In the current theme settings, google scores IPS as a moderate to low speed loading website, mainly because the big css files.

Would be very nice to have a CSS structure set to load the critical CSS files first, to allow a faster FCP.

Share this comment


Link to comment
Share on other sites

@Rikki as usual, a brilliant job. Just one highlight I love
 

Quote

without requiring manual :first-child/:last-child exclusions

I could go on here about the love but there's too much of it 😄 

One area I was hoping to see settings for was the editor and having that simplified and put into settings. Any plans on that in the future either?

Kind Regards

Share this comment


Link to comment
Share on other sites
12 minutes ago, DesignzShop said:

@Rikki as usual, a brilliant job. Just one highlight I love
 

I could go on here about the love but there's too much of it 😄 

One area I was hoping to see settings for was the editor and having that simplified and put into settings. Any plans on that in the future either?

Kind Regards

We didn't have theme settings specific to the editor, but the button hover colors now use the area_background settings - so yes, they are easily customizable now 🙂

Share this comment


Link to comment
Share on other sites
7 hours ago, Maxxius said:

Thank you man! This is one good version of it and it works smoothly.

But it's not entirely what I'm after. Thing is that when you are scrolling downward it sticks the top of the sidebar and not the bottom of it like facebook does. and when going upward - its good. You understand what I'm trying to describe?

It’s something we have on our website ? internazionale.fr

Edited by Archimed

Share this comment


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy