在Rails 3.1中配置蓝图

Question

我是使用rails进行Web开发的新手.我想知道将蓝图添加到我的应用程序的步骤是什么.我已经找了一个教程,但是我曾经发现过这个教程似乎已经假定了一些先前的知识并完成了一些步骤.

现在我在我的应用程序中捆绑了指南针,scss,haml.从这里我想找到一个教程,解释每个蓝图scss文件应该去哪里.

我在这个问题上受过一些教育,但从我读到的我需要制作一个蓝图文件夹并在app/assets/stylesheets目录中添加一个blueprint.css文件.我不确定是否有宝石或任何特定的安装步骤或生成器命令来设置...这对我来说似乎很奇怪.

谢谢你的帮助

Answer 1

GTDev,

我对Compass一无所知,但我可以向您展示我如何使用Blueprint和新的Asset Pipeline.它很好,对我来说感觉就像Rails Way.

第一个问题:蓝图文件夹在哪里？像Rails中的许多东西一样,你有一些选择,但有些选项比其他选项更好.如果您还没有,我强烈建议您花点时间观看Rails的创建者谈论Asset Pipeline.[RailsConf 2011主题演讲]无论如何,所以他们创建了这些空文件夹,以鼓励样式表和javascripts的抽象,无论是谁编写代码,还是出于什么目的.在此之前,我们将它们视为二等公民,将所有内容都放入公共文件夹中,这有点令人讨厌.现在,由于蓝图是由其他人编写的框架,因此它属于vendor/assets/stylesheets文件夹.因此,在下载并解压缩蓝图后,进入joshuaclayton-blueprint-css- [hex]文件夹并剪切蓝图子文件夹.将其粘贴到vendor/assets/stylesheets文件夹中.

第二个问题:如何确保有条件地应用样式表？ 您需要创建3个文件.vendor.css,vendor- print.css和vendor-ie.css

$ mate vendor/assets/stylesheets/vendor.css
$ mate vendor/assets/stylesheets/vendor-print.css
$ mate vendor/assets/stylesheets/vendor-ie.css

替换你最喜欢的文本编辑器的配偶.如果您更喜欢GUI,只需创建一个新文件,然后另存为...现在复制并粘贴.

vendor.css文件如下所示:

/*
 * vendor.css
 * 3rd party libraries for computer displays
 *= require blueprint/screen
*/

vendor-print.css文件如下所示:

/*
 * vendor-print.css
 * 3rd party libraries for printed media
 *= require blueprint/print
*/

vendor-ie.css文件如下所示:

/*
 * vendor-ie.css
 * 3rd party libraries for IE compatibility
 *= require blueprint/ie
*/

保存并关闭这些文件.你几乎完成.我们只需要从模板中调用文件即可.

请注意 ,我们未对 app/assets/stylesheets/application.css 进行任何更改.它是新鲜的开箱即用:)

打开app/views/layouts/application.html.haml.如果它不存在,请删除app/views/layouts/application.html.erb并创建新文件.它看起来应该是这样的:

!!! 5
%html{:lang => "en-US"}
    %head
        %meta{:charset => "utf-8"}
        = csrf_meta_tags
        = stylesheet_link_tag    "vendor",       :media => "screen"
        = stylesheet_link_tag    "application",  :media => "screen"
        = stylesheet_link_tag    "vendor-print", :media => "print"
        /[if lt IE 8]
            = stylesheet_link_tag  "vendor-ie",  :media => "screen"
        = javascript_include_tag "application"
        /[if lt IE 9]
            %script{:src => "http://html5shiv.googlecode.com/svn/trunk/html5.js"}
        %title foo
    %body
        = yield

应该这样做.重启服务器,看看会发生什么.