Bulma Customizer

SASS Files

Generate what you need

Bulma consists of 45 .sass files that you can import individually. You can learn more about Bulma modularity in the documentation.

Simply select the .sass files you need and they will be compiled into a customized Bulma build.

Variables

Bulma offers 506 variables that you can edit to match your design.

Selectors with have customizable variables.

Click the icon to reveal the variables’ editing fields, edit as needed or leave empty for default.

Toggle all Utilities (required)
- initial-variables.sass
  - $black
    Defaults to hsl(0, 0%, 4%)
  - $black-bis
    Defaults to hsl(0, 0%, 7%)
  - $black-ter
    Defaults to hsl(0, 0%, 14%)
  - $grey-darker
    Defaults to hsl(0, 0%, 21%)
  - $grey-dark
    Defaults to hsl(0, 0%, 29%)
  - $grey
    Defaults to hsl(0, 0%, 48%)
  - $grey-light
    Defaults to hsl(0, 0%, 71%)
  - $grey-lighter
    Defaults to hsl(0, 0%, 86%)
  - $grey-lightest
    Defaults to hsl(0, 0%, 93%)
  - $white-ter
    Defaults to hsl(0, 0%, 96%)
  - $white-bis
    Defaults to hsl(0, 0%, 98%)
  - $white
    Defaults to hsl(0, 0%, 100%)
  - $orange
    Defaults to hsl(14, 100%, 53%)
  - $yellow
    Defaults to hsl(48, 100%, 67%)
  - $green
    Defaults to hsl(141, 53%, 53%)
  - $turquoise
    Defaults to hsl(171, 100%, 41%)
  - $cyan
    Defaults to hsl(204, 71%, 53%)
  - $blue
    Defaults to hsl(217, 71%, 53%)
  - $purple
    Defaults to hsl(271, 100%, 71%)
  - $red
    Defaults to hsl(348, 86%, 61%)
  - $family-sans-serif
    Defaults to BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
  - $family-monospace
    Defaults to monospace
  - $render-mode
    Defaults to optimizeLegibility
  - $size-1
    Defaults to 3rem
  - $size-2
    Defaults to 2.5rem
  - $size-3
    Defaults to 2rem
  - $size-4
    Defaults to 1.5rem
  - $size-5
    Defaults to 1.25rem
  - $size-6
    Defaults to 1rem
  - $size-7
    Defaults to 0.75rem
  - $weight-light
    Defaults to 300
  - $weight-normal
    Defaults to 400
  - $weight-medium
    Defaults to 500
  - $weight-semibold
    Defaults to 600
  - $weight-bold
    Defaults to 700
  - $block-spacing
    Defaults to 1.5rem
  - $gap
    Defaults to 32px
  - $tablet
    Defaults to 769px
  - $desktop
    Defaults to 960px + (2 * $gap)
  - $widescreen
    Defaults to 1152px + (2 * $gap)
  - $widescreen-enabled
    Defaults to true
  - $fullhd
    Defaults to 1344px + (2 * $gap)
  - $fullhd-enabled
    Defaults to true
  - $easing
    Defaults to ease-out
  - $radius-small
    Defaults to 2px
  - $radius
    Defaults to 4px
  - $radius-large
    Defaults to 6px
  - $radius-rounded
    Defaults to 290486px
  - $speed
    Defaults to 86ms
  - $variable-columns
    Defaults to true
- functions.sass
- derived-variables.sass
  - $primary
    Defaults to $turquoise
  - $info
    Defaults to $cyan
  - $success
    Defaults to $green
  - $warning
    Defaults to $yellow
  - $danger
    Defaults to $red
  - $light
    Defaults to $white-ter
  - $dark
    Defaults to $grey-darker
  - $orange-invert
    Defaults to findColorInvert($orange)
  - $yellow-invert
    Defaults to findColorInvert($yellow)
  - $green-invert
    Defaults to findColorInvert($green)
  - $turquoise-invert
    Defaults to findColorInvert($turquoise)
  - $cyan-invert
    Defaults to findColorInvert($cyan)
  - $blue-invert
    Defaults to findColorInvert($blue)
  - $purple-invert
    Defaults to findColorInvert($purple)
  - $red-invert
    Defaults to findColorInvert($red)
  - $primary-invert
    Defaults to findColorInvert($primary)
  - $primary-light
    Defaults to findLightColor($primary)
  - $primary-dark
    Defaults to findDarkColor($primary)
  - $info-invert
    Defaults to findColorInvert($info)
  - $info-light
    Defaults to findLightColor($info)
  - $info-dark
    Defaults to findDarkColor($info)
  - $success-invert
    Defaults to findColorInvert($success)
  - $success-light
    Defaults to findLightColor($success)
  - $success-dark
    Defaults to findDarkColor($success)
  - $warning-invert
    Defaults to findColorInvert($warning)
  - $warning-light
    Defaults to findLightColor($warning)
  - $warning-dark
    Defaults to findDarkColor($warning)
  - $danger-invert
    Defaults to findColorInvert($danger)
  - $danger-light
    Defaults to findLightColor($danger)
  - $danger-dark
    Defaults to findDarkColor($danger)
  - $light-invert
    Defaults to findColorInvert($light)
  - $dark-invert
    Defaults to findColorInvert($dark)
  - $scheme-main
    Defaults to $white
  - $scheme-main-bis
    Defaults to $white-bis
  - $scheme-main-ter
    Defaults to $white-ter
  - $scheme-invert
    Defaults to $black
  - $scheme-invert-bis
    Defaults to $black-bis
  - $scheme-invert-ter
    Defaults to $black-ter
  - $background
    Defaults to $white-ter
  - $border
    Defaults to $grey-lighter
  - $border-hover
    Defaults to $grey-light
  - $border-light
    Defaults to $grey-lightest
  - $border-light-hover
    Defaults to $grey-light
  - $text
    Defaults to $grey-dark
  - $text-invert
    Defaults to findColorInvert($text)
  - $text-light
    Defaults to $grey
  - $text-strong
    Defaults to $grey-darker
  - $code
    Defaults to $red
  - $code-background
    Defaults to $background
  - $pre
    Defaults to $text
  - $pre-background
    Defaults to $background
  - $link
    Defaults to $blue
  - $link-invert
    Defaults to findColorInvert($link)
  - $link-light
    Defaults to findLightColor($link)
  - $link-dark
    Defaults to findDarkColor($link)
  - $link-visited
    Defaults to $purple
  - $link-hover
    Defaults to $grey-darker
  - $link-hover-border
    Defaults to $grey-light
  - $link-focus
    Defaults to $grey-darker
  - $link-focus-border
    Defaults to $blue
  - $link-active
    Defaults to $grey-darker
  - $link-active-border
    Defaults to $grey-dark
  - $family-primary
    Defaults to $family-sans-serif
  - $family-secondary
    Defaults to $family-sans-serif
  - $family-code
    Defaults to $family-monospace
  - $size-small
    Defaults to $size-7
  - $size-normal
    Defaults to $size-6
  - $size-medium
    Defaults to $size-5
  - $size-large
    Defaults to $size-4
  - $custom-colors
    Defaults to null
  - $custom-shades
    Defaults to null
  - $colors
    Defaults to mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)
  - $shades
    Defaults to mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades)
  - $sizes
    Defaults to $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7
- animations.sass
- mixins.sass
- controls.sass
  - $control-radius
    Defaults to $radius
  - $control-radius-small
    Defaults to $radius-small
  - $control-border-width
    Defaults to 1px
  - $control-height
    Defaults to 2.5em
  - $control-line-height
    Defaults to 1.5
  - $control-padding-vertical
    Defaults to calc(0.5em - #{$control-border-width})
  - $control-padding-horizontal
    Defaults to calc(0.75em - #{$control-border-width})

Toggle all Base
- minireset.sass
- generic.sass
  - $body-background-color
    Defaults to $scheme-main
  - $body-size
    Defaults to 16px
  - $body-min-width
    Defaults to 300px
  - $body-rendering
    Defaults to optimizeLegibility
  - $body-family
    Defaults to $family-primary
  - $body-overflow-x
    Defaults to hidden
  - $body-overflow-y
    Defaults to scroll
  - $body-color
    Defaults to $text
  - $body-font-size
    Defaults to 1em
  - $body-weight
    Defaults to $weight-normal
  - $body-line-height
    Defaults to 1.5
  - $code-family
    Defaults to $family-code
  - $code-padding
    Defaults to 0.25em 0.5em 0.25em
  - $code-weight
    Defaults to normal
  - $code-size
    Defaults to 0.875em
  - $small-font-size
    Defaults to 0.875em
  - $hr-background-color
    Defaults to $background
  - $hr-height
    Defaults to 2px
  - $hr-margin
    Defaults to 1.5rem 0
  - $strong-color
    Defaults to $text-strong
  - $strong-weight
    Defaults to $weight-bold
  - $pre-font-size
    Defaults to 0.875em
  - $pre-padding
    Defaults to 1.25rem 1.5rem
  - $pre-code-font-size
    Defaults to 1em
- helpers.sass

Toggle all Form
- shared.sass
  - $input-color
    Defaults to $text-strong
  - $input-background-color
    Defaults to $scheme-main
  - $input-border-color
    Defaults to $border
  - $input-height
    Defaults to $control-height
  - $input-shadow
    Defaults to inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)
  - $input-placeholder-color
    Defaults to bulmaRgba($input-color, 0.3)
  - $input-hover-color
    Defaults to $text-strong
  - $input-hover-border-color
    Defaults to $border-hover
  - $input-focus-color
    Defaults to $text-strong
  - $input-focus-border-color
    Defaults to $link
  - $input-focus-box-shadow-size
    Defaults to 0 0 0 0.125em
  - $input-focus-box-shadow-color
    Defaults to bulmaRgba($link, 0.25)
  - $input-disabled-color
    Defaults to $text-light
  - $input-disabled-background-color
    Defaults to $background
  - $input-disabled-border-color
    Defaults to $background
  - $input-disabled-placeholder-color
    Defaults to bulmaRgba($input-disabled-color, 0.3)
  - $input-arrow
    Defaults to $link
  - $input-icon-color
    Defaults to $border
  - $input-icon-active-color
    Defaults to $text
  - $input-radius
    Defaults to $radius
- input-textarea.sass
  - $textarea-padding
    Defaults to $control-padding-horizontal
  - $textarea-max-height
    Defaults to 40em
  - $textarea-min-height
    Defaults to 8em
- checkbox-radio.sass
- select.sass
- file.sass
  - $file-border-color
    Defaults to $border
  - $file-radius
    Defaults to $radius
  - $file-cta-background-color
    Defaults to $scheme-main-ter
  - $file-cta-color
    Defaults to $text
  - $file-cta-hover-color
    Defaults to $text-strong
  - $file-cta-active-color
    Defaults to $text-strong
  - $file-name-border-color
    Defaults to $border
  - $file-name-border-style
    Defaults to solid
  - $file-name-border-width
    Defaults to 1px 1px 1px 0
  - $file-name-max-width
    Defaults to 16em
- tools.sass
  - $label-color
    Defaults to $text-strong
  - $label-weight
    Defaults to $weight-bold
  - $help-size
    Defaults to $size-small

Toggle all Layout
- hero.sass
  - $hero-body-padding
    Defaults to 3rem 1.5rem
  - $hero-body-padding-small
    Defaults to 1.5rem
  - $hero-body-padding-medium
    Defaults to 9rem 1.5rem
  - $hero-body-padding-large
    Defaults to 18rem 1.5rem
- section.sass
  - $section-padding
    Defaults to 3rem 1.5rem
  - $section-padding-medium
    Defaults to 9rem 1.5rem
  - $section-padding-large
    Defaults to 18rem 1.5rem
- footer.sass
  - $footer-background-color
    Defaults to $scheme-main-bis
  - $footer-color
    Defaults to false
  - $footer-padding
    Defaults to 3rem 1.5rem 6rem

Compile and Download

Your own custom Bulma build

Super! Your custom build is now ready to be compiled and downloaded.

Simply select how you want the output CSS file to be formated, choose other options as needed, and click the button to initialize the process.

Output Style

Select your preference for how the output CSS code is styled. More details are available in SASS Docs.

File Name

Defaults to bulma.css. No need to add file extension, it will be appended with .css.

Append time to file name

If selected, file name would become something like bulma_1590377278.css

Fetch latest version

This will conduct a git fetch which might take a bit longer to process. The latest fetched commit on our server is eafa357 - Wed May 13 19:57:42 2020 +0100.

Dowload Bundle

If selected, the download would be a bundle zip package that includes the compiled css file along with sass source files, the config file, and an html starter template.

Include Sourcemap

This will include the SASS sourcemap file in the bundled package; the soucemap file will be named something like bulma.css.map depending on your selections. This option could take a bit longer to process.