Introduction
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);Conclusion
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!
