Migrating from Bootstrap to Bulma in Rails

This guide provides a comprehensive walkthrough for replacing Bootstrap with Bulma in your Ruby on Rails application. We’ll cover removing Bootstrap, installing Bulma, handling CSS compilation, and addressing potential migration challenges.

Removing Bootstrap

First, eliminate all Bootstrap gems from your Rails project. Navigate to your project directory in the terminal and execute:

gem uninstall bootstrap-sass bootstrap-will_paginate
bundle install

This command uninstalls the specified gems and updates your application’s dependencies.

Installing Bulma

Bulma offers flexible installation options. For using the default styles, simply include the following line in your document header:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

For customization, however, integrating the Bulma npm package is recommended.

Preparing your environment

Before proceeding with the npm installation, ensure you have nvm, nodejs, and npm installed. Refer to the official Node.js documentation for detailed installation instructions if needed.

Utilizing cssbundling-rails

The cssbundling-rails gem simplifies the process of managing CSS frameworks within your Rails application. It supports various frameworks, including Bulma, and configures local CSS compilation.

Install cssbundling-rails and the Bulma package with these commands:

bundle add cssbundling-rails
bin/rails css:install:bulma

The bundle add command combines the installation and dependency update steps.

Updating CSS Classes

The next crucial step is migrating all existing Bootstrap CSS classes in your application’s templates, views, and partials to their Bulma equivalents. While potentially time-consuming, this ensures a consistent visual appearance. Remember to update your tests accordingly.

Addressing Potential Issues: sassc-rails

After migrating, you might encounter errors in your integration tests if you still have the sassc-rails gem installed. This gem may conflict with Bulma’s Sass implementation. Since cssbundling-rails handles CSS compilation, sassc-rails becomes redundant. Remove it with:

gem uninstall sassc-rails

Conclusion

By following these steps, you can seamlessly transition from Bootstrap to Bulma in your Rails application. This migration allows you to leverage Bulma’s modern and flexible styling options while ensuring a smooth development experience. Remember to thoroughly test your application after the migration to identify and resolve any remaining issues.