Blueprint CSS, Ruby on Rails 3.1 and "CSS conditions"

Question

I'm migrating my application to Rails 3.1 and I use the blueprint css framework. As seen in the setup instructions at blueprint's github page there's is a condition that needs to be true for the ie.css file to be included.

In rails 3.1 we place our stylesheet files (either .css or .scss) in app/assets/stylesheets. Application.css contains these two important lines:

/*
 *= require_self
 *= require_tree . 
*/

Which loads every .css or .scss file in the app/assets/stylesheets directory. This is what the setup instructions tells us to do:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
  <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->

How do I 'create' a condition like that in 3.1?

Answer 1

Try using three separate files to require all the relevant files:

/*
 * Application-Screen.css
 *
 *= require_self
 *= require_tree ./screen
 */

/*
 * Application-Print.css
 *
 *= require_self
 *= require_tree ./print
 */

/*
 * Application-IE.css
 *
 *= require_self
 *= require_tree ./ie
 */

The tree would look like:

app/stylesheets/
+---screen/
|   +--- Your actual stylesheets, along with Blueprint's
+---print/
|   +--- Your print stylesheets, along with Blueprint's
+---ie/
|   +--- IE compatibility stylesheets
+---Application-Screen.css
+---Application-Print.css
+---Application-IE.css

Then you would probably be able to do:

<link rel="stylesheet" href="Application-Screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="Application-Print.css" type="text/css" media="print">
<!--[if lt IE 8]>
  <link rel="stylesheet" href="Application-IE.css" type="text/css" media="screen, projection">
<![endif]-->

If this does not work, please check my other answer.

Answer 2

I discourage you to mess with the blueprint directory. You should import it as is. Avoid importing the blueprint css files into a different tree or into separate directories (it may break relative paths).

You blueprint folder path should look like app/assets/stylesheets/blueprint/ and you should import blueprint styles before your application styles (so you can override any undesiderable style imported from blueprint).

---

The following solution is based on Matheus Moreira's answer and is concerned with these issues:

/*
 * application.css
 * General styles for the application
 *= require ./blueprint/screen
 *= require_self
*/

/*
 * application-print.css
 * Styles for print media
 *= require ./blueprint/print
 *= require_self
*/

/*
 * application-ie.css
 * Styles if lt IE 8
 *= require ./blueprint/ie
 *= require_self
*/

The files tree should look like:

app/assets/stylesheets/application.css
app/assets/stylesheets/application-ie.css
app/assets/stylesheets/application-print.css
app/assets/stylesheets/blueprint/

Your application layout should import the stylesheets as:

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

You should also check this rails cast by Ryan Bates about Sass basics in Rails 3.1: http://railscasts.com/episodes/268-sass-basics

Answer 3

FYI

I use this to create blueprint in rails 3.1

blueprint folder path (try the dry run before):

compass init rails  . --using blueprint --dry-run --sass-dir app/assets/stylesheets --image-dir app/assets/images

Just save you the time spent to move stuffs under assets

Answer 4

Alternatively, you may place Blueprint's stylesheets in public/stylesheets and you can use them exactly as you would in previous versions of Rails:

stylesheet_link_tag '/stylesheets/blueprint/screen', media: 'screen, projection'
stylesheet_link_tag '/stylesheets/blueprint/print', media: 'print'
<!--[if lt IE 8]>
    stylesheet_link_tag '/stylesheets/blueprint/ie', media: 'screen, projection'
<![endif]-->