Migrating to v0.7.0

14 Apr 2018

A new major Bulma update is out: v0.7.0!

While this update is mainly focused on a massive website redesign, it also includes a few bug fixes, some new features, and some variable changes.

These variable changes are documented here, so you can edit or revert them if needed.

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
#native_company# #native_desc#

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi


Features, releases, showcase… stay in the loop!