The first thing to do is remove the Bootstrap-related gems from the Rails app.
Uninstall Bootstrap
From the terminal, cd into your project’s folder and type, for example:
gem uninstall bootstrap-sass bootstrap-will_paginate
Then run bundle install to update the environment.
Add Bulma
According to the installation docs, if you are happy to use the Bulma styles as they come, the last step you'll need to do is add the pre-compiled Bulma stylesheet to your document header:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
Otherwise if, like me, you want the option to customise the styles, you’ll need to add the Bulma npm package into your project.
Before doing that though, if your Rails app doesn’t have them yet, you’ll need to install nvm, nodejs, and npm. Follow the Node official instructions for the best way of doing this.
Use the cssbundling-rails gem
Once your environment is ready, you can install the cssbunding-rails gem. This gem saved me so much time!
cssbunding-rails can be used to install multiple CSS frameworks, not just Bulma. Check out the gem repo to find the whole list. It will also configure the app to compile the CSS styles locally.
To install cssbunding-rails and the Bulma package, run the following from the terminal:
bundle add cssbundling-rails
bin/rails css:install:bulma
Note that running bundle add is equivalent to running gem install followed by bundle install.
Update all classes
The last remaining step is to migrate all the existing CSS classes in the app templates, views and partials from Bootstrap to Bulma.
A bit tedious but necessary.
And, do not forget to update your tests too!
After that, congratulations! All’s done!
A gotcha
Or perhaps not?
After the migration, the app run locally but my integration tests were failing with a weird error:
ActionView::Template::Error:
Error: Invalid CSS after "...-s), var(--l));": expected "}", was "--00-l: var(--bulma" on line 14482:46 of stdin
It turns out I still had sassc-rails in the Gemfile. This compiler gem does not recognise some of the more up-to-date Sass included in Bulma and was causing the errors.
In any case, sassc-rails was no longer needed as cssbundling-rails does it all for us. So the solution, in the end, was easy:
gem uninstall sassc-rails
That’s it.
Commit, push. All done!
Top comments (0)