CSS Variables For Beginners

By the end of this guide, you’ll have a solid understanding of how to create, manage, and apply CSS variables to streamline your design process.

What Are CSS Variables?

CSS variables allow you to store specific values, such as colours, font sizes, and spacing units, in a reusable and flexible way. They are defined by a -- prefix and can be accessed using the var() function. For example:

:root {
  --primary-color: #3498db;
  --spacing-medium: 2rem;
}

You can then use these variables throughout your CSS:

body {
  background-color: var(--primary-color);
  padding: var(--spacing-medium);
}

CSS variables can be applied globally or scoped to specific selectors, making them highly versatile for maintaining a consistent design system.

Step 1: Creating and Managing CSS Variables in Bricks Builder

Bricks Builder makes creating and managing CSS variables easy through its built-in Variable and Class Manager. Here’s how to get started:

1. Access the Variable Manager: In Bricks Builder, click the “Classes and Variables” icon in the top-left corner to open the Variable Manager.
2. Create Your First Variable: In the Variable Manager, you’ll see fields for the variable name and value. For example, to create a spacing variable, you might name it --line-space-m and assign it a value of 2rem.
3. Save and Repeat: You can create additional variables for different spacing values, such as --line-space-l for 3rem and --line-space-xl for 4rem.

Once you’ve created your variables, you can apply them to elements in your design. For example, to set the line height of a text element, select the element, go to the Typography settings, and choose the variable from the list.

Step 2: Using Online Tools to Generate CSS Variables

Manually creating variables can be time-consuming, but there are online tools that can help speed up the process. For example, you can use a colour palette generator to create a range of colour variables. Here’s how:

1. Generate a Color Palette: Use an online tool to generate a colour palette. The tool will provide you with a list of CSS variables, such as:

   --color-primary-a0: #f0f8ff;
   --color-primary-a1: #d0e8ff;

2. Import Variables into Bricks: Copy and paste the generated variables into the Variable Manager in Bricks Builder. You can even categorise them for better organisation.
3. Apply the Variables: Once imported, you can apply these colour variables to elements in your design. For example, set the background colour of a container by selecting the variable from the list.

Step 3: Organising and Categorizing Variables

You can create categories in the Variable Manager to organise your variables. For example, you might create colour, spacing, and typography categories. This makes finding and applying the correct variables easier as your design system grows.

1. Create a Category: In the Variable Manager, click “Create Category” and name it (e.g., “WPTuts”).
2. Categorise Variables: Select the variables you want to group, click “Categorise,” and assign them to the appropriate category.

Step 4: Applying Variables to Elements

Now that you’ve created and organised your variables, it’s time to apply them to your design. Here’s an example of how to use a background colour and spacing to a container:

1. Select the Container: In Bricks Builder, select the container you want to style.
2. Apply a Background Color: Go to the Background settings, choose “Raw” from the color picker, and select a colour variable (e.g., --color-primary-a20).
3. Set Padding: In the Layout settings, link the padding values, click the variable icon, and choose a spacing variable (e.g., --spacing-m).

Step 5: Global Changes with CSS Variables

One of the most significant advantages of using CSS variables is the ability to make global changes. For example, if you decide to change your primary colour, you only need to update the variable, and the change will be reflected across your entire design.

1. Update a Variable: In the Variable Manager, change the value of a variable (e.g., change --primary-color from blue to red).
2. Global Update: Once you save the change, every element using that variable will automatically update to the new colour.

Step 6: Combining CSS Variables with Global Classes

Global classes allow you to group styles and apply them to multiple elements. By combining global classes with CSS variables, you can create reusable design patterns that are easy to update.

1. Create a Global Class: Select an element, such as a container, and create a global class (e.g., sample-container).
2. Apply Styles Using Variables: With the global class selected, use your CSS variables to apply styles like padding, background colour, and border-radius.
3. Reuse the Class: Apply the global class to other elements, and they will inherit the same styles. If you update the class or the variables, all elements using the class will update automatically.

Step 7: Using Variables in Theme Styles

You can also use CSS variables in Bricks Builder’s theme styles to ensure consistency across your site. For example, you can set your primary button colour to use a variable, so any changes to the variable will automatically update all buttons.

1. Create a Theme Style: In Bricks Builder, create a new theme style (e.g., “WPTuts”).
2. Apply Variables: In the theme style settings, apply variables to elements like buttons, typography, and background colours.

Conclusion

CSS variables are a powerful tool for creating flexible, maintainable design systems. By using them in Bricks Builder, you can streamline your workflow, ensure consistency, and make global changes with ease. When combined with global classes, CSS variables become even more powerful, allowing you to create reusable design patterns that can be applied across your entire site.