You are viewing the deprecated 0.4.4 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Variables

## 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`

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!