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
  • 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!

    64

    Categories:

    Ruby

    Tags:

    RubyRailsBulmaCoding

    This website collects cookies to deliver better user experience

    Setup Bulma CSS framework in your Rails application