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.
From v 1.0.0 Bulma is a full rewrite of using Dart Sass.
This gem integrates Bulma with the rails asset pipeline.
- Add
gem "bulma-rails", "~> 1.0.0"
to your application's Gemfile - Run
./bin/bundle add dartsass-rails
- Run
./bin/rails dartsass:install
- Delete default entry point
rm app/assets/stylesheets/application.css
- Add
gem "bulma-rails", "~> 1.0.0"
to your application's Gemfile - And then execute
bundle
- Delete
sassc-rails
orsass-rails
gem from your application's Gemfile - Add
gem "bulma-rails", "~> 1.0.0"
to your application's Gemfile - Run
./bin/bundle add dartsass-rails
- Run
./bin/rails dartsass:install
if you encountered with LoadError: cannot load such file -- sassc
run rails tmp:clear
and restarting the server.
- Add
@use "bulma";
to your application.scss to load all styles. - Run
rails dartsass:build
or./bin/dev
to generated CSS output
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
For using mixins add the following line to your application.scss
:
@use "sass/utilities/mixins";
For more information about Mixins see Bulma Sass Mixins
Migrating to Bulma v1 and discover what changes, see Migrating to Bulma v1
For information about customizing Bulma, see: Bulma Customization Concepts
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Added some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request