bulma-rails

Bulma Sass for Rails

Bulma is a modern CSS framework based on Flexbox that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. It provides CSS classes to help you style your HTML code.

Installation

From v 1.0.0 Bulma is a full rewrite of using Dart Sass.

This gem integrates Bulma with the rails asset pipeline.

For a fresh Rails application

1. Add gem "bulma-rails", "~> 1.0.0" to your application's Gemfile
2. Run ./bin/bundle add dartsass-rails
3. Run ./bin/rails dartsass:install
4. Delete default entry point rm app/assets/stylesheets/application.css

For a Rails application that already uses Dart Sass

1. Add gem "bulma-rails", "~> 1.0.0" to your application's Gemfile
2. And then execute bundle

For a Rails application that uses sassc-rails or sass-rails

1. Delete sassc-rails or sass-rails gem from your application's Gemfile
2. Add gem "bulma-rails", "~> 1.0.0" to your application's Gemfile
3. Run ./bin/bundle add dartsass-rails
4. Run ./bin/rails dartsass:install

if you encountered with LoadError: cannot load such file -- sassc run rails tmp:clear and restarting the server.

Usage

1. Add @use "bulma"; to your application.scss to load all styles.
2. Run rails dartsass:build or ./bin/dev to generated CSS output

Modularity

Modularity in Bulma helps to import only what you need. As an example, Layout features like Bulma's columns can be loaded directly without requiring any additional files. Simply load the columns.scss file with the @use keyword into your application.scss:

@use "sass/grid/columns";

For more information about Modularity see Modularity in bulma

Mixins

For using mixins add the following line to your application.scss:

@use "sass/utilities/mixins";

For more information about Mixins see Bulma Sass Mixins

Customization

To overwrite Bulma’s Sass variables with your own value, write @use and the with keyword for example to your application.scss:

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Override global Sass variables from the /utilities folder
@use "sass/utilities" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px
);

// Load all styles
@use "bulma";

This allows you to override Bulma’s global variables from the utilities folder.

For more information about Customization see Customize with Modular Sass

Helpful references

Migrating to Bulma v1 and discover what changes, see Migrating to Bulma v1

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Added some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request