How to use Bulma with Rails 5

Using Bulma CSS framework in Rails is pretty easy.

Add bulma-rails to your Gemfile. If you want to use Bulma extensions, also add that gem.

# check rubygems to see what the latest version is
gem 'bulma-rails', '~> 0.7.4'

# optional
gem 'bulma-extensions-rails'

Install the gems.

$ bundle install

Then, after restarting the Rails server, import Bulma in your application.scss:

// import bulma and optionally the extensions
@import "bulma";
@import "bulma-extensions";

To override variables, check the Bulma docs. Each page there lists relevant variables at the bottom.

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto+Slab|Open+Sans');

// override the Bulma variables here
$subtitle-line-height: 1.5;
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$family-monospace: 'Source Code Pro', monospace;

// import bulma and optionally the extensions
@import "bulma";
@import "bulma-extensions";

// custom scss works here or in the relevant files

If it doesn’t work for you, leave a comment in the Code Self Study Forum.