How to use the Bulma CSS Framework (with SASS)

Bulma is described by it's site as a free and open source CSS framework based on Flexbox. Compared to packages like Bootstrap, it's more lightweight at 73kb than other CSS systems like Bootstrap or Semantic. And it looks good, I like the aesthetic of the page and the graphic nature of it compared to a lot of other more reserved, almost corporate frameworks.

It's a simple as importing a single CSS if you're interested in using the default library. But if you want to easily change colors, typography, or any other settings across all the components -- it's much easier to use the SASS version. It was pretty easy, but it wasn't as well documented as I preferred, so I wrote this to help others through the process.

Install Bulma-Start

The kind folks at Bulma have put together a package to help developers compile SASS without any additional configuration to their existing project. Rather than installing node-sass yourself and setting up the package.json, you install the bulma-start package.

Run the following command in your project root:

npm install bulma-start

How to use Bulma-Start

The Github repo's readme wasn't very detailed on how to actually use the package. Luckily, someone had this issue already, so the question's been roughly answered there.

In order to compile the SASS, you have to navigate terminal to the node_modules/bulma-start folder and run npm commands from there.

  1. cd node_modules/bulma-start/
  2. npm run css-build

But what do I do with the files?

You could include the CSS directly from the node_modules folder once it's compiled. But I personally put that folder under .gitignore, so it won't be committed to the repo.

I swapped this line in the bulma-start/package.json:

"css-build": "node-sass _sass/main.scss ../../assets/css/bulma.css",

This compiles the SASS file into a CSS file in your projects assets directory. And when you set NPM to watch, it'll keep updating the CSS file there as well. Much easier.

At the end of the day

I wasn't a huge fan of Bulma. It's not organized well enough for my tastes. I had to convert it to a dark theme, which required me finding unique SASS variables for each components color (from background to link colors). It allows for greater customization between components, but makes mass-editing styles a nightmare.

They could really take a cue from Semantic UI and how they've designed their framework to be OOCSS. When I want a navbar to be blue, I don't have to dig through the Bulma SASS variables to find $navbar-background-color, I just include the CSS classes: inverted blue.

Stay regular,
Oscar

Keep Reading:

Oscar

Oscar is an artist and engineer who's been creating cannabis brands and media experiences for over 10 years, and developing full-stack applications for over 15 years.