DEV Community

Cristhiam
Cristhiam

Posted on • Originally published at streetcoder.dev on

Setup Bulma CSS framework in your Rails application

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"; 

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Refresh the browser and you should see this page

bulma

That’s it!

Top comments (0)