CSS Variables (Quick Setup Guide)

Welcome back to another design tutorial. In this post, I’m going to show you a simple and practical way to use CSS variables in your stylesheets when building websites with page builders such as Bricks, Oxygen, and Breakdance.

What Are CSS Variables?

CSS variables, also known as custom properties, are a really useful feature of CSS that allows you to define reusable values and reference them throughout your stylesheet.

For example, you can create variables for common design properties such as font sizes, font families, colours, spacing, widths, and much more.

This can be particularly useful when working with page builders because it allows you to establish a consistent set of design values that can be reused across your entire website.

Setting the :root Pseudo-Class

The :root pseudo-class represents the highest-level element in the document, which is typically the <html> element.

It’s commonly used as the place where you define your global CSS variables, making them available throughout your stylesheet.

Here’s a simple example:

:root {
   --main-font: 'Poppins', sans-serif;
   --heading-font: 'Georgia', serif;
   --base-font-size: 1.6rem;
   --heading-1-size: 4.5rem;
   --heading-2-size: 3.5rem;
   --heading-3-size: 2.5rem;
   --heading-4-size: 2.2rem;
   --heading-5-size: 2rem;
   --heading-6-size: 1.8rem;
   --primary-color: #ffc0cb;
   --secondary-color: #bffff4;
   --text-color-dark: #404040;
   --text-color-light: #f1f1f1;
   --accent-color: #ffc0cb;
   --spacing-xsml: 0.5rem;
   --spacing-sml: 2.5rem;
   --spacing-l: 4.5re,;
   --spacing-xl: 6.5rem;
}

Colour, Size, and Spacing

OK, so now that we have our :root pseudo-class and our variables created, we can start using them throughout our stylesheet when working with our favourite website builder.

By the way, whenever I’m working with Bricks or Oxygen, the plugin I like to use for adding and managing custom code is WPCodeBox. I also cover how I use this plugin in more detail throughout my Bricks Builder and Oxygen courses.

Here’s a simple example of how you can use CSS variables to define colours, sizes, and spacing for elements that you’re styling with CSS:

.container {
   background-color: var(--secondary-color);
   padding: var(--spacing-sml);
}

Typography

Here’s an example of how we define text styles using CSS variables –

h2 {
   font-family: var(--heading-font);
}

p {
   font-family: var(--main-font);
}

.hero-sub-heading__dark {
   color: var(--primary-color);
   font-size: var(--heading-2-size);
}

.main-text__light {
   color: var(--text-color-light);
   font-size: var(--base-font-size);
}

Videos (Blueprint website projects)

OK, so hopefully you now have a basic understanding of how CSS variables work and just how useful they can be. We’ve only scratched the surface here, but once you start using them in your projects, you’ll quickly see how much they can improve your workflow and keep your designs consistent.

If you’re using Bricks Builder, be sure to check out my complete Bricks Blueprint Website setup, where I walk through setting up a custom CSS framework.

And if you’re using Oxygen Builder 6.0, I have a similar tutorial available here.