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.

Using variables in the custom CSS

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.

Using variables in a custom class or directly in the settings.

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

multicolored wall in shallow focus photographyGlobal Color Interface Update
Change neon light signageChanges are Coming

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read New Avada-based website

    I am launching a new website using Avada taking advantage of the lessons learned over the past two years of builder evaluations.

    March 5, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023