Bulma customisation workflow
Posted on by Kevin Foong
Bulma is one of the most friendly and intuitive CSS frameworks I have come across. This is how you setup a workflow using node-sass to customise Bulma for your web development project.
1. Install node.js on your computer
2. Create a folder called "mybulma" and run npm init
3. Install these two packages:
node-sass --save-dev npm install bulma --save-dev
4. In "package.json" amend the "css-build" output to exactly where you want the CSS to output to. This will be the location of your web project's CSS folder and filename. For example mine below will output "mybulma.css" to the "../blog/app/static/styles/" folder.
......
},
"scripts": {
"css-build": "node-sass --omit-source-map-url sass/mybulma.scss ../blog/app/static/styles/mybulma.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
}
......6. Create a folder called "sass" and create a file called "mybulma.scss" within the folder. This is where you will add your code to customise any Bulma variables. Mine looks something like below:
@charset "utf-8";
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@700');
$family-sans-serif: "Nunito", sans-serif;
$body-background-color: #f4f4f4;
$primary: #6983aa;
$primary-invert: findColorInvert($primary);
$info: #8ec6c5;
$info-invert: findColorInvert($info);
$link: #000000;
$link-hover: #666666;
// Import all Bulma components
@import "../node_modules/bulma/bulma.sass";7. Now whenever you run npm run css-build it will output the css to your specified folder which will reflect straight-away on your website!
Note that these instructions have been modified from Bulma's excellent documentation here