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.
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
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
gem push bulma-css-0.0.16.gem
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
The source code of the gem happily rests at https://github.com/rush-skills/bulma-css