April 26, 2024

CSS Variable Manager in Bricks Builder – Create HSL Color Variables


Hey everyone, Brendan here! Today, I want to dive into the latest release of Bricks Builder 1.9.8 beta. By the time you’re watching this, it might already be out of beta, so keep that in mind. I’m particularly excited about the Variable Manager feature, which has been added to the global class manager.

Understanding CSS Variables

What Are CSS Variables?

Now, what’s the fuss about CSS variables? Well, they allow you to tokenize and reuse styling elements like spacing, typography, and colors across your entire project. It’s like having a magic wand for your design consistency!

Implementing Spacing Variables

Creating Spacing Variables

In this post, I’ll walk you through creating color variables from scratch and show you how they can be applied in Bricks Builder without relying on any external frameworks.

/* Spacing Variables */
--space-xs: 1rem;
--space-s: 2rem;
--space-m: 3rem;
--space-l: 4rem;
--space-xl: 5.5rem;
--space-xxl: 7rem;

Working with Color Variables

Exploring Color Variables

If you’ve ever used CSS frameworks, you might be familiar with their color managers. They offer convenient ways to update color values seamlessly. Bricks’ Variable Manager takes it up a notch by allowing us to create and manage these variables directly within the builder interface.

Setting Up Primary Color

/* Define the HSL values for the primary color */
--primary-h: 300;
--primary-s: 100%;
--primary-l: 40%;
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));

Adjusting Primary Color Shades

/* Primary Color Shades */
--primary-dark: hsl(var(--primary-h), var(--primary-s), 5%);
--primary-light: hsl(var(--primary-h), var(--primary-s), 95%);

Creating Primary Color Transparencies

/* Primary Color Transparencies */
--primary-trans-10: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
--primary-trans-30: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
--primary-trans-50: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.6);
--primary-trans-70: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.7);
--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.8);
--primary-trans-90: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.9);


Wrapping up, having variables at our disposal within Bricks Builder opens up endless possibilities for creative experimentation and efficient workflow. Whether you’re extending an existing framework or starting fresh, leveraging variables can significantly streamline your design process.

Code snippet provided by Brendan

Tweak the provided code to try out these techniques in your own projects. Thanks for tuning in, and I hope you found this tutorial helpful. Until next time, happy designing!

Brendan O'Connell

Brendan is a longtime WordPress user and has built and managed hundreds of websites over the last decade.

Recent Posts

You're still here? Wow, dedication. Here are some of my latest ramblings.

I am a heading

If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.

  • This is a list item.
  • This is a list item.
  • This is a list item.

No spam, ever.