59
loading...
Setup Bulma CSS framework in your Rails application
In this tutorial, I will show you how to setup the CSS framework Bulma in a Rails application
Prerequisites
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 setupEnter 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.scssOk, 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 viewRails.application.routes.draw do
get 'home/index'
root 'home#index' # <- This one
endRefresh the browser and you should see this page
That’s it!
59