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
Setup Bulma in the project
Install bulma package by executing yarn add 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
That’s it!
Top comments (0)