How to use the Bulma CSS Framework (with SASS)
Tags: sass, css, tutorial, bulma
Published: 2018-03-30 17:27:08

---
title: How to use the Bulma CSS Framework (with SASS)
published: true
tags: sass, css, tutorial, bulma
canonical_url: http://stayregular.net/blog/how-to-use-the-bulma-css-framework-with-sass
cover_image: https://thepracticaldev.s3.amazonaws.com/i/62clp2pyp5r5edx8726g.png
---

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](https://codeburst.io/evaluating-css-frameworks-bulma-vs-foundation-vs-milligram-vs-pure-vs-semantic-vs-uikit-503883bd25a3#b3ae) 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](https://github.com/jgthms/bulma-start/issues/1), 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:**

- [Bulma](https://bulma.io/)
- [Bulma start (SASS Starter Kit)](https://bulma.io/bulma-start/)
- [Bulma Docs](https://bulma.io/documentation/overview/start/)