Discography application in Ruby on Rails: Adding BlueprintCSS to Rails 3.1 and the 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.

8 comments:

Craig KnoxJune 12, 2011 at 1:12 PM
Thanks for the post.

I find with RC3 at least that the asset pipeline loads all files in vendor/assets. This is a problem because it loads the ie.css and print.css stylesheets regardless of whether you are in IE or printing. This is due to the "require_tree ../../../vendor/assets/stylesheets/" line in application.css.

So I actually placed blueprint in public/stylesheets and loaded it from there. Not sure what else to do other than turn off asset loading for vendor/assets.

Any thoughts?
Mario ZigliottoJune 15, 2011 at 1:01 AM
I love blueprint. Just wanted to comment that if people are also going to use the plugins... such as "buttons" (which gives you some classes to make nice little green/neutral/red buttons) u need to specifically include it just like the other stylesheets:

ie.
<%= stylesheet_link_tag 'blueprint/plugins/buttons/screen', :media => "screen" %>

Great post Andy, thanks!
Turadg AleahmadJune 20, 2011 at 5:58 PM
Just what I was looking for, thanks.

small corrections:
1) blueprintcss.com -> blueprintcss.org
2) in cp -r, drop trailing slash on blueprint/ to copy the directory and not the contents (at least on my Mac)
AnonymousJune 29, 2011 at 11:12 PM
Nicely explained. Thank you!
UnknownJuly 31, 2011 at 5:07 PM
This comment has been removed by the author.
UnknownJuly 31, 2011 at 5:10 PM
Alright, reformatted my last post: =]

Thank you for posting this, but one issue:

Why use
< ! - - [if lt IE8]><%= stylesheet_link_tag 'blueprint/ie' %>< ! [ e n d i f ] -->
and not
< ! - - [if IE]><%= stylesheet_link_tag 'blueprint/ie', :media => 'screen, projection' %>< ! [ e n d i f ]-->
?

With what you have, < ! - - [ if lt IE8]> appears at the very top for users using Internet Explorer.

(ignore the spaces I used in the code - I just did that so the code would appear properly in this comment)
AnonymousDecember 8, 2011 at 12:55 PM
Could you please also post you application.css? Did you try this in production mode, if yes are you hosting at Heroku?
UnknownJuly 5, 2013 at 11:06 PM
Great post buddy! Solved my problem.

Thursday, June 9, 2011

Adding BlueprintCSS to Rails 3.1 and the Asset Pipeline