Перевод Ruby on Rails Tutorial | Каскадные Таблицы Стилей

# coding: utf-8

4.1.2 Каскадные Таблицы Стилей (CSS)

Это второе дополнение к нашему сайту, оно покажется простым, но добавит несколько новых концепций Ruby: в том числе таблицы стилей в шаблон нашего сайта. Хотя это книга о веб-разработке, а не о веб-дизайне, мы будем использовать каскадные таблицы стилей (CSS), чтобы придать примеру приложения некоторый минимальный стиль, и мы будем использовать фрэймворк Blueprint CSS в качестве основы для этого стиля.

Для начала, скачайте последнюю версию Blueprint CSS. (Для простоты я буду считать, что вы скачали Blueprint в папку Downloads, но вы можете использовать любую другую.) Используя командную строку либо графический инструмент, скопируйте папку Blueprint CSS blueprint в public/stylesheets - это специальный каталог, в котором Rails держит таблицы стилей. На моем Mac, команды выглядели так, но ваши команды могут отличаться:

  $ cp -r ~/Downloads/joshuaclayton-blueprint-css-<version number>/blueprint \
  > public/stylesheets/

Здесь cp является командой копирования Unix, и -r — флаг рекурсивного копирования (необходимый для копирования директорий). ((Как уже упоминалось вкратце в Разделе 3.2.1.1, тильда ~ означает “home directory” в Unix.) Примечание: Вы не должны вставлять символ > в терминал. Если вы вставите первую строку с обратным слэшем (“ \”) и нажмете Enter, вы увидите >, указывающий на продолжение строки. Вам следует вставить вторую строку и снова нажать Enter, чтобы выполнить команду. Отметим также, что вы должны будете заполнить номер версии вручную, т. к. он меняется при обновлении Blueprint. (# я просто скопировал название папки, включающее и номер версии тоже, и заменил им «joshuaclayton-blueprint-css-<номер версии>») Наконец, убедитесь, что Вы не вводите

  $ cp -r ~/Downloads/joshuaclayton-blueprint-css-<version number>/blueprint/ \
  > public/stylesheets/

имеющее косую черту в …/blueprint/. Это вставит содержимое папки Blueprint в каталог public/stylesheets вместо перемещения всей папки.

После того как вы заполучили таблицы стилей в соответствующий каталог, Rails предоставляет помощника для включения их на наших страницах с помощью Embedded (встроенного) Ruby (Листинг 4.4).

Листинг 4.4. Добавление таблиц стилей в макет примера приложения.
 app/views/layouts/application.html.erb

  <!DOCTYPE html>
  <html>
    <head>
      <title><%= title %></title>
      <%= csrf_meta_tag %>
      <%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
      <%= stylesheet_link_tag 'blueprint/print',  :media => 'print' %>
    </head>
    <body>
      <%= yield %>
    </body>
  </html>

Обратим внимание на новые строки:

  <%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
  <%= stylesheet_link_tag 'blueprint/print',  :media => 'print' %>

Они используют встроенный в Rails помощник stylesheet_link_tag, о котором вы можете прочитать больше на Rails API.² Первая stylesheet_link_tag строка включает таблицу стилей blueprint/screen.css для экранов (например, компьютерных мониторов), а вторая включает в себя blueprint/print.css для печати. (Помощник автоматически добавляет .css расширение к именам файлов, если оно отсутствует, поэтому я опустил его для краткости). Как и с title помощником (хелпером), для опытного разработчика Rails эти строки выглядят просто, но в них есть по крайней мере четыре новых Ruby идеи: встроенные в Rails методы, вызов метода с отсутствующими скобками, символы и хэши. В этой главе мы рассмотрим эти новые идеи. (Мы увидим, HTML произведенный включением этих таблиц стилей в Листинге 4.6 Раздела 4.3.4.)

Кстати, с новыми таблицами стилей сайт не сильно изменился, но это только начало (Рис. 4.1). Мы будем строить на этой основе, начиная с Главы 5. ³

Рисунок 4.1: Home страница с новыми Blueprint таблицами стилей.

# coding: utf-8