Bulma v1 is a full rewrite of the framework using Dart Sass, which is the 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 bulma@0.9.4/css/bulma.min.css with bulma@1.0.0/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
sassnpm package, you're already using Dart Sass
- if you use the
- CSS Variables are used instead of literals:
color: var(--bulma-primary);instead ofcolor: 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
.buttonbecomes.my-prefix-button- a pre-built prefixed version exists as one of the alternative versions