Using and Customizing Bulma.io with Hugo



A quick note on how to use bulma.io with Hugo, including pipelines and overrides.

From my limited experience it looks like overriding bulma variables is essential to getting your site to look the way you want, especially for color.

Pull bulma into your project. I did this with npm, you can just download and drop somewhere in your project as well, but you’ll need to adjust a path in the last step.

1
2
3
$ npm install bulma
$ git add node_modules/ package-lock.json
$ git commit -a

In order to customize Bulma, my limited and very new understanding is that you should be using scss, some kind of newfangled way to compile css. I created a scss file in assets/scss/main.scss:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
/ allows us to use initial variables in our override
@import 'sass/utilities/initial-variables.sass';

$scheme-main: $grey-darker;
$scheme-invert: $white;
$scheme-main-bis: $grey-dark;

$text: $grey-light; // normal text
$text-strong: $green; // header tags
$link: $green;
$link-hover: $grey-light;
$footer-background-color: $grey-dark;
$footer-color: $grey-light;

@import 'bulma.sass';

This is just a very basic example I’ve been playing with but it shows a few things, if you want to use bulma initial variables you need to import them separately (this seems important as they define a lot of useful things), then define your overrides, then import bulma itself.

Lastly to use Hugo Pipes to generate your sites css by “compiling” the scss (I hope that’s the right word), from my layouts/partials/head.html:

1
2
3
4
5
    <!-- loud bulma css compiled with our customizations from scss -->
    {{ $cssOpts := (dict "includePaths" (slice "node_modules/bulma" "assets/scss")) }}
    {{ with $styles := resources.Get "scss/main.scss" | toCSS $cssOpts }}
    <style>{{ .Content | safeCSS }}</style>
    {{ end }}

Note the path to node_modules/bulma, if you vendored manually you’d just need to adjust the path relative to the root of your site or theme.

And that should be it.