Bulma v0.4.4: a modern CSS framework based on Flexbox

Easily customize Bulma to match your design

Bulma has 1 variable file divided into 4 sections:

Initial variables: where you define variables by direct value, like:
- colors: $blue: hsl(217, 71%, 53%)
- font sizes: $size-1: 3rem
- other values: $easing: ease-out or $radius-large: 5px
Primary colors derived from the initial variables:
- $primary: $turquoise
- $info: $blue
- $success: $green
- $warning: $yellow
- $danger: $red
- $dark: $grey-darker
- $text: $grey-dark
Generated variables where variables are calculated from the values set in the previous file. For example, you can have:
- $body-background: $white: the main background color
- $link: $primary: the links use the primary color
- $family-primary: $family-sans-serif: the primary font family is the sans-serif one
Lists and maps which are collections so already defined variables:
- $colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
- $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6

To override any of these variables, just set them before importing Bulma.

1. Initial variables
Colors
`$black`	hsl(0, 0%, 4%)
`$black-bis`	hsl(0, 0%, 7%)
`$black-ter`	hsl(0, 0%, 14%)
`$grey-darker`	hsl(0, 0%, 21%)
`$grey-dark`	hsl(0, 0%, 29%)
`$grey`	hsl(0, 0%, 48%)
`$grey-light`	hsl(0, 0%, 71%)
`$grey-lighter`	hsl(0, 0%, 86%)
`$white-ter`	hsl(0, 0%, 96%)
`$white-bis`	hsl(0, 0%, 98%)
`$white`	hsl(0, 0%, 100%)
`$orange`	hsl(14, 100%, 53%)
`$yellow`	hsl(48, 100%, 67%)
`$green`	hsl(141, 71%, 48%)
`$turquoise`	hsl(171, 100%, 41%)
`$blue`	hsl(217, 71%, 53%)
`$purple`	hsl(271, 100%, 71%)
`$red`	hsl(348, 100%, 61%)
Typography
`$family-sans-serif`	-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
`$family-monospace`	monospace
`$size-1`	3rem
`$size-2`	2.5rem
`$size-3`	2rem
`$size-4`	1.5rem
`$size-5`	1.25rem
`$size-6`	1rem
`$size-7`	0.75rem
`$weight-light`	300
`$weight-normal`	400
`$weight-semibold`	500
`$weight-bold`	700
Body
`$body-background`	`$white`
`$body-size`	`16px`
Breakpoints
`$gap`	24px
`$tablet`	769px
`$desktop`	1008px (960px + 2 * `$gap`)
`$widescreen`	1200px (1152px+ 2 * `$gap`)
`$fullhd`	1392px (1344px+ 2 * `$gap`)
Miscellaneous
`$easing`	ease-out
`$radius`	3px
`$speed`	86ms
2. Primary colors
`$primary`	`$turquoise`
`$info`	`$blue`
`$success`	`$green`
`$warning`	`$yellow`
`$danger`	`$red`
`$light`	`$white-ter`
`$dark`	`$grey-darker`
3. Generated variables
Invert colors
`$primary-invert`	`findColorInvert($primary)`
`$info-invert`	`findColorInvert($info)`
`$success-invert`	`findColorInvert($success)`
`$warning-invert`	`findColorInvert($warning)`
`$danger-invert`	`findColorInvert($danger)`
`$light-invert`	`$dark`
`$dark-invert`	`$light`
General colors
`$body-background`	`$grey-lighter`
`$background`	`$grey-lighter`
`$border`	`$grey-light`
`$border-hover`	`$grey`
Text colors
`$text`	`$grey-dark`
`$text-invert`	`findColorInvert($text)`
`$text-light`	`$grey`
`$text-strong`	`$grey-darker`
Code colors
`$code`	`$red`
`$code-background`	`$background`
`$pre`	`$text`
`$pre-background`	`$background`
Link colors
`$link`	`$primary`
`$link-invert`	`$primary-invert`
`$link-visited`	`$purple`
`$link-hover`	`$grey-darker`
`$link-hover-border`	`$grey-darker`
`$link-focus`	`$grey-darker`
`$link-focus-border`	`$primary`
`$link-active`	`$grey-darker`
`$link-active-border`	`$grey-dark`
Typography
`$family-primary`	`$family-sans-serif`
`$family-code`	`$family-monospace`
`$size-small`	`$size-7`
`$size-normal`	`$size-6`
`$size-medium`	`$size-5`
`$size-large`	`$size-4`
4. Lists and maps
`$colors`	( white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert) )
`$sizes`	`$size-1 $size-2 $size-3 $size-4 $size-5 $size-6`

1. Initial variables

Colors

$black

hsl(0, 0%, 4%)

$black-bis

hsl(0, 0%, 7%)

$black-ter

hsl(0, 0%, 14%)

$grey-darker

hsl(0, 0%, 21%)

$grey-dark

hsl(0, 0%, 29%)

$grey

hsl(0, 0%, 48%)

$grey-light

hsl(0, 0%, 71%)

$grey-lighter

hsl(0, 0%, 86%)

$white-ter

hsl(0, 0%, 96%)

$white-bis

hsl(0, 0%, 98%)

$white

hsl(0, 0%, 100%)

$orange

hsl(14, 100%, 53%)

$yellow

hsl(48, 100%, 67%)

$green

hsl(141, 71%, 48%)

$turquoise

hsl(171, 100%, 41%)

$blue

hsl(217, 71%, 53%)

$purple

hsl(271, 100%, 71%)

$red

hsl(348, 100%, 61%)

Typography

$family-sans-serif

-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", "Helvetica", "Arial", sans-serif

$family-monospace

monospace

$size-1

3rem

$size-2

2.5rem

$size-3

2rem

$size-4

1.5rem

$size-5

1.25rem

$size-6

1rem

$size-7

0.75rem

$weight-light

300

$weight-normal

400

$weight-semibold

500

$weight-bold

700

Body

$body-background

$white

$body-size

16px

Breakpoints

$gap

24px

$tablet

769px

$desktop

1008px (960px + 2 * $gap)

$widescreen

1200px (1152px+ 2 * $gap)

$fullhd

1392px (1344px+ 2 * $gap)

Miscellaneous

$easing

ease-out

$radius

3px

$speed

86ms

2. Primary colors

$primary

$turquoise

$info

$blue

$success

$green

$warning

$yellow

$danger

$red

$light

$white-ter

$dark

$grey-darker

3. Generated variables

Invert colors

$primary-invert

findColorInvert($primary)

$info-invert

findColorInvert($info)

$success-invert

findColorInvert($success)

$warning-invert

findColorInvert($warning)

$danger-invert

findColorInvert($danger)

$light-invert

$dark

$dark-invert

$light

General colors

$body-background

$grey-lighter

$background

$grey-lighter

$border

$grey-light

$border-hover

$grey

Text colors

$text

$grey-dark

$text-invert

findColorInvert($text)

$text-light

$grey

$text-strong

$grey-darker

Code colors

$code

$red

$code-background

$background

$pre

$text

$pre-background

$background

Link colors

$link

$primary

$link-invert

$primary-invert

$link-visited

$purple

$link-hover

$grey-darker

$link-hover-border

$grey-darker

$link-focus

$grey-darker

$link-focus-border

$primary

$link-active

$grey-darker

$link-active-border

$grey-dark

Typography

$family-primary

$family-sans-serif

$family-code

$family-monospace

$size-small

$size-7

$size-normal

$size-6

$size-medium

$size-5

$size-large

$size-4

4. Lists and maps

$colors

(
  white: ($white, $black),
  black: ($black, $white),
  light: ($light, $light-invert),
  dark: ($dark, $dark-invert),
  primary: ($primary, $primary-invert),
  info: ($info, $info-invert),
  success: ($success, $success-invert),
  warning: ($warning, $warning-invert),
  danger: ($danger, $danger-invert)
)

$sizes

$size-1 $size-2 $size-3 $size-4 $size-5 $size-6

Variables

Easily customize Bulma to match your design