CSS Variables in the Homebrewery

Recently someone on Discord was asking about how CSS Variables work which seemed like a good topic to cover on the blog. CSS Variables are a way to carry a defined property value to other properties across your style sheet. You define your variable with a value, and then you can use that variable elsewhere. Your value only has to be updated in one spot if you want to change it, and the change will propagate to the rest of the properties the variable is used in. This increases efficiency and reduces errors in the process.

Table of Contents

• What are they good for?
• A Colorful Example
• Another Type of Example
• Okay, so…

What are they good for?

When creating a theme it is a good idea to consider the overall color palette that is best going to evoke the mood you want your setting to convey, and then carry that palette through your brew consistently. Similarly, your typography should be limited to just a few well-paired font families to keep your narrative cohesive and clean.

If you’ve assembled a color palette and a few fonts you should consider committing them to a set of CSS Variables in the :root of your brew. The root is the highest level of ‘container’ in your brew document, the “parent without a parent”. By attaching your variables to this container they will be available wherever you might need them. Then, after your variables are defined, you can reference them anywhere else in your Style Editor rules.

The benefit is that if you decide “I don’t like that blue color in the large headers, I want light green”, you can make a change in a single spot (where your variable is defined) and it will update wherever you used the variable.

A Colorful Example

Here I will define my variables:

:root {
  --Primary-Color: #638393;
  --Secondary-Color: #F9EBD4;
}

I have a washed out medium blue primary color, and a very light beige secondary color. Note, these are just set with RGB hex codes, which by themselves basically tells us nothing about what the color actually looks like. By assigning them to variables, we can give them any meaningful name we want.

Now, I can take these variable names and drop them into multiple rules in the Style Editor:

:root {
  --Primary-Color: #638393;         /* washed out blue */
  --Secondary-Color: #F9EBD4;       /* near-white beige */
}

.page {
  background: var(--Primary-Color); /* page background */
  color: var(--Secondary-Color);    /* base text color */
}

.page h2, .page h3, .page h4 {
  color: var(--Secondary-Color);    /* h2, h3, h4 text color */
}

.page .note {
  background: var(--Secondary-Color); /* phb note background color */
  color: var(--Primary-Color);        /* phb note text color */
}

You can see that the page background will now be the medium blue, as will the text in the note boxes. The main text and the headers will be a very light beige-y color. Not only can you see it, but it’s easy to understand because of the variable names.

On a whim, I can make a quick change:

:root {
  --Primary-Color: #537828;         /* a forest-y green */
  --Secondary-Color: #F9EBD4;       /* near-white beige */
}

Because I gave my variables very generic names, I have a lot of room to think of different color schemes with little additional work. I could give the variables names that represent the colors themselves (--forest-green) which would give me a lot of readability later in my styles, but it would also mean that if I change that color, I likely need to change that variable name throughout the document.

Another Type of Example

Moving on from colorful applications of variables, take a look at this example using fonts:

:root {
  --Primary-Font: 'Shree Devanagari 714';
  --Primary-Font-Height: 1.5em;
  --Big-Header-Font: 'Bloomsbury Sans';
}

I have a font I want to use for most of the normal text (Shree), a line-height that I like for that particular font which I have named “–Primary-Font-Height”, and a font for the larger headers, h1 through h3.

Applied in my brew like this:

:root {
  --Primary-Font: 'Shree Devanagari 714';
  --Primary-Font-Height: 1.5em;
  --Big-Header-Font: 'Bloomsbury Sans';
}

.page p {
  font-family: var(--Primary-Font);        /* base text font */
  line-height: var(--Primary-Font-Height); /* base text line height */
}

.page h1, .page h2, .page h3, .page .note h3 {
  font-family: var(--Big-Header-Font);     /* large header font */
}

.page .note p {
  line-height: calc(var(--Primary-Font-Height) * .7); /* line-height overriding default note line-height.
}

Note here that I need to specifically target the paragraphs inside notes because the PHB default theme has that already set, and I need to override it. But I’m also taking the opportunity to use calc(), a rare math function in CSS. Using calc, I am setting the line-height of the note text to always be 70% of the normal line-height.

I have a decent looking alternative theme here, or a quick start on one. But let’s see what this would look like in outer space:

:root {
  --Primary-Font: 'Shree Devanagari 714';
  --Primary-Font-Height: 1.7em;
  --Big-Header-Font: 'Space Age';
}

There we go. I should also note that I have these fonts installed locally on my computer, which works here since I’m just taking screenshots. These fonts are not available normally in the Homebrewery unless you import them yourself.

Okay, so…

What should you use variables for? Well, colors and fonts, and probably a bunch of other things that repeat throughout your styles and are conceptually “linked” to each other. For example, if you want to have rounded corners on any elements with backgrounds or borders, and you want that border radius to be consistent, you could set that value to a variable at the top of your Style Editor. If your note boxes, monster stat blocks, and headers all have some amount of drop-shadow, you could define that drop-shadow as a variable.

Variables will keep your Style Editor more organized, more flexible, and easier to understand for others that may be looking for inspiration. Let me know if you have a clever use for variables, I feel like this is a space in which there are likely lots of strange use-cases.