1
Download the source files:
npm install bulmaor clone the repository: https://github.com/jgthms/bulma
If you're familiar with Sass and want to customize Bulma with your own colors and variables, just install Bulma via npm:
Customizing with Sass
Create your own theme with a simple set of variables
2
Set your variables
Add your own colors, set new fonts, override Bulma's default styles...
// 1. Import the initial variables
@import "../sass/utilities/initial-variables"
@import "../sass/utilities/functions"
@import "../sass/utilities/derived-variables.sass"
// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink and its invert
$pink: #ffb3b3
$pink-invert: #fff
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif
// 4. Setup your Custom Colors
$linkedin: #0077B5
$linkedin-invert: findColorInvert($linkedin)
$twitter: #1DA1F2
$twitter-invert: findColorInvert($twitter)
$github: #222222
$github-invert: findColorInvert($github)
// Add new color variables to the color map.
$addColors: (
"twitter":($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert),
"github": ($github, $github-invert)
)
$colors: map-merge($colors, $addColors)
// 5. Import the rest of Bulma
@import "../bulma"3
See the result: before and after
As $blue has been updated, and since $blue-invert is automatically calculated with the function $blue-invert: findColorInvert($blue), the $blue-invert is now black instead of white
