Discography application in Ruby on Rails: asset pipeline

I have a new Rails 3.1 (release candidate) application to which I want to add BlueprintCSS. But Rails 3.1 comes with the new "asset pipeline." To install BlueprintCSS, one simply copies over the blueprint folder and references it with a stylesheet_include tag. But in the asset pipeline, where should it go? You have three options:

/app/assets/stylesheets
/lib/assets/stylesheets
/vendor/assets/stylesheets

As far as I know, the directory /app/assets is for assets you create specifically for your application, the directory /vendor/assets is for assets from outside "vendors", and /lib/assets is for I don't know what. So we'll put BlueprintCSS in the /vendor/assets folder, since that makes the most sense to me.

Step one: Download BlueprintCSS

Download the latest version of Blueprint, either from the GitHub page or from BlueprintCSS.com. I let it download to my default location, which is ~/Downloads/.

Unpack the tarball

Now we need to unpack the downloaded tarball. I'm going to unpack it to my home directory (Linux represents this by the tilde symbol, "~"). Go to the Downloads directory containing the tar file, use the tar command, along with -x (extract), f (the file to extract), and C (the directory to which the extracted files should go).

$ cd ~/Downloads/
$ tar -xf joshuaclayton-blueprint-css-v1.0.1-8-g9bf9513.tar.gz -C ~

Copy the "blueprint" folder

Now the extracted folder is in the ~ directory (same as /home/andy/). Next, we want to copy (cp) just the stylesheet folder (called "blueprint") to our /vendor/assets/stylesheets/ directory:

$ cd ~
$ cp -r joshuaclayton-blueprint-css-9bf9513/blueprint/ wikidiscography/vendor/assets/stylesheets/

Note that we use the -r flag for "recursive," since it's a directory.

Add the stylesheets to the Rails app

Finally, we need to tell Rails about the new stylesheets. Add the following three lines to the file /app/views/layouts/application.html.erb:

<%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
<%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
<!--[if lt IE8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif] -->

Make sure to add them before the "application" css file. This will ensure that any changes to that file will override Blueprint (which is what we want). My application.html.rb now looks like this:

<!DOCTYPE html>
<html>
<head>
  <title>Wikidiscography</title>
  <%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
  <%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
  <!--[if lt IE8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif] --> 
  <%= stylesheet_link_tag    "application" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

Now reload your application page, and view the source code (Ctrl-U on PCs) in the browser. At the top of the page source you should see links to the blueprint stylesheets.

Asset Pipeline did the work

This is neat because without our having to do any extra coding, Rails found the stylesheets from /app/assets/stylesheets/ and from /vendor/assets/stylesheets. This keeps our outside "vendor" stylesheets in a separate folder from the CSS we'll eventually write ourselves, and allows us to do a simple drop-in replacement of the Blueprint folder when the next version of BlueprintCSS is released.

What about Sass?

Rails 3.1 ships with Sass as the default CSS framework. But Blueprint is written in pure CSS, not Sass. However, that's not a problem, because the latest Sass syntax (files with a .scss) extension is a superset of CSS, so any .css file is also a valid .scss file. That means we don't have to do anything to Blueprint. It Just Works, and we can still use Sass for our own stylesheet code.

Thanks goes to Joshua Clayton for a great product.

Discography application in Ruby on Rails

Thursday, June 9, 2011

Adding BlueprintCSS to Rails 3.1 and the Asset Pipeline