Bulma Changelog

0.9.2

Breaking change

To fix duplicate imports, all Sass placeholders have moved from the utilities/mixins file to its own utilities/extends file.

The Sass placeholders are:

If you were importing them directly from utilities/mixins, you'll need to import utilities/extends instead.
If you were importing utilities/_all or even bulma.sass directly, no change is required.

New features

Bug fixes

Improvements

0.9.1

New features

Improvements

0.9.0

Deprecation warning

The base/helpers.sass file is deprecated. It has moved into its own /helpers folder. If you were importing base/helpers.sass or base/_all.sass, please import sass/helpers/_all.sass now. If you were simply importing the whole of Bulma with @import "~/bulma/bulma.sass" or similar, you won't have to change anything, and everything will work as before.

The list component is also deprecated: the components/list.sass file has been deleted. It was never officialy supported as it was too similar to panel component. Use that one instead.

RTL support

Bulma now has RTL support.

By setting the Sass flag $rtl to true, you can create an RTL version of Bulma, thanks to 4 new Sass mixins:

The Bulma package now also comes with a bulma-rtl.css and bulma-rtl.min.css file to be used straight away.

Spacing helpers

Bulma now has spacing helpers: bulma.io/documentation/helpers/spacing-helpers/

Bulma provides margin m* and padding p* helpers in all directions:

You need to combine a margin/padding prefix with a direciton suffix. For example:

Each of these property-direction combinations needs to be appended with one of 6 value suffixes

This release also includes the following helpers:

Improvements

Bug fixes

0.8.2

Bug fixes

0.8.1

Improvements

Bug fixes

0.8.0

Big update

Larger form controls

Controls and buttons are now 2.5em high. You can revert this resizing by setting these previous values:

$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})
$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em

Light and dark colors

Each main color ("primary", "info", "success", "warning", "danger") now has a *-light and *-dark version. They are calculated using 2 new color functions:

The light colors are used by the button element, while the light and dark colors are used by the message component.

Panel colors

The panel component is now available in all the different colors.

4-value color map

The $colors Sass map now accepts, for each of its values, a map of up to 4 values. For example: the key "info" now has the ($info, $info-invert, $info-light, $info-dark) map.

If you provide a $custom-colors map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:

$custom-colors: (
  'lime': (
    lime,
  ),
  'tomato': (
    tomato,
    white,
  ),
  'orange': (
    $orange,
    $orange-invert,
    $orange-light,
  ),
  'lavender': (
    $lavender,
    $lavender-invert,
    $lavender-light,
    $lavender-dark,
  ),
);

This is processed by the updated mergeColorMaps() Sass function.

Scheme variables

There are 6 new $scheme derived variables: $scheme-main $scheme-main-bis $scheme-main-ter $scheme-invert $scheme-invert-bis $scheme-invert-ter They replace the $white and $black occurences in the codebase. This makes it easy to create a โ€œDark modeโ€ simply by swapping the values:

$scheme-main: $black
$scheme-invert: $white
// etc.

That is also why most of the codebase now references derived variables ($text, $background, $border etc.) instead of initial ones ($grey, $grey-lighter, $grey-darker etc.): updating the derived variables will affect all elements and components directly.

Initial variables

Derived variables

Other variables

Bug fixes

New features

0.7.5

Deprecation warning

The form.sass file is deprecated. It has moved into its own /form folder. If you were importing form.sass, please import sass/form/_all.sass now. If you were simply importing the whole of Bulma with @import "~/bulma/bulma.sass" or similar, you won't have to change anything, and everything will work as before.

New features

Support for overriding the font-family

You can now specify a different font-family for the .title, .subtitle and .button by using the variables $title-family, $subtitle-family and $button-family respectively.

Simply set a value when importing Bulma:

$title-family: 'Georgia', serif;

Improvements

Bug fixes

Fix #1979 -> Correct loading spinner color when a button is:

New variables

Initial variables

Base

Components

Elements

Grid

0.7.3

New features

Improvements

Bug fixes

Deprecation

0.7.2

New features

Improvements

Bug fixes

0.7.1

Improvements

Bug fixes

0.7.0

New features

Improvements

Bug fixes

Variable changes

Updated default values

File sass/utilities/initial-variables.sass
Variable From To
$gap 32px 64px
$radius 3px 4px
$radius-large 5px 6px
File sass/base/generic.sass
Variable From To
$hr-background-color $border $background
$hr-height 1px 2px
File sass/elements/content.sass
Variable From To
$content-heading-weight $weight-normal $weight-semibold
File sass/components/message.sass
Variable From To
$message-header-padding 0.5em 0.75em 0.75em 1em
$message-body-padding 1em 1.25em 1.25em 1.5em
File sass/components/navbar.sass
Variable From To
$navbar-item-hover-background-color $background $white-bis
$navbar-dropdown-border-top 1px solid $border 2px solid $border
$navbar-divider-background-color $border $background
File sass/layout/footer.sass
Variable From To
$footer-background-color $background $white-bis

New variables

File sass/components/breadcrumb.sass
Name Value
$breadcrumb-item-padding-vertical 0
$breadcrumb-item-padding-horizontal 0.75em
File sass/components/message.sass
Name Value
$message-body-border-color $border
$message-body-border-width 0 0 0 4px
$message-header-weight $weight-bold
$message-header-body-border-width 0
File sass/components/navbar.sass
Name Value
$navbar-box-shadow-size 0 2px 0 0
$navbar-box-shadow-color $background
$navbar-padding-vertical 1rem
$navbar-padding-horizontal 2rem
$navbar-z 30
File sass/elements/title.sass
Name Value
$title-line-height 1.125
$subtitle-line-height 1.25
$subtitle-negative-margin -1.25rem

Removed variables

File Removed Replaced with
sass/components/message.sass $message-body-border $message-body-border-color
$message-body-border-width

0.6.2

New features

Improvements

Bug fixes

0.6.1

New features

Improvements

Bug fixes

0.6.0

Breaking changes

New features

Improvements

The $link color is used instead of $primary in the following components:

Variable Old value New value
$dropdown-item-active-color $primary-invert $link-invert
$dropdown-item-active-background-color $primary $link
$navbar-tab-hover-border-bottom-color $primary $link
$navbar-tab-active-color $primary $link
$navbar-tab-active-border-bottom-color $primary $link
$navbar-dropdown-item-active-color $primary $link
$tabs-link-active-border-bottom-color $primary $link
$tabs-link-active-color $primary $link
$tabs-toggle-link-active-background-color $primary $link
$tabs-toggle-link-active-border-color $primary $link
$tabs-toggle-link-active-color $primary-invert $link-invert

Issues closed

0.5.3

New features

Issues closed

0.5.2

New features

Issues closed

0.5.1

New features

Issues closed

0.5.0

New features

Variable name changes (mostly appending -color):

FromTo
$card$card-color
$card-background$card-background-color
$card-header$card-header-color
$dropdown-item$dropdown-item-color
$dropdown-content-background$dropdown-content-background-color
$dropdown-item-hover-background$dropdown-item-hover-background-color
$dropdown-item-hover$dropdown-item-hover-color
$dropdown-item-active-background$dropdown-item-active-background-color
$dropdown-item-active$dropdown-item-active-color
$dropdown-divider-background$dropdown-divider-background-color
$menu-item$menu-item-color
$menu-item-hover$menu-item-hover-color
$menu-item-hover-background$menu-item-hover-background-color
$menu-item-active$menu-item-active-color
$menu-item-active-background$menu-item-active-background-color
$menu-label$menu-label-color
$message-background$message-background-color
$message-header-background$message-header-background-color
$navbar-background$navbar-background-color
$navbar-item$navbar-item-color
$navbar-item-hover$navbar-item-hover-color
$navbar-item-hover-background$navbar-item-hover-background-color
$navbar-item-active$navbar-item-active-color
$navbar-item-active-background$navbar-item-active-background-color
$navbar-tab-hover-background$navbar-tab-hover-background-color
$navbar-tab-hover-border-bottom$navbar-tab-hover-border-bottom-color
$navbar-tab-active$navbar-tab-active-color
$navbar-tab-active-background$navbar-tab-active-background-color
$navbar-divider-background$navbar-divider-background-color
$navbar-dropdown-item-hover$navbar-dropdown-item-hover-color
$navbar-dropdown-item-hover-background$navbar-dropdown-item-hover-background-color
$navbar-dropdown-item-active$navbar-dropdown-item-active-color
$navbar-dropdown-item-active-background$navbar-dropdown-item-active-background-color
$pagination$pagination-color
$pagination-hover$pagination-hover-color
$pagination-hover-border$pagination-hover-border-color
$pagination-focus$pagination-focus-color
$pagination-focus-border$pagination-focus-border-color
$pagination-active$pagination-active-color
$pagination-active-border$pagination-active-border-color
$pagination-disabled$pagination-disabled-color
$pagination-disabled-background$pagination-disabled-background-color
$pagination-disabled-border$pagination-disabled-border-color
$pagination-current$pagination-current-color
$pagination-current-background$pagination-current-background-color
$pagination-current-border$pagination-current-border-color
$pagination-ellipsis$pagination-ellipsis-color
$box$box-color
$box-background$box-background-color
$button$button-color
$button-background$button-background-color
$button-border$button-border-color
$button-link$button-link-color
$button-link-hover-background$button-link-hover-background-color
$button-link-hover$button-link-hover-color
$button-disabled-background$button-disabled-background-color
$button-disabled-border$button-disabled-border-color
$button-static$button-static-color
$button-static-background$button-static-background-color
$button-static-border$button-static-border-color
$input$input-color
$input-background$input-background-color
$input-border$input-border-color
$input-hover$input-hover-color
$input-hover-border$input-hover-border-color
$input-focus$input-focus-color
$input-focus-border$input-focus-border-color
$input-disabled$input-disabled-color
$input-disabled-background$input-disabled-background-color
$input-disabled-border$input-disabled-border-color
$input-icon$input-icon-color
$input-icon-active$input-icon-active-color
$title$title-color
$subtitle$subtitle-color
$card-footer-border$card-footer-border-top
$menu-list-border$menu-list-border-left
$navbar-tab-hover-border$navbar-tab-hover-border-bottom-color
$navbar-tab-active-border$navbar-tab-active-border-bottom
$table-border$table-cell-border
$table-row-even-background$table-striped-row-even-background-color
$table-row-even-hover-background$table-striped-row-even-hover-background-color

Improved documentation

Issues closed

0.4.4

New features

Issues closed

0.4.3

New features

Issues closed

0.4.2

0.4.1

0.4.0

0.3.2

0.3.1

0.3.0

0.2.2

0.2.1

0.2.0

0.1.1

0.1.0

0.0.28

0.0.27

0.0.26

0.0.25

0.0.24

Added

Removed

Updated

Removed

0.0.23

BREAKING

Added

0.0.22

Fixed

0.0.21

Added

0.0.20

Added

0.0.19

NEW!!!

BREAKING

Added

Changed

0.0.18

BREAKING

Added

Fixed

Removed

Updated

0.0.17

Added

Updated

Removed