This is not a post about CSS Variables in and of themselves, but more about how they can be used in Avada. In a couple of posts, I have demonstrated using them for font weights (bad example) and system fonts (good example, but no longer needed). If you want to learn more about CSS variables check out the MDN documentation.
The Avada team added global colors and typography which rely on variables, so it makes sense there would be the ability to use them in the settings of elements. Unfortunately, in the case of colors, the Avada naming convention leaves a lot to be desired so to overcome this I decided to look at using my own naming conventions and it worked beautifully.
As far as I can tell, any setting that can take a value can use variables — color, background color, padding, margin, etc, should be able to work.
In setting this up and experimenting, I had a bit of an epiphany (actually it was more of an aha moment). I have written a lot of custom styles targeting a column and have always had to include .fusion-column-wrapper. What I learned today is that in a column, the CSS class field targets the outer div of the column (fusion-layout-column), and the design settings target the inner div (fusion-column-wrapper). Using variables would make it really easy to create an element library with settings for different screen sizes. With a few setting changes, your entire design can be transformed.
What about other modern CSS?
In experimenting with these variables, I also found that you can use clamp() and calc() directly in a settings field which is terrific. There does seem to be some inconsistent behavior when adding clamp() values to a heading setting and in particular h1 — sometimes it works and sometimes it doesn’t. To add to this frustration, it always works in live edit, but then fails when you switch to the front end — clearing caches does not make a difference. You can write a variable or create a special global typography entry and the clamp() seems to be applied correctly.
The featured image shows color variables from the US Web Design System.
Originally published on April 30, 2022
