How does one load a CSS framework in Rails 3.1?
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
- How should one apply the if lt IE 8 condition using SASS?
- How does one load a css file for the print format (i.e. <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>) using SASS?
Answer
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.