Creating a custom Bulma build

CSS frameworks Bootstrap and Bulma are a great way to start designing web pages quickly but are usually shipped with their sizes, fonts, colors, and other properties. In this blog post, I show how I ended up with a custom build of Bulma to be able to change these framework properties to get a custom design.

Downloading Bulma

The first step is to download all Bulma source files that are offered as an archive. It can be downloaded straight from the Bulma homepage. I export the main bulma folder into a mybulma folder inside a root folder of a project. The mybulma folder will hold all original Bulma files as well as my modifications.

Custom build with Sass

Bulma is built on Sass, a well-known CSS extension and preprocessor. There is no need to know Sass in detail. The main thing to know is that when given a Sass file, it can transform it into valid CSS.

There are multiple implementations of Sass, with most of them being deprecated in favor of a new version written in Dart. But for my purpose, the JavaScript version available from the npm package manager is enough and more convenient to use. It is easy to install it into an npm project with npm i sass.

To create a custom build, we need our own .scss file that will load and modify Bulma. The official website has an example of that. I just modified the path to bulma .saas file import:

@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Optionally, it is possible to import only individual
// parts of Bulma
@import "./bulma/bulma.sass";

We can save this file in mybulma folder that will now look like this:

mybulma
├── bulma
└── mybulma.scss

Configuring npm script

Since I want to be able to build Bulma any time I modify the mybulma.scss file, I create an npm script definition inside package.json (note the scripts section):

{
  "name": "",
  "version": "",
  "description": "",
  "main": "",
  "scripts": {
    "build-bulma": "sass mybulma/mybulma.scss mybulma/mybulma.css"
  },
  "author": "",
  "license": "",
  "dependencies": {
    "sass": "^1.42.1"
  }
}

Then I can run npm run build-bulma and my new Bulma CSS file will be generated inside mybulma folder:

mybulma
├── bulma
├── mybulma.css
├── mybulma.css.map
└── mybulma.scss

I can now move or reference the file as needed. Personally, I keep the whole mybulma folder under version control. I don't see it as a valid use case to automatically update the Bulma version since it is hard to test CSS design changes, and storing the final generated version almost doesn't take any space.

Last updated on 9.10.2021.