Custom rules

Because Bulma is written in Sass, you can use all of the language’s features:

• variables
• nesting
• mixins
• extends

You have already used new variables. To customize the design even more, you can use extends and nesting.

All of the code from now on has to be written at the end of the file, after having imported Bulma.

Second font

Bulma doesn’t have a second font family. So you have to write your own CSS rules. Luckily, the classes are easy to extend.

After @import "node_modules/bulma/bulma";, write the following:

%heading {
  font-family: $family-heading;
  font-weight: 500;
}

This is a Sass placeholder: this allows you to combine multiple selectors into a single rule.

Bigger controls

The Bulma controls (buttons, inputs, select dropdown, pagination links...) are redefined in this new design: slightly bigger, with no inner shadow or border.

The new control size will be re-used a few times, so it’s better to define a new variable:

$control...