Bulma: Free, open source, and modern CSS framework based on Flexbox

The `.block`, probably Bulma’s most important feature

Sat, 23 Jan 2021 00:00:00 +0000

The Bulma block is a simple element but with a very powerful feature: it provides 1.5rem margin at the bottom, if it’s not the last child.

It exists as its own .block CSS class, but its properties are also used on many other Bulma components.

For example, if you were to combine a notification, and a pagination, they would be automatically spaced evenly:

Newsletter

451 new subscribers this month.

Name	Email	Actions
Alex	alex.smith@example.com	Edit · Delete
Sam	sam.rogers@example.com	Edit · Delete
Luke	hello.luke@example.com	Edit · Delete
Eli	eli.larry@example.com	Edit · Delete
Dan	dan.danny@example.com	Edit · Delete

For comparison, if there was no spacing, here’s what they would look like:

Newsletter

451 new subscribers this month.

Name	Email	Actions
Alex	alex.smith@example.com	Edit · Delete
Sam	sam.rogers@example.com	Edit · Delete
Luke	hello.luke@example.com	Edit · Delete
Eli	eli.larry@example.com	Edit · Delete
Dan	dan.danny@example.com	Edit · Delete

This block element has always existed; only recently has there been a dedicated documentation page.

New feature: `.icon-text`

Tue, 12 Jan 2021 00:00:00 +0000

Bulma’s .icon element has been around since its inception. It acts as a simple container for any icon font. And thanks to its fixed square dimensions, it provides the icon font time to load while preserving the space fo it.

From version 0.9.2, a new .icon-text element will be available. It allows you to easily combine an .icon element with text. The purpose of this new feature is to preserve the correct alignment of both parts.

Home

You can combine several icons in sequence:

Paris Budapest Bucharest Istanbul

See the full .icon-text documentation.

Light and Dark colors, better look, larger form controls, panel colors, and more

Tue, 15 Oct 2019 00:00:00 +0000

The new version Bulma 0.8.0 is out! 😃 It comes with several bug fixes and a lot of nice new features:

Light/Dark colors
Better visual look
Panel colors
Larger form controls
4-value color map
Scheme variables for “Dark mode”

Light/Dark colors #

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

findLightColor() which finds the light version of a color
findDarkColor() which finds the dark version of a color

The light colors are used by the button element:

The light and dark colors are used by the message component, which generates much prettier colored versions. See the difference between before (left) and after (right):

Better visual look #

Some of the Bulma colors have been updated:

Color	Before	After
`$green`
`$cyan`
`$red`

The shadows of the box and card have been improved:

Panel colors #

The panel component is now available in all colors:

Larger form controls #

Form 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

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 for "Dark mode" #

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 occurrences 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.

The new 0.8.0 version should be fully compatible with any Bulma setup. Feel free to post an issue if you encounter any problem upgrading.

Automatic variables documentation

Wed, 20 Jun 2018 00:00:00 +0000

Bulma is highly customizable because there are 415 Sass variables across 28 files.

More and more CSS values are transformed into Sass variables for easy customization. And each new Bulma feature is required to come with its own set of variables.

While providing these variables is necessary, it’s only useful if developers are aware they exist! Keeping in sync the documentation and the source files used to be a manual process. It is now automatic, thanks to a script that parses the source files and outputs the numerous Sass variables as JSON data.

As an added bonus, each variable row in the docs comes with its type and its computed value (if applicable).

Migrating to v0.7.0

Sat, 14 Apr 2018 00:00:00 +0000

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 #

New variables #

Removed variables #

File	Removed	Replaced with

Website redesign: clearer layout, easier navigation, better content, and much more!

Fri, 13 Apr 2018 00:00:00 +0000

The Bulma website has been widely redesigned! There’s been a lot of work, to say the least:

Just see for yourself!

Before

After

The navbar has been updated with a lighter markup and cleaner design:

This doesn’t affect the current navbars. There’s actually a new modifier called is-spaced that was created for this new navbar. Documentation coming soon!

Customize example #

On the homepage, there’s a new customization section with a live example:

A breadcrumb is now visible at the top of each page, to easily navigate up and down the hierarchy.

This has led to the creation of new intermediate pages:

Links #

These intermediate pages have new link boxes that help dive into each sub-category:

Previous/Next #

Next to the breadcrumb, you can easily navigate to the sibling pages with the previous and next links:

These links are also available at the bottom:

Categories #

There’s a new sidebar including a navigation menu with all the categories and sub-categories:

Scroll spy #

On some pages below the categories, you’ll find a new menu called “On this page” which is actually a scroll spy:

The footer has been redesigned as well. Among other things, there’s a sitemap available:

Code #

The Bulma website is built with Jekyll. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well.

This will help further updates to be easier.

Bulma supports Font Awesome 5

Thu, 18 Jan 2018 00:00:00 +0000

Bulma is icon library agnostic: this means that you can use any icon font library (like Font Awesome 4 or 5, Material Design Icons, Ionicons…) with Bulma’s icon class.

As a result, Bulma already supports Font Awesome 5! 😃

Since the icon element is simply a container for any icon font *allowing the layout to reserve a spot for the icon while it loads), it supports any size of Font Awesome 4 and 5.

For the sake of being in sync with Bulma users, I’ve recently updated the website to actually use Font Awesome 5! The process of migrating from Font Awesome 4 to 5 is straightforward. You simply need to:

include Font Awesome 5 instead, using the script tag
replace fa classes with their fas and fab equivalents

That’s it!

Check out the icon documentation.

Bulma is on Patreon!

Tue, 14 Nov 2017 00:00:00 +0000

Bulma has now its own Patreon page:

This will allow people to easily support Bulma, and ensure its future development.

New feature: fixed navbar

Wed, 01 Nov 2017 00:00:00 +0000

You can now fix a navbar to the top or the bottom:

Check it out!

As a added bonus, the bottom navbar required a new dropup feature which has also been implemented!

New feature: list of buttons

Sun, 22 Oct 2017 00:00:00 +0000

Similarly to the list of tags launched a few months ago, the button has its own list of buttons:

Although you could already group buttons by using from groups, this new buttons class makes everything easier.

Bulma: Free, open source, and modern CSS framework based on Flexbox

The `.block`, probably Bulma’s most important feature

New feature: `.icon-text`

Light and Dark colors, better look, larger form controls, panel colors, and more

Light/Dark colors #

Better visual look #

Panel colors #

Larger form controls #

4-value color map #

Scheme variables for "Dark mode" #

Automatic variables documentation

Migrating to v0.7.0

Updated default values #

New variables #

Removed variables #

Website redesign: clearer layout, easier navigation, better content, and much more!

Navbar #

Customize example #

Links #

Previous/Next #

Categories #

Scroll spy #

Footer #

Code #

Bulma supports Font Awesome 5

Bulma is on Patreon!

New feature: fixed navbar

New feature: list of buttons

Bulma: Free, open source, and modern CSS framework based on Flexbox

The `.block`, probably Bulma’s most important feature

New feature: `.icon-text`

Light and Dark colors, better look, larger form controls, panel colors, and more

Light/Dark colors #

Better visual look #

Panel colors #

Larger form controls #

4-value color map #

Scheme variables for "Dark mode" #

Automatic variables documentation

Migrating to v0.7.0

Updated default values #

New variables #

Removed variables #

Website redesign: clearer layout, easier navigation, better content, and much more!

Navbar #

Customize example #

Breadcrumb #

Links #

Previous/Next #

Categories #

Scroll spy #

Footer #

Code #

Bulma supports Font Awesome 5

Bulma is on Patreon!

New feature: fixed navbar

New feature: list of buttons