Question

I am new to web development using rails. I was wondering what the steps are to adding blueprint to my application are. I have looked for a tutorial but the once I have found seem to assume some prior knowlede and that a few steps were completed.

Right now I have compass, scss, haml bundled in my application. From here I would like to find a tutorial explaining where each blueprint scss file should go.

I am a little under educated in the issue but from what I read i need to make a blueprint folder and add a blueprint.css file both within the app/assets/stylesheets directory. I am not sure if there is a gem or any specific installation steps or generator command to run to set things up… which seems strange to me.

Thanks for any help

Answer 1

GTDev,

I don’t know anything about Compass, but I can show you how I’m using Blueprint with the new Asset Pipeline. It’s woking well, and it feels like the Rails Way to me.

First problem: Where does the blueprint folder go? Like many things in Rails, you have a few options, but some options are better than others. If you haven’t already, I highly recommend that you take some time to watch the creator of Rails speak about the Asset Pipeline. [RailsConf 2011 Keynote] Anyway, so they created these empty folders in order to encourage the abstraction of stylesheets and javascripts, in terms of who wrote the code, and for what purpose. Whereas before, we treated them sortof as 2nd class citizens, by dumping everything into the public folder, which is kindof nasty. Now, since blueprint is a framework written by someone else, it belongs in the vendor/assets/stylesheets folder. So, after you download and unzip blueprint, go into the joshuaclayton-blueprint-css-[hex] folder and cut the blueprint subfolder. Paste it into your vendor/assets/stylesheets folder.

Second problem: How do I make sure that the stylesheets are applied conditionally?
You’ll need to create 3 files. vendor.css, vendor-print.css, & vendor-ie.css

$ mate vendor/assets/stylesheets/vendor.css
$ mate vendor/assets/stylesheets/vendor-print.css
$ mate vendor/assets/stylesheets/vendor-ie.css

Substitute mate for your favorite text editor. If you prefer GUI, just make a new file, and Save As… now copy and paste.

vendor.css file looks like this:

/*
 * vendor.css
 * 3rd party libraries for computer displays
 *= require blueprint/screen
*/

vendor-print.css file looks like this:

/*
 * vendor-print.css
 * 3rd party libraries for printed media
 *= require blueprint/print
*/

vendor-ie.css file looks like this:

/*
 * vendor-ie.css
 * 3rd party libraries for IE compatibility
 *= require blueprint/ie
*/

Save & close those files. You’re almost done. We just have to call the files now from our template.

Notice that we made no changes to app/assets/stylesheets/application.css. It’s fresh-out-the-box 🙂

Open app/views/layouts/application.html.haml. If it doesn’t exist, delete app/views/layouts/application.html.erb and create the new file. It should look pretty much like this:

!!! 5
%html{:lang => "en-US"}
    %head
        %meta{:charset => "utf-8"}
        = csrf_meta_tags
        = stylesheet_link_tag    "vendor",       :media => "screen"
        = stylesheet_link_tag    "application",  :media => "screen"
        = stylesheet_link_tag    "vendor-print", :media => "print"
        /[if lt IE 8]
            = stylesheet_link_tag  "vendor-ie",  :media => "screen"
        = javascript_include_tag "application"
        /[if lt IE 9]
            %script{:src => "http://html5shiv.googlecode.com/svn/trunk/html5.js"}
        %title foo
    %body
        = yield

That should do it. Restart your server, and see what happens.