Bulma on Rails

Bulma is an incredible frame work that works beautifully with Rails 6. It's trivial to setup so here's how.

I'm not a web designer. If I'm left to my own devices, my interfaces are going to suck. I want need a framework that's easy to get going with, has enough of the components I need and lets me meddle to add and change things.

Bootstrap, somewhere around v2 used to be the go-to framework but it's morphed into an alphabet soup of incomprensible class names and strange (to me) flexbox vs grid behaviours.

Bulma, on the other hand, is gorgeous. It's light weight with a decent set of components and an ecosystem of components. I'm using it for Chutney Online.

It is however, just a CSS framework. It doesn't come with any JavaScript packages so you either have to roll your own or, as I have, use of the unoffical extensions – BulmaJS is a super-easy drop in. While I'm at it, I'm going to throw in Fontawesome too. I'm going to be using Webpacker and not the asset pipeline.

yarn install bulma
yarn install @vizuaalog/bulmajs
yarn install @fortawesome/fontawesome-free

Edit app/views/layouts/application.html.erb and change:

• javascript_link_tag → javascript_pack_tag
• stylesheet_link_tag → javascript_pack_tag

Create a new folder and file app/javascript/stylesheets/application.scss with the content:

@import '~bulma';

Edit app/javascript/packs/application.js and add these lines to the bottom of it:

require("@vizuaalog/bulmajs")
import "@fortawesome/fontawesome-free/js/all"
import '../stylesheets/application'

That's all there is to it.