Either use the default scss
variables Bulma provides along with node-sass
or apply your own branding for extra flair.
You only need 2 packages to customize Bulma: node-sass
and bulma
itself.
Start by installing the dependencies--
npm install
To build a CSS file from a Sass file, we can use node scripts. In package.json, we have added the following:
"scripts": {
"css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
}
css-build
takessass/mystyles.scss
as an input, and outputscss/mystyles.css
, while omitting the source mapcss-watch
builds the CSS and watches for changesstart
is simply a shortcut forcss-watch
To test it out, go in your terminal and run the following command:
npm run css-build
If set up correctly, you will see the following message:
Rendering Complete, saving .css file...
Wrote CSS to /path/to/mybulma/css/mystyles.css
Reload the page and it should be styled with Bulma's default styles.
Replace the content of the
mystyles.scss
file with the following:
@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;
// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";
Since you are watching for changes, simply save the file to see the result, which should represent your changes.
Voila!
This page is Open Source and derived from Bulma's comprehensive version of this template.
All credit for the creation of Bulma goes to Jeremy Thomas, and all source code is licensed MIT.