Bulma CSS is a Drupal 8 base theme based on Bulma. Bulma is a modern CSS framework based on the Flexbox CSS3 layout mode.

Most Bulma features are well integrated within Drupal.

While Bulma CSS is designed as a base theme, development also focuses on making the theme look good "out of the box", so it may be used directly on a site without subtheming.

Features

  • Components and plugins from Bulma.
  • Sass and Font Awesome built in.
  • Drush integration: drush bulma "My Subtheme".

What is Bulma

Bulma is a modern CSS framework based on Flexbox. As such, the sole output is a single CSS file: bulma.css

You can either use that file "out of the box", or customize Sass source files.

There is no JavaScript included. (The Drupal 8 theme includes only a few lines to open/close mobile menus)
Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

For more information on Bulma, please their website bulma.io

Browser support

Bulma uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions. Bulma is compatible with recent versions of:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari
  • Internet Explorer (10+) is only partially supported.

Installation

Install theme as usual. Create your own subtheme with drush command drush bulma "my theme". Customize Sass inside your own subtheme, not in the base theme.

Configuration

Check the theme settings page to activate additional features (on installation of the base theme, some are already enabled).

One configuration option is the ability to select from the Bulmaswatch set of skins or themes.

Contributed themes based on Bulma

Supporting organizations: 

Project information

Downloads