Download

Sponsor

Route Planner and Route Optimizer

List of Bulma Sass variables


All Sass variables defined by Bulma

Initial variables #

Defined at utilities/initial-variables.scss.

Sass and CSS variables #

Sass Variable
Value
$black
hsl(221, 14%, 4%)
$black-bis
hsl(221, 14%, 9%)
$black-ter
hsl(221, 14%, 14%)
$grey-darker
hsl(221, 14%, 21%)
$grey-dark
hsl(221, 14%, 29%)
$grey
hsl(221, 14%, 48%)
$grey-light
hsl(221, 14%, 71%)
$grey-lighter
hsl(221, 14%, 86%)
$grey-lightest
hsl(221, 14%, 93%)
$white-ter
hsl(221, 14%, 96%)
$white-bis
hsl(221, 14%, 98%)
$white
hsl(221, 14%, 100%)
$orange
hsl(14, 100%, 53%)
$yellow
hsl(42, 100%, 53%)
$green
hsl(153, 53%, 53%)
$turquoise
hsl(171, 100%, 41%)
$cyan
hsl(198, 100%, 70%)
$blue
hsl(233, 100%, 63%)
$purple
hsl(271, 100%, 71%)
$red
hsl(348, 100%, 70%)
$family-sans-serif
"Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
  "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace
"Inconsolata", "Hack", "SF Mono", "Roboto Mono",
  "Source Code Pro", "Ubuntu Mono", monospace
$render-mode
optimizeLegibility
$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-medium
500
$weight-semibold
600
$weight-bold
700
$weight-extrabold
800
$block-spacing
1.5rem
$aspect-ratios
(
  (1, 1),
  (5, 4),
  (4, 3),
  (3, 2),
  (5, 3),
  (16, 9),
  (2, 1),
  (3, 1),
  (4, 5),
  (3, 4),
  (2, 3),
  (3, 5),
  (9, 16),
  (1, 2),
  (1, 3)
)
$gap
32px
$tablet
769px
$desktop
960px + 2 * $gap
$widescreen
1152px + 2 * $gap
$widescreen-enabled
true
$fullhd
1344px + 2 * $gap
$fullhd-enabled
true
$breakpoints
(
  "mobile": (
    "until": $tablet,
  ),
  "tablet": (
    "from": $tablet,
  ),
  "tablet-only": (
    "from": $tablet,
    "until": $desktop,
  ),
  "touch": (
    "from": $desktop,
  ),
  "desktop": (
    "from": $desktop,
  ),
  "desktop-only": (
    "from": $desktop,
    "until": $widescreen,
  ),
  "until-widescreen": (
    "until": $widescreen,
  ),
  "widescreen": (
    "from": $widescreen,
  ),
  "widescreen-only": (
    "from": $widescreen,
    "until": $fullhd,
  ),
  "until-fullhd": (
    "until": $fullhd,
  ),
  "fullhd": (
    "from": $fullhd,
  ),
)
$easing
ease-out
$radius-small
0.25rem
$radius
0.375rem
$radius-medium
0.5em
$radius-large
0.75rem
$radius-rounded
9999px
$speed
86ms
$variable-columns
true
$rtl
false
$class-prefix
""
$cssvars-prefix
"bulma-"
$helpers-prefix
"is-"
$helpers-has-prefix
"has-"

Derived variables #

Defined at utilities/derived-variables.scss.

Sass and CSS variables #

Sass Variable
Value
$scheme-main
iv.$white
$scheme-main-bis
iv.$white-bis
$scheme-main-ter
iv.$white-ter
$scheme-invert
iv.$black
$scheme-invert-bis
iv.$black-bis
$scheme-invert-ter
iv.$black-ter
$text
iv.$grey-dark
$text-invert
fn.bulmaFindColorInvert($text)
$text-weak
iv.$grey
$text-strong
iv.$grey-darker
$primary
iv.$turquoise
$info
iv.$cyan
$success
iv.$green
$warning
iv.$yellow
$danger
iv.$red
$light
iv.$white-ter
$dark
iv.$grey-darker
$link
iv.$blue
$background
iv.$white-ter
$border
iv.$grey-lighter
$border-weak
iv.$grey-lightest
$code
iv.$red
$code-background
$background
$pre
$text
$pre-background
$background
$family-primary
iv.$family-sans-serif
$family-secondary
iv.$family-sans-serif
$family-code
iv.$family-monospace
$size-small
iv.$size-7
$size-normal
iv.$size-6
$size-medium
iv.$size-5
$size-large
iv.$size-4
$shadow-color
iv.$black
$custom-colors
null
$custom-shades
null
$colors
fn.mergeColorMaps(
  (
    "white": (
      iv.$white,
      iv.$black,
    ),
    "black": (
      iv.$black,
      iv.$white,
    ),
    "light": (
      $light,
      $dark,
    ),
    "dark": (
      $dark,
      $light,
    ),
    "text": $text,
    "primary": $primary,
    "link": $link,
    "info": $info,
    "success": $success,
    "warning": $warning,
    "danger": $danger,
  ),
  $custom-colors
)
$shades
fn.mergeColorMaps(
  (
    "black-bis": iv.$black-bis,
    "black-ter": iv.$black-ter,
    "grey-darker": iv.$grey-darker,
    "grey-dark": iv.$grey-dark,
    "grey": iv.$grey,
    "grey-light": iv.$grey-light,
    "grey-lighter": iv.$grey-lighter,
    "white-ter": iv.$white-ter,
    "white-bis": iv.$white-bis,
  ),
  $custom-shades
)
$sizes
iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6
  iv.$size-7

Component variables #

For each Bulma component, the list of Sass variables is listed at the bottom of its page.

How to support Bulma

#native_company# #native_desc#
#native_cta#