bulma-header

In this tutorial, I will show you how to setup the CSS framework Bulma in a Rails application

Prerequisites

  • Rails 6.x

Create new rails project

Go to your terminal and execute rails new bulma-test. You can read the guide to Starting your Rails project with an ultra-light setup

Enter to folder project, run your application by executing rails s, and go to url localhost:3000

rails

Setup Bulma in the project

Install bulma package by executing yarn add bulma

bulma

Open the file /app/assets/stylesheets/application.css, replace all its content by

@import "bulma/bulma";

Finally, rename the file to application.scss

Ok, the setup is done, let’s try it

Create your first rails view styled with Bulma

Create Home controller and index view by executing this command rails g controller Home index.

Open the file app/views/home/index.html.erb and replace its content by:

<div class="box m-6">
  <div class="content">
    <div class="title is-2 has-text-info">Hello Bulma!</div>
    <div class="button is-success">Success</div>
  </div>
</div>

Open the file config/routes.rb, and add a route to our new view

Rails.application.routes.draw do
  get 'home/index'
  root 'home#index' # <- This one
end

Refresh the browser and you should see this page

bulma

That’s it!

Related Posts