Menu
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
325
place your css file in the app/assets/stylesheets folder.
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.
132
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 %> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
