发表新帖
发表新帖

How does one load a CSS framework in Rails 3.1?

后端 未结
关注
7 478
甜味超标
甜味超标 2020-12-24 07:03

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.e

相关标签:
7条回答
  • 后悔当初
    2020-12-24 07:24

    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
    0 讨论(0)
  • 执笔经年
    2020-12-24 07:27

    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

    0 讨论(0)
  • 失恋的感觉
    2020-12-24 07:29

    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.

    0 讨论(0)
  • 醉梦人生
    2020-12-24 07:29

    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.

    0 讨论(0)
  • 执念已碎
    2020-12-24 07:31

    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.

    0 讨论(0)
  • 旧时难觅i
    2020-12-24 07:39

    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 %>
    0 讨论(0)
 看不清?
提交回复
热议问题