Bulma Gem

Making your own ruby gem for a css/js library

I wanted to make a ruby gem for a simple CSS library I use a lot these days called Bulma. It is an awesome front-end CSS framework that is built with flexbox, is lightweight (11kb gzipped) and has tons of useful utilities. It currently has 5.7k stars on GitHub and gained a lot of popularity recently. Since I like to keep my assets local, I decided to make a gem for this library, that can then be used inside rails with a simple include.

PS: I am aware that bulma rails wrappers are already present. This is just an attempt to document how to make such gems.

Getting started

I decided to name the gem bulma-css. I also decided to version the gem same as the current bulma version, so changed the version to 0.0.16 for now. So we first start by the starting gem creation process:

  • Install bundler: gem install bundler
  • Start a new gem project: bundle gem bulma-css
  • Edit the README.md and bulma-css.gemspec with your name, description and other details.

Making it work with rails.

We first need to add railties as a dependency to make it work. So in our bulma-css.gemspec we add the lines

spec.add_dependency         'railties',   '>= 3.1'  
spec.add_development_dependency 'rails', '>= 3.1'  

I removed the lib/bulma/css.rb as I didn't like the directory structure.
We first add a new file in the lib directory named bulma-css.rb with the following contents.

require "bulma/css/version"

module Bulma  
  module Css
    require 'bulma/css/engine' if defined?(Rails)
  end
end  

Then we make a file engine.rb in the lib/bulma/css folder with the following contents.

module Bulma  
  module Css
    class Engine < ::Rails::Engine
    end
  end
end  

After these lines are added, this gem will add functionality to the current rails app by being acting as a rails engine. So now when this gem in bundled, the vendor/assets path will also be added to the lookup paths for the assets, and thus adding any stylesheet here will make it available for the whole app.

Now we add the bulma.css file from the bulma repo to a folder vendor/assets/stylesheets

Building the gem

gem build bulma-css.gemspec

Testing it out

Include it in a rails app in the application.css file as

*= require bulma

and check in the browser if it was successfully included

Deploying it

gem push bulma-css-0.0.16.gem

Profit!

Now since this gem is present on Rubygems.org, you can easily add bulma to your app by just adding bulma-css to your Gemfile and running bundle install.

The source code of the gem happily rests at https://github.com/rush-skills/bulma-css

References