Основы фреймворка Blueprint

Reading time ~9 minutes

Плавный переход от простого CSS-фреймворка 960gs к чуть более сложному фреймворку Blueprint.

Конечно, основой для изучения фреймворка Blueprint может послужить только официальное руководство. Эта статья - попытка автора осмыслить и научиться основам работы с фреймворком Blueprint. Статья является вольным переводом официального руководства по Blueprint.

Что такое Blueprint

Этот фреймворк предназначен для сокращения времени на разработку front-end проектов (ну конечно - ведь задача всех без исключения CSS-фреймворков заключается именно в этом; они для этого и были созданы).

В отличие от фреймворка 960gs, фреймворк Blueprint предлагает более богатый набор предустановленных возможностей. Помимо CSS-сетки (grid), имеются стили для типографики, для печати, для браузеров IE.

Фреймворк Blueprint

Однако, Blueprint не является средством для всего - в первую очередь, он предназначен для создания веб-сайтов, у которых каждая страница имеет свой собственный, отличный от других страниц, дизайн. Прежде чем продолжить знакомство с Blueprint, стоит взглянуть на готовые веб-страницы, созданные с помощью этого фреймворка, чтобы решить для себя - подходит ли он для вас или нет.

Также можно воспользоваться тестовой директорией на официальном сайте проекта, чтобы на практике убедиться во всех возможностях, которые предоставляет Blueprint.

Понятие “фреймворк” в данном контексте (имеется ввиду Blueprint) может вводить в заблуждение, так как Blueprint не поможет вам в задаче организации или написания CSS-кода.

Обзор структуры фреймворка Blueprint

Снизу вверх, перечислим CSS-слои, из которых состоит Blueprint:

  • CSS-reset - сброс стилей;
  • Типографика - предоставляет небольшой набор типографики и цветов оформления;
  • Grid - предоставляет набор CSS-классов, с помощью которых выполняется построение CSS-сетки.

Вторая часть фреймворка Blueprint - это js-скрипты, позволяющие настроить большинство деталей фреймворка, начиная с колонок и их ширины и заканчивая файловыми путями и именами CSS-классов.

Имеется два js-скрипта:

  • Compressor - для сжатия и обработки исходных файлов;
  • Validator - для валидации основных файлов фреймворка Blueprint;

Для того, чтобы начать работу с фреймворком Blueprint, необходимы (как минимум) три файла, подключенные к стартовой HTML-странице:

  • screen.css - весь CSS-код для вывода на устройства screen и projection;
  • print.css - CSS-код для печати (вывод на принтеры);
  • ie.css - немного CSS-кода для корректной работы в браузерах IE.

Пример подключения вышеперечисленных файлов к HTML-странице показан ниже:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
  <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->

Обратите внимание, что пути расположения файлов screen.css, print.css и ie.css у вас могут отличаться от приведенного в примере.

Использование CSS в фреймворке Blueprint

Как уже упоминалось выше, в фреймворке Blueprint имеются три основных CSS-слоя. Первые два CSS-слоя - это сброс стилей (reset.css) и типографика (typography.css); они применяют свое действие ко всем стандартным HTML-элементам страницы.

Другими словами, у вас нет нужды вносить какие-либо изменения в оба эти файла. Если вам, к примеру, необходимо изменить размер шрифта на странице, вы можете сделать это в своем собственном файле таблиц стилей; таким образом можно легко и безболезненно обновлять фреймворк Blueprint, не затрагивая при этом ваши собственные проекты.

Классы типографики в Blueprint

Во фреймворке Blueprint имеется небольшой набор классов для настройки типографики. Ниже приведен список имен классов с кратким описанием, для чего каждый из них предназначен:

  • .small - делает размер шрифта меньше стандартного;
  • .large - делает размер шрифта больше стандартного;
  • .hide - скрывает HTML-элемент;
  • .quiet - делает цвет текста менее ярким;
  • .loud - делает цвет текста черным;
  • .highlight - добавляет желтый фоновый цвет к тексту;
  • .added - добавляет зеленый фоновый цвет цвет к тексту;
  • .removed - добавляет красный фоновый цвет к тексту;
  • .first - удаляет padding-left и margin-left у элемента;
  • .last - удаляет padding-right и margin-right у элемента;
  • .top - удаляет padding-top и margin-top у элемента;
  • .bottom - удаляет margin-bottom и padding-bottom у элемента;

Примеры типографики в Blueprint

Стилизация форм в Blueprint

Для стилизации форм (forms.css) в фреймворке Blueprint существует два класса - .text и .title. Класс .text делает текст элемента input обычным, а класс .title делает текст поля ввода input большего размера.

Помимо этого, в Blueprint имеется несколько классов для создания и стилизации информационных сообщений и сообщений об ошибке:

  • div.error - создает сообщение об ошибке (красный блок);
  • div.notice - создает информационное сообщение (желтый блок);
  • div.success - создает сообщение об успехе (зеленый блок).

Создание сетки

Третьим слоем (grid.css) фреймворка Blueprint являются классы для создания CSS-сетки - инструмент, с помощью которого можно создать сетку практически любого вида. Имейте ввиду, что практически любой участок CSS-кода в сетке может быть изменен (как это делается, показано ниже). В этой части инструкции используются настройки по умолчанию.

По умолчанию, во фреймворке Blueprint создается сетка из 24-х колонок, каждая из которых имеет ширину в 30px; между колонками имеется расстояние в 10px, созданное через margin. Общая ширина сетки составляет 950px, что является оптимальной шириной для дисплеев размером 1024x768px. Если вас интересует более узкий размер сетки, вам нужно обратиться к разделу с объяснениями настройки Blueprint.

Отлично! Но каким образом можно установить сетку на HTML-странице с помощью Blueprint? С помощью классов, предоставляемых этим фреймворком. Для того, чтобы создать новую колонку, воспользуйтесь тегом <div> и примените к нему класс вида .span-x.

Например, если необходимо создать сетку, состоящую из трех колонок (одна на две трети общей ширины и две на одну треть общей ширины), из секции заголовка и подвала, то код должен иметь следующий вид:

<div class="container">
  <div class="span-24">The header</div>
  <div class="span-4">The first column</div>
  <div class="span-16">The center column</div>
  <div class="span-4 last">The last column</div>
  <div class="span-24">The footer</div>
</div>

Помимо класса .span-x существует еще пара классов, о которых необходимо обязательно знать. Во-первых, любой сайт, созданный с помощью Blueprint-сетки, должен иметь блок-обертку с классом .container, который, как правило, помещается сразу после тега <body>.

Во-вторых, последняя колонка в ряду (который по умолчанию может состоять из максимального числа - 24 колонок) должна иметь дополнительный класс .last для того, чтобы убрать padding-right и margin-right у последней. Колонка, имеющая класс .span-24, не нуждается в дополнительном классе .last, так как уже сама по себе занимает всю ширину сетки.

В принципе, этих знаний уже достаточно для того, чтобы создавать CSS-сетки. Но фреймворк Blueprint предоставляет гораздо больше классов для создания более сложных дизайнов. Для того, чтобы воочию увидеть, что могут из себя представлять подобные дизайны, перейдите на главную страницу проекта. На ней показаны дизайны сайтов, демонстрирующие, на что способен фреймворк Blueprint в вопросе создания сеток.

Ниже показан список дополнительных классов, которые могут пригодиться при создании сетки на Blueprint:

  • .append-x - добавляет х колонок после указанной колонки;
  • .prepend-x - добавляет х колонок перед указанной колонкой;
  • .push-x - сдвигает вправо колонку на указанное кол-во столбцов; может использоваться для смещения колонок;
  • .pull-x - сдвигает влево колонку на указанное кол-во столбцов; может использоваться для смещения колонок;
  • .border - создает границу с правой стороны колонки;
  • .colborder - создает пустую колонку, внутри которой (по середине вертикали) располагается граница border;
  • .clear - “очистка” потока;
  • .showgrid - добавьте к блоку-контейнеру или колонке для того, чтобы увидеть сетку или базовую линию

В этом списке х является числом в диапазоне от 1 до 23 применительно к классам append\prepend; и числом в диапазоне от 1 до 24 для классов push\pull. Эти значения будут меняться, если вы установите новое значение в качестве количества колонок в конфигурационном файле фреймворка.

Ниже показан еще один пример, в котором имеется четыре колонки одинаковой ширины, с границей между первыми двумя и последними двумя колонками, а также пустым промежутком (класс .append-4) посередине сетки шириной в четыре колонки:

<div class="container">
  <div class="span-5 border">The first column</div>
  <div class="span-5 append-4">The second column</div>
  <div class="span-5 border">The third column</div>
  <div class="span-5 last">The fourth (last) column</div>
</div>

Четыре колонки и класс .append-4

Конечно, можно вложить один колонки в другие, чтобы получить необходимую разметку. Ниже показан пример четырех прямоугольников, расположенных - два вверху и два внизу. Причем все четыре прямоугольника находятся внутри первой половины страницы, в то время как второй прямоугольник занимает оставшуюся вторую половину страницы:

<div class="container">
  <div class="span-12">
    <div class="span-6">Top left</div>
    <div class="span-6 last">Top right</div>
    <div class="span-6">Bottom left</div>
    <div class="span-6 last">Bottom right</div>
  </div>
  <div class="span-12 last">Second half of page</div>
</div>

Вложенность в Blueprint

Попробуйте этот код в своем браузере, если вам трудно представить в уме, как это должно выглядеть. Чтобы увидеть больше примеров использования классов фреймворка Blueprint, перейдите по адресу на нашей странице - /tests/parts/grid.html.

Скрипты

Фреймворк Blueprint имеет в своем составе два скрипта: один для сжатия и кастомизации CSS-файлов; второй для валидации CSS-файлов, составляющих основу фреймворка - это особенно полезно, если вы вручную вносили в них изменения.

Валидатор

Задача файла-валидатора предельно проста - проверить валидность основных CSS-файлов фреймворка. Для выполнения этой задачи скрипт имеет в своем комплекте версию W3C CSS валидатора. Для того, чтобы запустить скрипт, необходим установленный язык Ruby на компьютере. Скрипт запускается из терминала командой:

$ruby validate.rb

Компрессор

Так как CSS-файлы, которые используются при создании HTML-файлов, являются сжатыми, то вам необходимо снова произвести их компрессию, если вы производили в них изменения. Для этой цели служит скрипт компрессии.

В дополнение к этому с помощью файла компрессии можно настраивать CSS-сетки. Для того, чтобы настроить сетку, используется специальный файл настроек, и новый CSS-файл будет генерироваться при запуске компрессора. В новых сжатых файлах будут отражены изменения.

Для того, чтобы сжать файл, необходимо просто запустить скрипт. Скрипт выполнит парсинг основных CSS-файлов и поместит новые сжатые файлы в папку проекта Blueprint. Также как и валидатор, компрессор должен быть установлен через Ruby. После установки скрипт его можно запустить из терминала с помощью команды:

$ruby compress.rb

Вызов файла скрипта без указания дополнительных параметров произведен извлечение файлов из папки blueprint/src и произведен их сжатие до трех файлов - ie.css, print.css, screen.css. Однако, с помощью аргументов можно изменить алгоритм работы скрипта.

Например, команда:

$ruby compress.rb -h

… покажет список аргументов, которые можно использовать совместно со скриптом.

Пользовательские настройки

Узнать больше о том, как применять пользовательские настройки, можно в документации к скрипту, расположенной по адресу lib/compress.rb.

На этом статья закончена.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке