在Rails 3.1中配置藍圖

我是使用rails進行web開發的新手。我想知道將藍圖添加到我的應用程序的步驟是什麼。我曾經找過一篇教程，但是我發現這篇教程似乎假設了一些先前的知識，並且完成了幾個步驟。在Rails 3.1中配置藍圖

現在我有指南針，scss，haml捆綁在我的應用程序中。從這裏我想找到一個教程，解釋每個藍圖scss文件應該放在哪裏。

我有點受教育的問題，但從我讀我需要做一個藍圖文件夾，並添加一個blueprint.css文件都在應用程序/資產/樣式表目錄。我不確定是否有寶石或任何特定的安裝步驟或生成器命令來運行設置......這對我來說似乎很陌生。

感謝所有幫助

來源

2011-10-14 GTDev

結帳有關使用HTML5樣板和藍圖一起此SO問題：http://stackoverflow.com/questions/4407891/html5-boilerplate -with-blueprint-css –

GTDev，

我不知道什麼指南針，但我如何使用藍圖與新的資產管道，我可以告訴你。這真是太好了，感覺就像Rails Way給我。

第一個問題：藍圖文件夾在哪裏？像Rails中的許多事情一樣，你有幾個選項，但有些選項比其他選項更好。如果您還沒有，我強烈建議您花一些時間觀察Rails的創建者講述資產管道。 [RailsConf 2011 Keynote]無論如何，所以他們創建了這些空文件夾，以鼓勵樣式表和JavaScripts的抽象，以及編寫代碼的人員和目的。而之前，我們把他們當作二等公民，把所有東西都傾倒在公共文件夾中，這是非常討厭的。現在，由於藍圖是由其他人編寫的框架，因此它屬於供應商/資產/樣式表文件夾。因此，在您下載並解壓縮藍圖後，請進入joshuaclayton-blueprint-css- [hex]文件夾並剪切藍圖子文件夾。將其粘貼到您的供應商/資產/樣式表文件夾中。

第二個問題：如何確保樣式表是有條件應用的？ 您需要創建3個文件。 vendor.css，廠商print.css，& 廠商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 
*/

廠商print.css文件看起來像這樣：

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

廠商即。CSS文件看起來像這樣：

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

保存&關閉這些文件。你幾乎完成。我們只需要從我們的模板中調用這些文件即可。

注意我們做出任何更改應用程序/資產/樣式表/ 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

應該這樣做。重新啓動服務器，看看會發生什麼。

來源

2011-10-27 14:54:03

...我也喜歡你的方式。 –

1）添加到Gemfile中並運行束更新羅盤：

group :assets do 
    gem 'compass', '~> 0.12.alpha' 
end

2）創建具有以下內容上的應用程序/資產/樣式表一個blueprint.css.scss文件：

@import '_blueprint'; 
@include blueprint;

3）到應用程序/資產/樣式表/ application.css具有這樣的：

/* 
    *= require_self 
    *= require blueprint 
    *= require_tree . 
*/

4）添加到配置/ application.rb中以下兩行：

config.assets.paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets" 
config.assets.paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/blueprint/stylesheets"

來源

2011-11-10 18:42:57

在Rails 3.1中配置藍圖

回答

相關問題