gemfire labs rails sass

Pivotstrap – building SASS libraries for Rails apps

I’ve been working on an internal project which has made the most of Twitter Bootstrap to get the styling in place quickly. My thoughts aside about Bootstrap, we wanted to make the application look and feel a little more like the pivotallabs.com site. We have a style guide which includes things like colours and fonts and we wanted to bring some of those simple things into our site. We also have several other internal sites other than the one I’m currently working on and I wanted to build a SASS library that others could use easily.

Building a gem

I created a gem, pivotal-sass which had a SASS file in the vendor/assets/stylesheets folder and the gem includes an Engine class which extends Rails::Engine. This will make the gem and it’s assets available to Rails application that include this dependency.

module Pivotal
  module Sass
    class Engine < ::Rails::Engine
    end
  end
end

Adding the railties and sass-rails dependencies into the gemspec

spec.add_dependency "railties", ">= 3.2"
spec.add_dependency "sass-rails", ">= 3.2"

To ensure the right directories were getting inserted into the gem, the gemspec also defines the files

spec.files = Dir["{lib,vendor}/**/*"] + ["LICENSE.txt", "README.md"]

Testing the mixins

At first to test the mixins I was creating, I setup a Rails app which included the gem. I would rake install in one directory and bundle update pivotstrap && rails s in another to see how the mixins were performing. Fellow Pivot Spencer Hurst recommended we use Middleman to serve the assets so we could test the look and feel without the cumbersome process.

We set up Middleman which required the middleman-sprockets to bring in the asset pipeline from the gem. Then running middleman server we could fire up a browser start looking at a page which included a stylesheet which referenced our pivotstrap mixins. Adding this to the config.ru file makes the assets available to Middleman

activate :sprockets

Mixins vs class definitions

One of the decisions we had to make early on was if we were to build a gem with this style helpers, how would we make it easy for projects different style dependencies to work? Our particular project was using Bootstrap 2 but we didn’t know if other projects used Boostrap, a different grid library or something totally home grown. This is where we turned to Compass as an example. This library doesn’t dictate what classes are required on an element to work, but instead provide a host of useful utility mixins that can be included how the project sees fit. This is the direction we choose to go.

We also wanted to not make any positioning decisions so Pivotstrap just exposes constants (like colors and fonts), style guide objects like buttons and some (hopefully) sensible defaults for headings.

We’re looking to build components at a higher level which may dictate some class structure, but we want to make sure that we get good coverage of all of the base styles first. These components will also be mixins, perhaps for things like navigation.

Want to check out Pivotstrap, see it on Github.

Related Articles