Migrating to Bulma v1

How to migrate to Bulma v1

Bulma v1 is basically a full rewrite of the framework using Dart Sass, which is the primary implementation of Sass. While this affects a few development details, everything has been done to make the transition as easy as possible.

What remains the same #

All HTML snippets are the same. This means you don’t need to update your markup. This is important because it means, if you’re using Bulma straight “out of the box”, you don’t need to change anything.

You can just swap [email protected]/css/bulma.min.css with [email protected]/css/bulma.min.css and everything will work. Things will look slightly different, but they will still work.

What changes #

Dart Sass is used to build Bulma
- if you use the sass npm package, you’re already using Dart Sass
CSS Variables are used instead of literals: color: var(--bulma-primary); instead of color: hsl(171deg, 100%, 41%);, which means you can customize Bulma with CSS only (without using Sass)
Customization by setting your own value for Sass variables works differently. See how to customize Bulma with Sass.

What's new (i.e. did not exist before) #

The notion of Themes is introduced: a theme is a collection of CSS variables within a context, and is the best approach to customize Bulma
As a result, a Theme for Dark Mode is included
Color Palettes are created for each of the 7 primary colors
Skeleton loaders exist as standalone components but also as variants of other components
You can add a prefix to all your Bulma classes so that .button becomes .my-prefix-button
- a pre-built prefixed version exists as one of the alternative versions

Breaking Changes #

⛔️ Deprecated ✅ How to fix

⛔️ Deprecated	✅ How to fix
Tiles are deprecated `<!-- Before --> <div class="tile is-ancestor"> <div class="tile is-parent"> <article class="tile is-child box"> <p class="title">Hello World</p> <p class="subtitle">What is up?</p> </article> </div> <div class="tile is-parent"> <article class="tile is-child box"> <p class="title">Foo</p> <p class="subtitle">Bar</p> </article> </div> </div>`	Use the new and improved Smart Grid `<!-- After --> <div class="grid"> <div class="cell"> <article class="box"> <p class="title">Hello World</p> <p class="subtitle">What is up?</p> </article> </div> <div class="cell"> <article class="box"> <p class="title">Foo</p> <p class="subtitle">Bar</p> </article> </div> </div>`
`@import` is not recommended `// Before $purple: #8A4D76; $pink: #FA7C91; $brown: #757763; $beige-light: #D0D1CD; $beige-lighter: #EFF0EB; // Update Bulma's global variables $family-sans-serif: "Nunito", sans-serif; $grey-dark: $brown; $grey-light: $beige-light; $primary: $purple; $link: $pink; // Update some of Bulma's component variables $control-border-width: 2px; $input-background-color: $beige-lighter; $input-border-color: transparent; $input-shadow: none; // Import the rest of Bulma @import "../path/to/bulma";`	Use Dart Sass's new `@use` and `@forward` keywords // After $purple: #8a4d76; $pink: #fa7c91; $brown: #757763; $beige-light: #d0d1cd; $beige-lighter: #eff0eb; // Path to Bulma's sass folder @use "path/to/bulma/sass" with ( $family-primary: '"Nunito", sans-serif', $grey-dark: $brown, $grey-light: $beige-light, $primary: $purple, $link: $pink, $control-border-width: 2px, $input-h: color.hue($beige-lighter), $input-s: color.saturation($beige-lighter), $input-background-l: color.lightness($beige-lighter), $input-border-l: color.lightness($beige-lighter), $input-shadow: none );

Tiles are deprecated

<!-- Before -->
<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child box">
      <p class="title">Hello World</p>
      <p class="subtitle">What is up?</p>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child box">
      <p class="title">Foo</p>
      <p class="subtitle">Bar</p>
    </article>
  </div>
</div>

Use the new and improved Smart Grid

<!-- After -->
<div class="grid">
  <div class="cell">
    <article class="box">
      <p class="title">Hello World</p>
      <p class="subtitle">What is up?</p>
    </article>
  </div>
  <div class="cell">
    <article class="box">
      <p class="title">Foo</p>
      <p class="subtitle">Bar</p>
    </article>
  </div>
</div>

@import is not recommended

// Before
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-background-color: $beige-lighter;
$input-border-color: transparent;
$input-shadow: none;

// Import the rest of Bulma
@import "../path/to/bulma";

Use Dart Sass's new @use and @forward keywords

// After
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-h: color.hue($beige-lighter),
  $input-s: color.saturation($beige-lighter),
  $input-background-l: color.lightness($beige-lighter),
  $input-border-l: color.lightness($beige-lighter),
  $input-shadow: none
);

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor