I’ve been putting of this post for too long. I use Bulma as the CSS framework for this site. I previously used Bulma Customizer to customize some settings but this does not seem to work anymore. So here is how to customize Bulma CSS yourself.

Create SCSS File

Bulma’s styles are developed as Sass (Syntactically Awesome Style Sheets) files which are then “compiled” into one bulma.css file. Customizing Bulma, therefore, is a matter of using your preferred values for Bulma’s pre-defined variables.

So first, create a .scss file, which is used to:

  • A: Define Initial Variables, overriding Bulma’s defaults - stuff like colors, fonts, dimensions, e.g. $purple: #6a0dad;, $family-sans-serif: "Roboto"; and $tablet: 768px; below.

  • B: Define Derived Variables, which are variables that refer to other variables values that were previously defined. For example, you can use the initial variable $cyan in $link-hover: $cyan;. However, you can’t put this in Section A above, since $cyan is not yet defined. Initial variables are defined in utilities, so you can use these in derived variables after importing utilities.

  • C: Import Bulma components, elements, etc. that are used:

    • Follow this order: utilities first, followed by base, elements, form, components, grid, helpers, and finally layout.
    • If unsure, just import _all.sass for each of these.
    • However, if you don’t use everything, the it’s possible to import only what you need. For example, below I select which component files to import.
    • For forms, you will need to start with shared.sass and end with tools.sass, in my case, even though I’m only using the <input type="text"> element.
@charset "utf-8";

//A:
$purple: #8A4D76;
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
$family-sans-serif: "Nunito", sans-serif;
$tablet: 768px;

//B:
@import "bulma-0.9.1/sass/utilities/_all.sass";

$link-hover: $purple;
$link-focus: $purple;

//C:
@import "bulma-0.9.1/sass/base/_all.sass";
@import "bulma-0.9.1/sass/helpers/_all.sass";
@import "bulma-0.9.1/sass/elements/_all.sass";
@import "bulma-0.9.1/sass/form/shared.sass";
@import "bulma-0.9.1/sass/form/input-textarea.sass";
@import "bulma-0.9.1/sass/form/tools.sass";
@import "bulma-0.9.1/sass/components/breadcrumb.sass";
@import "bulma-0.9.1/sass/components/dropdown.sass";
@import "bulma-0.9.1/sass/components/breadcrumb.sass";
@import "bulma-0.9.1/sass/components/level.sass";
@import "bulma-0.9.1/sass/components/menu.sass";
@import "bulma-0.9.1/sass/components/level.sass";
@import "bulma-0.9.1/sass/components/modal.sass";
@import "bulma-0.9.1/sass/components/navbar.sass";
@import "bulma-0.9.1/sass/components/pagination.sass";
@import "bulma-0.9.1/sass/components/panel.sass";
@import "bulma-0.9.1/sass/components/tabs.sass";
@import "bulma-0.9.1/sass/grid/_all.sass";
@import "bulma-0.9.1/sass/layout/_all.sass";

Sass in a Container

Next, you need to get Sass running - I have a previous post on how to run Sass in a Docker container.

The container will mount a folder called css which contains:

  • the .scss file created above, e.g. call it my-bulma.scss.
  • a sub-folder with all Bulma files, i.e. bulma-0.9.1, which contains the files extracted from https://github.com/jgthms/bulma/releases/download/0.9.1/bulma-0.9.1.zip.

Build CSS

Finally, start the docker container (docker run...). Sass will read the .scss file and convert it into a standard .css file. If all goes well, you’ll see:

Compiled /src/my-bulma.scss to /src/my-bulma.css.

Otherwise, look out for these errors:

  • Error: Undefined variable. - you are using a variable not yet defined (try move it after utilities).
  • Error: expected "{". - in my case, was because I left out an ending ;!
  • Error: Can't find stylesheet to import. - whoops, there is a mistake in the @import line and the file is not found.

That’s all I’ve experienced so far, good luck!

❮ Older
Newer ❯