Customizing Bulma on a Gatsby Blog

This is a post from my personal blog located Here
They are published there a day early. How fancy.

Here is the TLDR version of this post:

1. First, we need to npm install --save Bulma gatsby-plugin-sass.
2. Then we should put gatsby-plugin-sass into our dang ole gatsby-config.js.
3. After that, we should change layout.css to layout.scss.
4. Which allows us to @import '../../node_modules/bulma/bulma.sass'; in that same layout.scss file.
5. Then, above that, we can declare any variables you want to override.

Below are the variables I set for this blog here as of writing this post.

$primary: #b084eb;
$blue: #7dc1ff;
$input-shadow: none;
$info: $blue;

As much as I love writing my CSS from scratch it is not always the best choice, and after going indy I had to heavily consider using a CSS framework. I decided to for the following two reasons.

1. I want the courses to focus on JavaScript so I want to use an easy to use CSS framework so the content can focus on just the JavaScript.
2. I want to build many things quickly that share a theme.

Choosing which framework was easy for me as I really love Bulma, I used it heavily at U-Haul and really enjoyed working with it. I love that it ships with no JS, can be installed via npm, is easily customizable, has some cool community made themes, and it's naming conventions make sense to me. It is by far my favorite CSS framework and is a breath of fresh air when compared to something like Bootstrap.

The piece of Bulma this blog is focused on is the easy customization. You can read all about Bulma's customization Here. I will, however, cover a little bit of it below.

Basically, Bulma has a few types of variables, and you can override them with your own brand values. Some are derived from others. So changing a few of the base variables can have a big effect!.

I really only wanted to do a few things, change the primary color, the shade of blue used, and remove the input's inner shadow. But first I need to install Bulma on my site.

I have not done much with my Gatsby site yet, it is using the default-starter which hooks you up with a layout.css file. Bulma uses Sass though so we will need to change that. Luckily Gatsby makes that super easy all we need to do to get Sass working and compiled with node-sass on our Gatsby site is install gatsby-plugin-sass and add that to our Gatsby config like below.

plugins: [
  'gatsby-plugin-react-helmet',
  'gatsby-plugin-sass',
  // ...other plugins.
]

Boom! Now we're cooking, we can change the layout.css file to the layout.scss file now and import Bulma, and since we set it up this way, we can also already override those variables. Leaving my layout.scss file looking like this

// BULMA VARIABLE OVER-RIDES
$primary: #b084eb;
$blue: #7dc1ff;
$input-shadow: none;
$info: $blue;
$background: #fafafa;
@import '../../../node_modules/bulma/bulma.sass';
// ...All the Gatsby default stuff.

Comments

[HaveF]

Thanks for your post! Btw, can we use bulma to change theme, like click day/night mode button when the user visiting the page?

[Levi ᕙ(⇀‸↼‶)ᕗ]

You could use Bulma for this yeah. But rebass rebassjs.org/ is probably a better way to go with that goal in mind.

[HaveF]

Hi, Levi, thanks for your replay!
Could you know how to use bulma to change theme(not customize) in react project? I found Bulmaswatch - Free themes for Bulma, but have no idea how to use it dynamic.

[Levi ᕙ(⇀‸↼‶)ᕗ]

I actually only know that it's possible in theory, I have never done it without using a CSS-in-JS solution. I'm assuming nowadays the best way to accomplish it nowadays is with CSS variables.

[Kenold Beauplan]

Helpful post! I've spent too much time styling my site with flexbox while creating my first Gatsby site. What could've taken me 2 days already took me almost a month already.