Blueprint CSS, Ruby on Rails 3.1, and CSS Terms

Question

I am porting my application to Rails 3.1 and I am using the css scheme for printing . As you can see from the setup instructions on the gythub gprint page , there is a condition that must be true for the ie.css file to be included.

In rails 3.1, we put style files (.css or .scss) in app / assets / stylesheets. Application.css contains these two important lines:

/* *= require_self *= require_tree . */ 

Uploads each .css or .scss file to the app / assets / stylesheets directory. This is what the installation instructions tell us:

 <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 this state 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 will look like this:

 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 can probably:

 <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 that doesn't work, check out my other answer.

Answer 2

I let you bother with the project directory. You must import it as is. Avoid importing project css files into another tree or into separate directories (this can lead to breaking relative paths).

The path to the Blueprint folder should look like app / assets / stylesheets / blueprint / , and you should import the styles styles before the styles of your application (so that you can override any indescribable style imported from the drawing).

---

The following solution is based on Matheus Moreira's answer and is related to these problems:

 /* * 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 file tree should look like this:

 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 style sheets 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 out these rails made by Ryan Bates about the Sass Fundamentals in Rails 3.1: http://railscasts.com/episodes/268-sass-basics

Answer 3

Fyi

I use this to create a circuit in rails 3.1

path to the folder with black text (try to run a dry run earlier):

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

Just save time spent transferring assets

Answer 4

Alternatively, you can put the Blueprint stylesheets in public/stylesheets , and you can use them just like 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]-->