Most elements and components have color variations thanks to modifiers with syntax .is-$color
, like is-primary
or is-dark
.
This is thanks to the $colors
Sass map, through which Bulma cycles to grab all the colors and their inverts.
Responsiveness
Bulma is a mobile-first framework
Most elements and components have color variations thanks to modifiers with syntax .is-$color
, like is-primary
or is-dark
.
This is thanks to the $colors
Sass map, through which Bulma cycles to grab all the colors and their inverts.
Color | Variable | Value | Computed value | Invert value | Computed invert value |
---|---|---|---|---|---|
White |
$white
|
$white
|
hsl(0, 0%, 100%)
|
$black
|
hsl(0, 0%, 4%)
|
Black |
$black
|
$black
|
hsl(0, 0%, 4%)
|
$white
|
hsl(0, 0%, 100%)
|
Light |
$light
|
$white-ter
|
hsl(0, 0%, 96%)
|
$grey-darker
|
hsl(0, 0%, 21%)
|
Dark |
$dark
|
$grey-darker
|
hsl(0, 0%, 21%)
|
$white-ter
|
hsl(0, 0%, 96%)
|
Primary |
$primary
|
$turquoise
|
hsl(171, 100%, 41%)
|
#fff
|
#fff
|
Link |
$link
|
$blue
|
hsl(217, 71%, 53%)
|
#fff
|
#fff
|
Info |
$info
|
$cyan
|
hsl(204, 86%, 53%)
|
#fff
|
#fff
|
Success |
$success
|
$green
|
hsl(141, 53%, 53%)
|
#fff
|
#fff
|
Warning |
$warning
|
$yellow
|
hsl(48, 100%, 67%)
|
rgba(0, 0, 0, 0.7)
|
rgba(0, 0, 0, 0.7)
|
Danger |
$danger
|
$red
|
hsl(348, 100%, 61%)
|
#fff
|
#fff
|
Bulma also provides a $shades
Sass map, that only contains shades of grey between black and white.
Color | Variable | Value |
---|---|---|
Black bis |
$black-bis
|
hsl(0, 0%, 7%)
|
Black ter |
$black-ter
|
hsl(0, 0%, 14%)
|
Grey darker |
$grey-darker
|
hsl(0, 0%, 21%)
|
Grey dark |
$grey-dark
|
hsl(0, 0%, 29%)
|
Grey light |
$grey-light
|
hsl(0, 0%, 71%)
|
Grey lighter |
$grey-lighter
|
hsl(0, 0%, 86%)
|
White ter |
$white-ter
|
hsl(0, 0%, 96%)
|
White bis |
$white-bis
|
hsl(0, 0%, 98%)
|