Using Bulma with Rails 7

Had a new app idea in my mind. I have been using bootstrap all along, but this time I wanted to try something different. I was scouting for front end CSS frameworks and bulma caught my eye.

It was easy to integrate bulma into new Rails 7 app, you just need to specify you want css as bulma as shown:

$ rails new app_name -css=bulma

However I do not know how to add it to an already existing Rails app. All this node 🤮 and JavaScript 🤮🤮 is super confusing to me.

Bulma had a good nav bar and it was responsive.

It hid its menus in mobile view and you can reveal it by clicking a burger menu as shown:

Bulmas Burger toggle

To toggle this burger, bulma gave two piece of code, this one is in JavaScript 🤮🤮:

JavaScript 🤮🤮

document.addEventListener('DOMContentLoaded', () => {

  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Add a click event on each of them
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {

      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');

    });
  });

});

This one is in jQuery:

jQuery

$(document).ready(function() {

  // Check for click events on the navbar burger icon
  $(".navbar-burger").click(function() {

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");

  });
});

I really don’t know why crack heads even in Rails community want to use pure JavaScript 🤮🤮, just look at the jQuery code. It’s small and does the job. jQuery is still the king when it comes to JavaScript 🤮🤮. It’s small, better to writer, and get’s the job done! It’s the King!!

That’s it for this blog. If you want to learn how I achieved navbar burger toggle for my website continue reading.

First start a webpage with CSS as bulma as shown:

$ rails new app_name -css=bulma

In Rails 7, if you do rails s, server will run and it will be served in port 3000, but if you make changes to CSS, it won’t reflect. You must use a command as shown:

$ bin/dev

The command above taps into Procfile.dev, which has the following code:

web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch

and starts 3 processes as follows:

  • web: bin/rails server -p 3000 is for the Rails app to be served on port 3000
  • js: yarn build --watch is to watch the JavaScript 🤮🤮 files and to compile them when they are changed.
  • css: yarn build:css --watch is to watch the CSS files and to compile them when they are changed.

Now I added jQuery using yarn as shown:

$ yarn add jquery

I created a file app/javascript/add_jquery.js which had the following content:

import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery

To toggle the navbar burger I created a a file app/javascript/navbar-burger.js and it had the following content:

$(function() {
  // Check for click events on the navbar burger icon
  $(document).on('click', ".navbar-burger", {}, function() {
    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
    $(".navbar-burger").toggleClass("is-active");
    $(".navbar-menu").toggleClass("is-active");
  });
});

If you see, this is different than the one given in bulma website. The reason is Rails kind of act’s like single page app, so if you use the bulmas way, the burger will not toggle when the navbar is loaded via ajax request. Wheras my code will make that possible.

Now I need to tell app/javascript/application.js to include jQuery and my navbar-burger code to toggle navber burger:

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import './add_jquery'
import './navbar-burger'

That’s it, any navbar put in any page in your Rails app will toggle the burger in mobile view. Enjoy!!

Phew 😮‍💨, when the hell A.I systems will code and save us from JavaScript 🤮🤮 and other configuration nonsense?

Reference