Customising with CSS variables

In Bulma 1.0 almost every value — a colour, the font, the corner radius, a card's padding — is stored in a CSS variable with the --bulma- prefix. So you can apply a brand style with plain CSS, without Sass or a bundler: just override the variables you need in your own stylesheet, loaded after Bulma.

Your own primary colour

Bulma colours are defined by three HSL variables: hue (-h, in degrees), saturation (-s) and lightness (-l). From them Bulma computes the light, dark and numbered shades. Let us make the restaurant's primary colour olive:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<style>
  :root {
    --bulma-primary-h: 70deg;
    --bulma-primary-s: 45%;
    --bulma-primary-l: 42%;
  }
</style>
 
<button class="button is-primary">Book a table</button>
<span class="tag is-primary is-light">Seasonal</span>
<p class="has-text-primary mt-3">Olive text</p>

The button, the tag and the text turned olive, although the classes are the same as before. In a project the :root rule goes into your own file, such as src/style.css, loaded after Bulma.

The info, success, warning and danger colours change the same way.

Font and radius

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<style>
  :root {
    --bulma-family-primary: Georgia, serif;
    --bulma-radius: 0;
  }
</style>
 
<p class="title is-4">Trattoria Oliva</p>
<input class="input mb-3" placeholder="Your name">
<button class="button is-link">Send</button>

The heading and the field use the Georgia font, and the field and button have square corners.

Component variables

Every component has its own variables, listed on the component's page in the Bulma documentation. For the card they include --bulma-card-radius, --bulma-card-shadow and --bulma-card-content-padding. Bulma declares them on the element itself (.card), so you override them on a class too, not on :root:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<style>
  .card.dish-card {
    --bulma-card-radius: 0;
    --bulma-card-shadow: none;
    --bulma-card-background-color: var(--bulma-primary-95);
  }
</style>
 
<div class="card dish-card" style="max-width: 280px">
  <div class="card-content">
    <p class="title is-5">Tiramisu</p>
    <p>€7</p>
  </div>
</div>

A card with no shadow, square corners and a light turquoise background. The other cards on the page are unchanged: the rule applies only to dish-card.

When variables are not enough

The light and dark shades (-light, -dark) and the text colour on coloured buttons are computed by Bulma at build time and stored in variables as fixed lightness percentages. So change the hue and saturation first and keep the lightness around 40–50%. For a completely custom palette Sass is more convenient — that is the next lesson.

Common mistake

Writing --bulma-primary: #6b8e23;. The --bulma-primary variable is computed from -h, -s and -l, and replacing it does not affect buttons and shades that read those three variables directly. Convert the colour to HSL (the colour picker in the browser DevTools can do it) and set the three values.