Настройка Blueprint в Rails 3.1 - PullRequest
Новая
       39

Настройка Blueprint в Rails 3.1

1 голос
/ 14 октября 2011

Я новичок в веб-разработке с использованием рельсов. Мне было интересно, каковы шаги для добавления проекта в мое приложение. Я искал учебное пособие, но однажды я обнаружил, что, кажется, что-то предшествующее знание и что несколько шагов были выполнены.

Сейчас в моем приложении есть компас, scss, haml. Отсюда я хотел бы найти учебник, объясняющий, куда должен идти каждый файл scss проекта.

Я немного недостаточно образован в этом вопросе, но из того, что я прочитал, мне нужно создать папку с чертежами и добавить файл blueprint.css в каталог app / assets / stylesheets. Я не уверен, есть ли гем или какие-то определенные шаги установки или команда генератора для запуска ... что мне кажется странным.

Спасибо за любую помощь

Ответы [ 2 ]

5 голосов
/ 27 октября 2011

GTDev,

Я ничего не знаю о Compass, но могу показать вам, как я использую Blueprint с новым конвейером активов. Он хорошо просыпается, и мне кажется, что это Rails Way .

Первая проблема: Куда уходит папка с планом? Как и во многих других приложениях Rails, у вас есть несколько вариантов, но некоторые из них лучше других. Если вы еще этого не сделали, я настоятельно рекомендую вам потратить некоторое время, чтобы посмотреть, как создатель Rails расскажет о Asset Pipeline. [RailsConf 2011 Keynote] В любом случае, они создали эти пустые папки, чтобы поощрять абстракцию таблиц стилей и javascript, с точки зрения того, кто написал код и для какой цели. Тогда как раньше мы относились к ним как к гражданам второго сорта, выкидывая все в общую папку, что довольно неприятно. Теперь, поскольку blueprint - это фреймворк, написанный кем-то другим, он находится в папке vendor / assets / stylesheets . Итак, после загрузки и распаковки чертежа перейдите в папку joshuaclayton-blueprint-css- [hex] и вырежьте подпапку blueprint . Вставьте его в папку 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

Замените помощник на ваш любимый текстовый редактор. Если вы предпочитаете графический интерфейс, просто создайте новый файл и сохраните как ... теперь скопируйте и вставьте.

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

Это должно сделать это. Перезагрузите сервер и посмотрите, что произойдет.

0 голосов
/ 10 ноября 2011

1) добавить в Gemfile и запустить компас обновления пакета : 

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

2) создайте файл blueprint.css.scss в app / assets / stylesheets со следующим содержимым: 

@import '_blueprint';
@include blueprint;

3) в app / assets / stylesheets / application.css есть это: 

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

4) добавить в config / 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"
...