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: https://coolors.co/003049-d72d28-f77f00 Utopia Fluid Spacing/Typography: https://utopia.fyi/ Get Advanced Themer: https://advancedthemer.com/ Get Bricks: https://bricksbuilder.io/ ----------------------------------- 🌟 Brendan O’Connell 🌟 🎨 WordPress | Design | Development | Tech 🖥️ Want to connect or work together? 🌐 Website: https://brendan-oconnell.com/ 🐦 Twitter: https://twitter.com/brendanocwp 🔗 LinkedIn: https://www.linkedin.com/in/brendan-o-connell1/ ☕ Buy Me a Coffee (or Tacos): buymeacoffee.com/brendanoconnell ---------------- Aff Links: Get Bricksforge: https://bricksforge.io/?aff=d768d61b Get ACSS: https://automaticcss.com/ref/138/ Get Frames: https://getframes.io/ref/11/