How does one load a CSS framework in Rails 3.1?

Question

I am trying to load a CSS framework, Blueprint, onto my Rails 3.1 application.

In Rails 3.0+, I would have something like this in my views/layouts/application.html.erb:

  <%= stylesheet_link_tag 'blueprint/screen', 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->

However, Rails 3.1 now uses SASS. What would be the proper way to load these Blueprint CSS files?

Currently, I have the blueprint dir in app/assets/stylesheets/

My app/assets/stylesheets/application.css looks like:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

Should I do something with application.css so that it loads the necessary Blueprint files? If so, how?

Second, how would I provide some kind of condition to check for IE8, to load blueprint/ie.css?

EDIT:

Hmmm, reloading the app's web page again. Rails 3.1 does include the Blueprint files. Even if the css files are in a folder (in this case: app/assets/stylesheets/blueprint.)

Which leaves me with two questions

1. How should one apply the if lt IE 8 condition using SASS?
2. How does one load a css file for the print format (i.e. <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>) using SASS?

Cannula

There's a railscasts that covers the first question – Coumarin

You should probably put the blueprint css stuff in vendor/assets/stylesheets and not in your app to make sure they are loaded first and to separate them. – Introspect

Answer 1

Even though Rails 3.1 (RC) allows use of SASS files-- it doesn't force it. Files in your /public/stylesheets will still be served just fine.

If you wish to activate the SASS parser (and utilize the new framework), rename your my_styles.css to be my_styles.css.scss and put it in the /app/assets/stylesheets folder. Then include just your application.css in your application.erb.html after uncommenting out the require_self / require_tree lines in it.

For more info, here is a blog i pulled up after a quick google search: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

As for the IE 8 thing. There was a bug in IE not not always executing conditions, so try

<!--[if IE 8.000]><!--> <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> <!--<![endif]-->

its a bit of hackery to try and reset the parser to execute the rule

Vachill

But doesn't <%= stylesheet_link_tag %> look inside app/assets/stylesheets/? How would one load CSS files in the /public/stylesheets dir? – Cannula

AFAIK, that helper is still looking in /public/stylesheets, never-the-less, you can always specific a full path with stylesheet_link_tag('/public/stylesheets/application.css') in case it does change in the future (this is a release candidate we are talking about, not a stable release) – Vachill

At least in the release candidate, it doesn't seem to look in /public/stylesheets, and since that should be a full web-path, not file-system, so no public, the way to call that work for me is: stylesheet_link_tag '/stylesheets/blueprint/print', :media => 'print' – Peculium

I actually got a longer chance to browse through the master branch of rails/rails on github and as far as I can tell, the sprockets functions aren't meant to be public. This sub package alone has about 10+/- outstanding issues so as far as stability or release state-- I'd say we are still pretty far off. Eventually (making an intelligent guess here), the backend will swap between the legacy framework (/public/*) and the new sprockets framework (/assets/*) based on config.assets.enabled – Vachill

My suggestion: Handle with care, and if you are riding the edge with 3.1, well-- be ready to ride the edge and have to be fixing your own calls when the apis changes – Vachill

Answer 2

If anyone else is wondering how I did it in the end.

I removed

 *= require_tree .

My app/assets/stylesheets/application.css, now looks like:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require 'blueprint/screen'
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

And in app/views/layouts/application.html.erb, I have:

<html>
<head>
  <title><%= yield(:title).present? ? yield(:title) : 'Foobar' %></title>
  <%= favicon_link_tag %>

  <%= stylesheet_link_tag    'application' %>
  <%= javascript_include_tag 'application' %>

  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->
...

Hope this helps someone.

Cannula

Thanks for writing this up! Your solutions makes a lot of sense and really helped me clean up an old app using Blueprint! – Burbage

Answer 3

This blog has the solution I think you're looking for (as I was).

Don't put the blueprint in app/assets because it will get sucked up in require_tree. Don't put it on public because that's not where assets go. Put it in vendor/assets/stylesheets then include them in application.html.erb before your own application.css as such:

<%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
<%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie', :media => "screen, projection" %><![endif]-->
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

Royce

Thanks! A note for others: Vendor is a folder under the project root, don't create it under App. Also remember to restart the server if it's not picking up the freshly copied files under vendor. – Lives

Answer 4

A different way of doing things:

Make app/assets/stylesheets/custom.css

Then change custom.css to use the files needed:

/*
 *= require_self
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

Finally change the link tag in your layout (make sure to remove the "application" stylesheet)

= stylesheet_link_tag    "custom"

You can then add any other stylesheet manually (like "ie" specific) and other groups of stylesheets (like blueprint to load all blueprint files...)

You might also need (in your production.rb)

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)

Demitasse

+1 for this format. An elegant way to include groups of stylesheets within a specific layout. Worked perfectly. – Dogtired

Answer 5

Here's how to use the 'blueprint-rails' gem in Rails 3.1

Add 'blueprint-rails' gem:

/Gemfile

gem 'blueprint-rails', , '~> 0.1.2'

Add the common blueprint files to the manifest so they'll be precompiled into application.css:

/app/assets/stylesheets/application.css

 /*
  *= require 'blueprint'
  */

Add the application.css, which will contain the common blueprint files. Also add the print.css and ie.css conditionally:

/Views/layouts/application.html.erb

<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
<!--[if lt IE 8]>
  <%= stylesheet_link_tag 'blueprint/ie' %>
<![endif]-->

Because of the conditionals print.css and ie.css are needed as separate files outside the application.css (and are not included by default in the require 'blueprint'). So we need to add them to:

/Configuration/envoirnments/production.rb

# Separate assets
config.assets.precompile += ['blueprint/print.css', 'blueprint/ie.css']

Then Run:

bundle exec rake assets:precompile

Jackboot

Answer 6

Absolutely agree with your solution, don't think "require_tree" is a good practice in application.css, it will include anything, apparently it's too aggressive. I have struggled for a while, finally, I picked exactly the same solution, use application to include those scaffold styles and then use HTML tags to include some optional and conditional styles. Thanks.

Pedicle

Please use "add comment" if you're not providing an actual answer. – Telekinesis

Answer 7

The end result of a translated SASS files is actually css file, so it shouldn't change how you include your stylesheets.

Additionally, just because the SASS gem is enabled doesn't mean you can't use plain vanilla css files simultaneously. Therefore you should have no problem including the blueprint css files.

However, if you want to go purely SASS, I recommend checking out the compass gem which has nice support for blueprint:

http://compass-style.org/

It also contains support for ie-specific stylesheets and macros.

Bentlee