4.5 CSS Changes for developers & designers

[Rikki]

4.5 introduces some changes to CSS, so I wanted to provide an overview of those and how they might affect you.

 

IE11

Firstly, we've completely dropped support for IE11. This means you'll start to see newer CSS methods being used that IE11 does not support. 

 

Atomic classnames

One thing you'll notice as you read on is we're moving towards using atomic classnames for utility styles. What does that mean? Basically, each classname is just a convenience helper for applying one particular style. You build how an element looks and behaves by applying multiple classnames. 

While this is slightly more verbose in the HTML, it's also much clearer and avoids having to create mutant selectors that exclude certain elements. If you see an element with ipsBorder_top, it's obvious what it does. Don't want a top border? Just remove that class.

Another benefit is that it allows more precise control over how styles are applied at different device sizes, because individual styles can be modified. Want a top border on desktop, but not phones? ipsBorder_top sm:ipsBorder:none will do the job - no crazy selectors or additional media queries necessary.

 

Class prefixes/modifiers

Wait, what's that sm: bit in the atomic classname example above? That's a new naming convention you'll see which controls at which breakpoints the style is applied.

• Unprefixed (e.g. ipsBorder_top). Applies to all devices, desktop and smaller.
• md: (e.g. md:ipsBorder_top). Applies to tablets and smaller.
• sm: (e.g. sm:ipsBorder_top). Applies to phones only.

sm and md prefixes take priority over the desktop classname. This means you provide the desktop classname but can override it for tablets and/or phones by also adding an md: or sm: classname. For example, ipsPadding_top:double sm:ipsPadding_top:half applies double top padding on desktop, but only half top padding on phones.

You'll also see modifiers on some classes (as in the example above), for example ipsPadding:half. ipsPadding is saying 'apply padding to all sides', and the ':half' modifier makes it a smaller amount.

 

BEM classnames for modules

While we're using atomic classes for global utility styles, we're moving towards BEM for module-specific classes. BEM is simply a naming convention, so it doesn't have too much impact on you - you'll just see a new structure for new classnames that should be easier to understand. 

 

Note: We haven't rewritten our CSS framework with the atomic classname, class prefix/modifier or BEM approaches. Don't worry - 90% of the classes you're used to will be the same. I just wanted to point out that going forward, new classes will follow these paradigms.

 

CSS Variables & calc

We're now making use of CSS variables (also known as CSS custom properties). Check out this MDN article if you aren't familiar with them. This enables us to define some values in one place but use them throughout the product - and it allows you to change the value in one place if you wish to do so for your theme. Most of our CSS variables are defined at the top of global.css in the CSS framework, but you'll also see some other local variables defined in other places. Variables are simply used by wrapping the name in the var() function, e.g. var(--positive-light). 

You'll see some variables named --sp-1 and so on. This is our new 4px spacing scale. In 4.5 and going forward, when we style elements we'll generally be using one of these values for widths, heights, borders, spacing etc. to keep everything consistent. You should do the same for elements you create.

We're also making use of calc(). This is another CSS function that allows math operations to be done. Instead of having to hardcode numbers for positions, sizes etc., we can now use calc() to do it for us based on some other values (often CSS variables).

CSS Variables for theme settings

We are deprecating the usage of the {theme} and {hextorgb} tags for color-type theme setting keys (but not for non-color settings or when you need to pass a specific hex code in).

Instead, color-type theme settings will automatically have a CSS variable created for them, named --theme-setting_key, where setting_key is the key of the setting as defined in the AdminCP. The variable will be a triplet representing the color, for example 255, 255, 255. Therefore, this value can be used with both the rgb and rgba CSS color functions.

Here's an example. If in the past you'd wanted to use the area_background theme setting in your CSS, you'd do background: {theme="area_background"}. Or if you want some opacity, you'd do background: {hextorgb="area_background" opacity="0.2"}.

In 4.5, the correct way of using these will be: background: rgb( var(--theme-area_background) ) and background: rgba( var(--theme-area_background), 0.2 ) respectively.

We're doing this now because it will open up some exciting functionality in future. To be clear, any existing usage of {theme} and {hextorgb} will continue to work fine in 4.5, but we encourage you to move over to the CSS variable approach.

 

Hardcoded hex values

In 4.5 we have largely removed all hardcoded hex colors from our CSS files, and adjusted styles to use theme setting values instead. This will make it much easier for admins to fully colorize their theme without hardcoded colors messing things up. I encourage you to update your app's CSS to follow this approach.

 

Font sizes

We've moved font sizes to a fixed scale. These have been implemented as theme settings so they are customizable. However, rather than use the theme setting value directly, you should make use of the new {fontsize} plugin. This plugin ensures the global scale is applied to any values passed in, allowing 'large print' versions of themes to be easily created. You should use the {fontsize} plugin for font sizes both when you use one of the theme settings and when you use specific pixel values (e.g. {fontsize="72"} - for 72px text)

When used with the {fontsize} plugin, the type scale keys are:

• x_small (12px)
• small (13px)
• medium (14px)
• base (16px)
• large (18px)
• x_large (20px)
• 2x_large (24px)
• 3x_large (30px)
• 4x_large (36px)

 

Flexbox

While we've used flexbox in some places in previous versions, 4.5 makes much wider use of it and also introduces a new family of classes. If you aren't familiar with flexbox, I highly recommend this CSSTricks article for a primer on it. Essentially, instead of positioning elements using floats/clears/etc., flexbox treats the container as a flexible box with properties for controlling how elements inside of it as laid out.

4.5 has a number of new classes that are essentially just convenience for the usual CSS rules.

• ipsFlex (sets element to display: flex)
• ipsFlex-ai:start, ipsFlex-ai:center, ipsFlex-ai:end, ipsFlex-ai:stretch (ai - values for align-items property)
• ipsFlex-as:start, ipsFlex-as:center, ipsFlex-as:end, ipsFlex-as:stretch (as - values for align-self property)
• ipsFlex-jc:start, ipsFlex-jc:center, ipsFlex-jc:end, ipsFlex-jc:around, ipsFlex-jc:between (jc - values for justify-content property)
• ipsFlex-fd:column, ipsFlex-fd:row, ipsFlex-fd:column-reverse, ipsFlex-fd:row-reverse (fd - values for flex-direction property)
• ipsFlex-fw:wrap, ipsFlex-fw:nowrap, ipsFlex-fw:wrap-reverse (fw - values for flex-wrap property)
• ipsFlex-flex:10 - sets flex-grow: 1 and flex-shrink: 0
• ipsFlex-flex:11 - sets flex-grow: 1 and flex-shrink: 1
• ipsFlex-flex:01 - sets flex-grow: 0 and flex-shrink: 1
• ipsFlex-flex:00 - sets flex-grow: 0 and flex-shrink: 0

 

All of these classes have md and sm prefixed versions too, and this opens up the possibility of having different layouts on different device sizes in a way that's much easier than the hoops you'd have to jump through before. For example, to create some elements that show as a row on desktop but collapse to a column on mobile, you'd just apply ipsFlex ipsFlex-fd:row sm:ipsFlex-fd:column. The sm:ipsFlex-fd:column class overrules the ipsFlex-fd:row class on mobile, adjusting the layout. (Note: flex-direction: row is the CSS default direction anyway, so you can actually leave out ipsFlex-fd:row - it's implicit. I included it in the example for clarity.)

 

Padding/margin

We've added new spacing classes for padding and margin, to allow for atomic classnames, device prefixes and modifiers.

ipsPad, ipsPad_double, ipsPad_half, and all of the ipsSpacer_* classes are now deprecated. You'll still see them in our templates and they'll still work in yours, but don't use them in any new work - you should use the updated classes below.

The padding classes are now named ipsPadding:

• ipsPadding, ipsPadding:none, ipsPadding:half, ipsPadding:double - apply padding to all four sides
• ipsPadding_vertical, ipsPadding_vertical:none, ipsPadding_vertical:half, ipsPadding_vertical:double - apply padding to top and bottom
• ipsPadding_horizontal, ipsPadding_horizontal:none, ipsPadding_horizontal:half, ipsPadding_horizontal:double - apply padding to left and right
• ipsPadding_left, ipsPadding_left:none, ipsPadding_left:half, ipsPadding_left:double - apply padding to the left side (RTL aware)
• ipsPadding_right, ipsPadding_right:none, ipsPadding_right:half, ipsPadding_right:double - apply padding to the right side (RTL aware)
• ipsPadding_top, ipsPadding_top:none, ipsPadding_top:half, ipsPadding_top:double - apply padding to the top side
• ipsPadding_bottom, ipsPadding_bottom:none, ipsPadding_bottom:half, ipsPadding_bottom:double - apply padding to the bottom side

These classes have md and sm prefixed versions too, allowing you to apply different padding depending on the device size.

One side note here: with the old padding classes, padding was simply halved on phones with no opt-out. That's not the case with the new family - if you want half-padding on mobile on an element, you should apply sm:ipsPadding:half in addition to the normal ipsPadding class, for example. This gives you much more control than you previously had.

Margins follow basically an identical pattern to padding, with the same variation of classes, except the name is ipsMargin.

 

Gaps

Another new family of classes is ipsGap. These classes are used when you want spacing between elements. In the past, you'd have to use :last-child or :first-child to exclude an element, or loop over the elements in the template to leave off a class. If elements wrapped to a new line, putting spacing between the lines was tricky too.

ipsGap solves this by applying even spacing between elements, then applying a negative margin on the whole container to bring it back to the starting position.

The classname is followed by a modifier, which is a number from our spacing scale, e.g. 1 is 4px spacing, 2 is 8px spacing and so on.

• ipsGap:1 (1-5 available) - applies both horizontal and vertical spacing around each element in the container
• ipsGap_row:1 (1-5 available, as well as 0 to remove) - applies vertical spacing on each element in the container

Notice ipsGap_row also supports the :0 modifier. This allows you to have horizontal-only spacing - simply apply ipsGap:1 ipsGap_row:0.

Be aware that using both ipsMargin (or custom styles that apply a margin) and ipsGap on the same element can cause issues. You may want add a wrapper element to handle your margin in this situation.

 

Borders

We've also added a class family to add light grey 1px borders to elements - used commonly as dividers between some parts of the page.

• ipsBorder - apply border to all sides
• ipsBorder:none - remove border from all sides
• ipsBorder_vertical - apply border to top and bottom
• ipsBorder_horizontal - apply border to left and right
• ipsBorder_top, ipsBorder_bottom, ipsBorder_left, ipsBorder_right - apply border to a particular side

These classes have md and sm prefixed versions too, to control borders shown on each device size. This is particularly useful if you apply a border to a flex child which is in a row on desktop but a column on desktop, for example - you will be able to easily control which side the border appears on once collapsed.

 

"Pull" class

To better display content areas on mobile, a class named ipsResponsive_pull has been added which 'pulls' a box on the left and right sides on small devices. It's intended to be used on boxes (normally with the ipsBox class) that you want to take up the whole screen width on mobile, allowing better usage of the available screen space.

 

Template changes

We've worked to keep template changes as minimal as possible, but in an update the size of 4.5 there are still quite a number of changes. Whether these impact you will depend on if you've modified the template (for theme designers) or rely on a particular selector for theme hooks (for developers).

One area that has received fairly big changes is the post/comment templates. We have redesigned the headers and footers of these templates and moved some elements into a separate parent element on mobile devices.

As usual, full template changes will be available once we've released betas.

[DesignzShop]

Quote

In 4.5, the correct way of using these will be: background: rgb( var(--theme-area_background) ) and background: rgba( var(--theme-area_background), 0.2 ) respectively.

@Rikki Sorry, I may be being thick headed on this Rikki, So just to get this straight and see if i got this correct...
We need to convert our custom hex color setting to a rgb or rgba variable like listed above in our custom.css? And to be clear here again so I understand, we are still using a hex color in the custom color setting and not a rgb or rgba, or do we need to convert our custom color setting to a text field and use for default a rgb or rgba color code?

 

 

As an example, let's say I have this rule below
.ipsPromote .ipsPromote_icon {
  color:{theme="mass_color_ffffff"};
  background:{theme="mass_color_main"};
}

Is it supposed to look like this to be correct?
.ipsPromote .ipsPromote_icon {
  color: rgb{ var(--theme-mass_color_ffffff"};
  background:rgb{ var(--theme-mass_color_main"};
}

 

 

Next, if I use a custom text field and use a rgb or rgba in that field like so, is that proper or ok to do like I have it or do I need to convert this too?

.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
  color: rgba({theme="mass_color_rgba_0_0_0"},0.80);
  border-top: 7px solid rgba({theme="mass_color_main_rgba"},0.15);
}

Is the code above then supposed to look like this if I use your given example above
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
  color: rgba( var(--theme-mass_color_rgba_0_0_0}, 0.80);
  border-top: 7px solid rgba( var(--theme-mass_color_main_rgba}, 0.15);
}

Edited June 24, 2020 by DesignzShop

[Rikki]

Bear in mind, you don't have to update styles in custom.css. But if you do want to use the new approach:

All theme settings that are color fields will automatically be set up as CSS variables, so you don't need to do that yourself (the hex will automatically be converted to an rgb triplet too). So if your "mass_color_main" theme setting is a color field, the --theme-mass_color_main CSS variable will automatically exist. So in your first example, your updated code would be correct and you wouldn't need to do anything extra for that to work.

For your second example, are you saying you'd have a theme setting that's just a plain text field? If so, that won't automatically be created as a CSS variable. You'd need to do that yourself, like so:

:root {
    --your_custom_setting: {theme="your_custom_setting"};
}

You can then use that variable however you wish. In this second example, nothing is automatic, so you can name your CSS variable whatever you want.

[DesignzShop]

Yes, I do use a custom text field for all my rgb and rgba's. Everything is working great and it looks like then I don't need to do any converting. As far as I can tell.

[Rikki]

Is there a reason you're creating text settings to hold rgb values? It'd probably make more sense to make them color fields (so users get a color picker), and then using the automatically-created CSS variable instead. 

[DesignzShop]

I'm getting ready now to do that exactly. I don't have that many custom text fields I've done this with. Thank You very much Rikki.

[DesignzShop]

Just to give you an example, if I want a user to be able to adjust the entire setting of a rule like so, I want them to be able to adjust border size, color and opacity from a single custom setting without going into the custom.css I use a custom text setting.

[DesignzShop]

On 5/19/2020 at 12:26 PM, Rikki said:

We are deprecating the usage of the {theme} and {hextorgb} tags for color-type theme setting keys (but not for non-color settings or when you need to pass a specific hex code in).

 

On 6/23/2020 at 9:00 PM, Rikki said:

Bear in mind, you don't have to update styles in custom.css. But if you do want to use the new approach:

All theme settings that are color fields will automatically be set up as CSS variables, so you don't need to do that yourself (the hex will automatically be converted to an rgb triplet too)

 

So just to be clear here you're saying eventually this color code below using "theme" wont be able to be used even though it's automatically converted for now? 
color:{theme="mass_color_ffffff"};

If so, can you guess to how long that will be? I'm asking because like everyone else, that's a lot of converting. We as you know have to go back and get the setting key value for each color.. 

[Rikki]

It won't be any time soon, if ever - the {theme} tag is still used for non-color settings for example. It'd be preferred to use the CSS variable approach for consistency and potentially future compatibility with new features, but it isn't a huge deal right now.

That said, converting them should be easy in most cases. We did our entire framework in a few steps using find/replace in a text editor.

[Ilya Hoilik]

On 5/19/2020 at 8:26 PM, Rikki said:

One thing you'll notice as you read on is we're moving towards using atomic classnames for utility styles

I'd call it Invisionwind CSS

[tPx]

Im still trying to figure, how can i update all my themes to newest version, cuz how i said in other topics this changes are making my themes look so bad right now.And my problem is again and i dont understand why not my modifications are affected by 4.5 but the default ones.Most part of display errors are from untouched parts, for example headerProfile.

https://gyazo.com/8ea03a859bf49a9c939b015fcac0a545

https://gyazo.com/09607b79da2008f5b0d0579e40491eda

 

I dont know what to do, to fix this changes or start new projects and just update the themes for 4.4

The transition from 4.3 to 4.4 was ok, but from 4.4 to 4.5 it's a mess for me for example.I need an advice!

[The Old Man]

On 6/24/2020 at 3:00 AM, Rikki said:

:root {
    --your_custom_setting: {theme="your_custom_setting"};
}

Hi @Rikki

I've spent a few hours trying to convert a custom theme with custom theme settings to use the new variables, but its not that easy! I have a few questions, I'd be grateful if you have a moment as the documentation/help guides seems to cover the previous methodology. This topic has now been unpinned, so I wondered if you have cancelled the migration?

 

As I understand it, IPS only converts CSS Colors to CSS Variables. So for any other custom theme settings we have we must declare them as you quoted above.
I don't understand why we would need to do this because if we have a lot of custom theme settings, surely it would be more efficient if IPS4 could loop through and create them for us as well, ready to use when we save changes? Otherwise its not so much a timesaver.

 

The font-size plug-in seems a quick conversion for the default IPS font-sizes, but are limited to px. What happens if we are using other units rem or em, or vh? Do we stay as is?

Secondly, if we using a variable from a theme setting, it doesn't seem to work even if I declare it in root.

:root {
	--my_other_title_font_size: {theme="my_other_title_font_size"};    		
} 

 

font-size: {fontsize="var(--theme-my_other_title_font_size)"};

also tried

font-size: {fontsize="var(theme-my_other_title_font_size)"};

I couldn't get it to work with custom margins either, before or after decalring them in root

margin: var(--theme-my_line_margin_top)% var(--theme-my_line_margin_right)% 0 var(--theme-my_line_margin_left)%;

or 

margin: var(my_line_margin_top)% var(my_line_margin_right)% 0 var(theme-my_line_margin_left)%;

 

Many thanks!

 

 

[Rikki]

We only automatically convert colors primarily because they make the most sense as CSS variables. CSS variables also have to be valid CSS values, so we can't easily convert all theme settings into CSS variables. If you only use a theme setting in a couple of places, it probably won't be worth making it a CSS variable - just use the theme setting as before.

You are correct that the font size plugin converts to px. If you need other units, simply use them directly, or make them a CSS variable - but you can't pass the CSS variable into the font size plugin like your example. Instead just use them directly; assuming the value of your theme setting was "3rem", you could do font-size: var(--theme-your_setting);.

For your last example, remember the variable value has to be a valid CSS value. So the --theme-my_line_margin_top variable should include the % symbol - you can't concatenate it like you've done.

Based on the examples you've described, I would just continue using your theme settings as before.

 

 

[The Old Man]

Thanks for the clarifications and tips @Rikki, very much appreciated!

[The Old Man]

Hi @Rikki

Is it possible that elements of this useful topic could be added to the Help guides for convenience? 

Also I've been looking at the built-in Flexbox classes to refresh my ailing memory, as I'm making a mega-menu footer template using the new built in Flex properties, basically a div set to flex containing about 6 small blocks of ul lists of site links.

Am I too sleepy or has the Flexbox value Space-Evenly overlooked or purposely left out in the info above (and in the actual default IPS4.6 CSS template)?

Quote

space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

So for example with Justify Content property:

On 5/19/2020 at 6:26 PM, Rikki said:

ipsFlex-jc:start, ipsFlex-jc:center, ipsFlex-jc:end, ipsFlex-jc:around, ipsFlex-jc:between (jc - values for justify-content property)

(Sorry the code editor button isn't showing for me on my iPad so I'm using quotes)

Quote

.ipsFlex-jc\:start{ justify-content: flex-start; }
.ipsFlex-jc\:center{ justify-content: center; }
.ipsFlex-jc\:end{ justify-content: flex-end; }
.ipsFlex-jc\:around{ justify-content: space-around; }
.ipsFlex-jc\:between{ justify-content: space-between; }

Assuming then something like:

Quote

.ipsFlex-jc\:evenly{ justify-content: space-evenly; }

Lastly, with regards to use of the new ipsGap, should we solely use this on a Flex parent container for adding spacing on the Flex children, instead of using the new spacer ipsMargins and ipsPaddings on the child elements?

Many thanks!

[PatrickRQ]

Assuming, new headache (with themes) ahead.. 😂

@Rikki How many sleep-less nights, you foresee, we will need to dedicate from our poor existence that tries to break free from the clutches of ubiquitous world manipulation to upgrade default but customized theme?

 

Edited June 1, 2022 by PatrickRQ