How to create CSS Variables in Bricks Builder - Mini Color Design Framework with HSL

Hi all,
Variables are superpowers on websites and you may already be familiar if you've used CSS framework (like AutomaticCSS, Coreframework, or Oxyprops?). Well if not, stick around.
Today's video is a first look at the new CSS Variable Manager in Bricks Builder 1.9.8. which is in Beta as of publishing this, so keep in mind it may look or behave slightly different in the final release.
I create some spacing variables followed by HSL Color Variables for the Primary, Secondary, and Tertiary Colors as well as 9 transparencies for each. You can extend this as far as you wish, with dark/light variants, additional colors, or even contextual spacing variables that you can use and manage globally across your Bricks website.
Copy and Paste these variables to get the primary transparencies (and replace with secondary, tertiary, accent, or whatever names you want to use!). Adjust the H S and L values to your color and it will change, so you can use this project to project.
/* 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));
--primary-trans-10: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.1);
--primary-trans-20: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.2);
--primary-trans-30: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.3);
--primary-trans-40: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.4);
--primary-trans-50: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.5);
--primary-trans-60: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.6);
--primary-trans-70: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.7);
--primary-trans-80: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.8);
--primary-trans-90: hsl(var(--primary-h), var(--primary-s), var(--primary-l),.9);
Dark colors (Bonus):
--primary-dark: hsl(var(--primary-h), var(--primary-s), 5%);
--primary-light: hsl(var(--primary-h), var(--primary-s), 95%);
Spacing:
--space-xs: 1rem;
--space-s: 2rem;
--space-m: 3rem;
--space-l: 4rem;
--space-xl: 5.5rem;
--space-xxl: 7rem;
Coolors used: coolors.co/003049-d72d28-f77f00
Utopia Fluid Spacing/Typography: utopia.fyi/
Get Advanced Themer: advancedthemer.com
Get Bricks: bricksbuilder.io
-----------------------------------
🌟 Brendan O’Connell 🌟
🎨 WordPress | Design | Development | Tech 🖥️
Want to connect or work together?
🌐 Website: brendan-oconnell.com
🐦 Twitter: / brendanocwp
🔗 LinkedIn: / brendan-o-connell1
☕ Buy Me a Coffee (or Tacos): buymeacoffee.com/brendanoconnell
----------------
Aff Links:
Get Bricksforge: bricksforge.io?aff=d768d61b
Get ACSS: automaticcss.com/ref/138/
Get Frames: getframes.io/ref/11/

[@BrendanOConnellWP]

00:06 Bricks Builder 1.9.8 beta introduces the variable manager for extending Global styles with CSS variables directly in the Builder UI. 01:48 Introduction to CSS Variables in Bricks Builder 03:25 Creating CSS variables for spacing and colors in Bricks Builder 05:07 Creating CSS Variables with HSL Color Values 06:35 Creating HSL color variables in Bricks Builder 08:48 Creating transparency variables using HSL color values. 10:33 Creating secondary and tertiary color variables using HSL in Bricks Builder 12:29 Creating CSS Variables with HSL Color Values

[@AidanJoyce]

Another great video. Straight in, no-nonsense explanation and demo of how the new CSS variable manager works. Whether you're new or seasoned with Bricks, Brendan's content and quality are growing and are now a must-watch for me on anything Bricks-related. Thank you and keep up the great work; your efforts are much appreciated.

[@DaveFoy]

Couldn't agree more.

[@BrendanOConnellWP]

Appreciate the kind words. Thanks! Stay tuned, more stuff planned. I'll try to get something going for WS Form content for ya in particular

[@BrendanOConnellWP]

Cheers to the 🐐!

[@gagankhatri338]

This is really great guide. thanks for sharing.

[@BrendanOConnellWP]

Glad it was helpful. Thanks for your kind words! 😎

[@SiteswithNatalie]

Thank You, Brendan It has been very helpful.

[@BrendanOConnellWP]

Glad to hear it! Thanks for your videos too. What a great little community Bricks is!

[@SiteswithNatalie]

@@BrendanOConnellWP absolutely!! Let’s keep this.

[@justingallant1560]

Nice little walkthrough. Simple and straightforward. Good work.

[@BrendanOConnellWP]

Thanks, appreciate that!

[@ecommerce9926]

This is gold

[@BrendanOConnellWP]

❤️ to hear it! thanks

[@ThierryC-te3rx]

At 10mn I realized what You did by tokenizing H,S, and L values (non-english, non coder) Wow that's crazy cool !

[@BrendanOConnellWP]

thanks, yes, i'll try and be more clear

[@ThierryC-te3rx]

@@BrendanOConnellWP Not your fault ☺

[@koqpe13]

Thank you, you saved me time 😊

[@BrendanOConnellWP]

haha good, glad to help. pay it forward to some1 else 😄

[@vaughanprint]

Very useful addition and thanks for demonstrating.

[@BrendanOConnellWP]

Glad it was helpful! Thanks!

[@hosseinkhanmohammadi4770]

very fast approach. I like it and good to watch it.

[@BrendanOConnellWP]

Many thanks, my friend!

[@shibupandit24]

thank you for this awesome video

[@BrendanOConnellWP]

Glad you liked it! thanks for watching

[@BGdev305]

Nice work B.!

[@BrendanOConnellWP]

thanks! 😊

[@KeshavDaBhutra]

Amazing please make more bricks native feature videos

[@OJGamingYT]

I was honestly hype for this, but now that it's out it's actually slower than just putting any variable code in a stylesheet. I guess I get that someone who may not know how to do that will like this better, but then again if they don't know what :root and css stylesheets are, they probably weren't going to use this anyway.

[@BrendanOConnellWP]

i can understand that reasoning. I guess i'd extend it and be a little more hopeful that it will encourage people unfamiliar with css frameworks and external style sheets to start using variables even if just a few here and there. But yeah I don't see it replacing the workflow for most people. Maybe when components come out it will be useful to allow editors to style with

[@dougpopejoy]

Brendan, I really appreciate your content. Just a suggestion... It would be great if you numbered your videos. Something sequential would be fine. That way when we build along with you - We can name "Local" site folders something like "B113" etc. Kevin G. does this and it really helps. THANKS again.

[@BrendanOConnellWP]

Thanks Doug. An interesting idea and I see the value of something like this. Since they aren't exactly in order or grouped by release i'm not sure how i can approach it without it being confusing and appearing like each video is part of a series.

[@michaellaboulle6721]

Awesome! Will it make Automatic CSS obsolete?

[@BrendanOConnellWP]

No way. Unless you are going to import all those variables and manually edit them. And add the utility classes. But there is so much else (including automatic variable expansion, @ recipes for HSL, clickable parents, etc)..... but of course, adding the css to your stylesheet was always possible, and tools like AT let you import json stylsheets. Vast majority won't do that and having a UI to modify the framework saves tremendous time and stops you making mistakes. And no right click? I will continue to use ACSS. But now that you can create and manage in vanilla Bricks? That is GREAT! And it's better than Webflows if we're keeping tally!

[@michaellaboulle6721]

Ok great, I am definitely used to ACSS so it would be a bummer. Thanks for the quick response.

[@rolandoveca]

OMG . . . u are a crack . . . tnx 4 the tip

[@BrendanOConnellWP]

Glad it helped! Thanks for watching

[@stewtech]

Is the Find and Replace part of Bricks or AT?

[@BrendanOConnellWP]

Find and replace is an AT feature

[@RobCooper]

Hey. Im on the road but caught the instawp TAB interview. I see you're all in. Did he not say ACSS doesn't sync? I'm about to buy a pro account to build our new website but pretty sure he said it doesn't listen to acss changes. A couple comments in the live chat said that was a deal breaker. Then I saw you say you were in.

[@RobCooper]

Ive 1 more day before im on a cruise and out of touch so I'd love to know what you heard about that so I can make a decision before setting sail

[@BrendanOConnellWP]

I heard that but honestly didn't pay attention. I got it mainly for testing and content creation (demos, tutorials, might make a course) I'll go back and listen but they may add the proper syncing I assume?

[@RobCooper]

So I upgraded my free account and had no place to add a coupon so here we are lol. I left a ticket with the code as theyre away for the weekend and im on a cruise for a week starting tomorrow. My guess is that they'll get it to work. Kevin does use them so they must be ok

[@BrendanOConnellWP]

@@RobCooper Kyle mentioned in the stream if you reach out, he & InstaWP team can help get you sorted i believe. I was able to find the coupon code area and upgraded my free acc too

[@t.t.2977]

do u think it kills automatic css in long term?

[@BrendanOConnellWP]

Short answer: no Long answer (pasted from my reply to this question on another commenter): No way. Unless you are going to import all those variables and manually edit them. And add the utility classes. But there is so much else (including automatic variable expansion, @ recipes for HSL, clickable parents, etc)..... but of course, adding the css to your stylesheet was always possible, and tools like AT let you import stylsheets. Vast majority won't do that and having a UI to modify the framework saves tremendous time and stops you making mistakes. And no right click? I will continue to use ACSS. But now that you can create and manage in vanilla Bricks? That is GREAT! And it's better than Webflow's if we're keeping tally!

[@user-eo1vz9lt8g]

When I check my account in Bricks my version only goes to 1.9.7.1 Not sure where 1.9.8 is...

[@BrendanOConnellWP]

there is a manual download link in this post from the Bricks team: facebook.com/groups/brickscommunity/permalink/1356893018308548

[@user-eo1vz9lt8g]

ok, thanks, not on Facebook but might have to capitulate... arrrgggghhhh...

[@BrendanOConnellWP]

maybe there was an email as well? the link is here: ttps://my.bricksbuilder.io/?beta=1.9.8

[@user-eo1vz9lt8g]

thanks, that does take me to my account, but there isn't a beta version available so maybe only Facebook, I don't like Facebook but do you find that the Bricks group inside of Facebook useful? I might join if it is useful for a beginner to learn. I mostly use KZbin only at the moment. Great tuts by the way...

[@BrendanOConnellWP]

@@user-eo1vz9lt8g is there a dropdown to select the beta? thanks, hope the vids are useful. highly recommend YT video series 'Page building 101' if you're new to Bricks. The FB grp is useful if you're able to search for specific questions, same with the official Bricks forum, mostly nice people! There is a discord channel as well that has lots of activity

[@fiqihalfarizy4843]

subscribe!!

[@BrendanOConnellWP]

thanks