Customizing Bulma’s Sass Variables
First and foremost, bulma.io is awesome! It is a free and open source CSS framework based on Flexbox that allows you to quickly create gorgeous, fully responsive sites. That being said, if you’re like me, you’re going to want to customize the crap out of it. As much as I love turquoise, it’s not the right primary color for everything.
So I set myself to what I thought would be a fairly obvious process of customizing. Turns out it’s not quite that clearly spelled out in the docs. My solution was pretty simple (like all coding solutions should be), so I wanted to share it in hopes of saving someone else a little time.
If you want to skip all of this and just use my boilerplate, go ahead and clone this repo and follow the instructions in the README (includes an express server, unlike the following instructions). Otherwise follow along below (these instructions are intended for beginners, but assume you at least have a computer (I’m on a mac) with an Integrated Development Environment (IDE) such as atom, sublime, VSCode, have Sass globally installed/know a little about how to use it, know some command-line and have a package manager such as npm or yarn installed.
Step 1: Make a new project from the command-line:
$ mkdir bulma-test && cd bulma-test (you can call it whatever you’d like)
Step 2: Create some much needed directories from the command-line:
$ mkdir public public/styles public/vendors
This will create a public directory with styles and vendors directories inside it.
Step 3: yarn or npm init (I’ll be using yarn from here on out) and install bulma and font-awesome.
$ yarn init and simply press enter/return through yarn’s setup questions
$ yarn add bulma font-awesome adding in font-awesome for eventual font-awesomeness as per Bulma’s recommendation!
Your project structure should now look like this:
You should have a node_modules folder with bulma and font-awesome inside, our above mentioned public directory, a package.json (which will have a list of dependencies that includes bulma and font-awesome) and a yarn.lock.
Step 4: Move bulma and font-awesome to the vendors folder. I like to do this, but it’s honestly not necessary. You could certainly source them from your node-modules and still be able to customize.
Step 5: Create your HTML and .scss files:
$ touch public/index.html public/styles/main.scss
This will create your index.html file and a main.scss file in your public/styles directory.
Step 6: Setup HTML5 with proper links and a Bulma header:
I highly recommend typing this yourself for muscle memory. At least the links and everything inside the <body></body>.
Step 7: Import Bulma’s sass into your pulblic/styles/main.scss file by adding the line @import ‘../vendors/bulma/bulma.sass’; inside that file. If you peruse inside that file, you will notice it is just a bunch of other imports from throughout the bulma directory. This will include all of bulma’s default settings which we can now overwrite.
Step 8: Run Sass to compile all of Bulma’s files into a main.css file.
$ sass public/styles/main.scss public/styles/main.css
This will create your .sass-cache, main.css file and main.css.map. You can now watch for changes as you go with:
$ sass public/styles/main.scss --watch
At this point, if all is working as it should be, when you open the index.html file in your browser (chrome recommended!) you should see a beautiful turquoise header like this one:
So far so good and with your main.css link below the bulma.css link in your index.html, you can now overwrite the default values.
Step 9: Now for the most important part of all; customizing! Your sass should be watching for changes in public/styles/main.scss, so let’s go make some. The way it is currently setup, bulma defaults are active in your html, but can be overwritten above @import ‘../vendors/bulma/bulma.sass’; in main.scss. Any other styling you want to do with Bulma’s initial-variables can be done below the import. Try typing $primary: red; in your main.scss file. After a moment (for sass to compile it), it should turn the turquoise header to standard CSS red:
$primary is just one of many initial-variables. Here’s the full list again, including their derived and generic ones.
Now try this below the import: html { background: $primary};. This should turn the entire html background red. Comment out $primary: red; and the entire html should go back to the default turquoise setting.
Conclusion: The main.css file is now going to be huge, so you’ll likely want to minimize it with gulp-minify-css or another similar tool, regardless of the size of your project.
Also just a note, Bulma’s colors are defined with HSL (Hue, Saturation, Light) as opposed to hex or rgb values. Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Values are specified with: hsl(hue, saturation, lightness). Here is an HSL calculator. You can customize with hex, RBG or just standard CSS colors as well.
Happy Bulma/Sass customizing 😎! Here’s the final repo following this blog post exactly, in case you missed something:
