Плавный переход от простого 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.

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


При верстке макета довольно часто возникает задача создания кликабельного логотипа страницы.

Но логотип страницы, как правило, создается с использованием на все 100% фантазии дизайнера - тут и необычный декоративный шрифт, и всякие добавленные в него изображения. Поэтому на практике обычно такой логотип вырезается из psd-макета целиком, в виде картинки.

В HTML-разметке в заголовке страницы помещается текст-логотип сайта в теге первого уровня h1 - все по правилам SEO. А в таблицах стилей производится подмена текста на вырезанное из макета изображение.

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

Первоначально произведем подключение неоходимого модуля в библиотеке Compass, добавив строку импортирования в проект:

@import "compass/typography/text/replacement";

… а затем приступим к изучению миксинов.

Миксин hide-text

Первым миксином, который решает задачу замены текста изображением, является hide-text.

Синтаксис этого миксина таков:

@include hide-text([$direction])

… где необязательный аргумент $direction определяет направление скрытия текста.

Пример использования данного миксина:

 class="hidetext">
 mixin hide-text
.hidetext{
 margin: 10px auto;
 width: 640px;
 height: 426px;
 background: url(../img/cat.jpg) 0 0 no-repeat;
}

Текст с фоновым изображением

Подключим к вышеприведенному коду миксин hide-text и посмотрим на результат:

.hidetext{
...
 @include hide-text;
}

Результат замещения текста с помощью миксина hide-text

Результирующий CSS-код будет выглядеть таким образом. Добавляются смещение текста с помощью свойства text-indent с отрицательным значением; предотвращается случайное “схлопывание” блока через свойство overflow: hidden, если в нем вдруг окажутся плавающие элементы; задается расположение текста с левого края блока через свойство text-align: left, чтобы гарантировать его смещение за левый край блока через свойство text-indent:

.hidetext{
 ...
 text-indent: -119988px;
 overflow: hidden;
 text-align: left;
}

Миксин squish-text

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

Синтаксис миксина squish-text таков:

@include squish-text;

Пример использования миксина squish-text:

 class="squishtext">
 Mixin squish-text
...
.squishtext{
 color: white;
 text-align: center;
 font-size: 3em;
 font-weight: bold;
 margin: 10px auto;
 width: 640px;
 height: 480px;
 background: url(../img/girl.jpg) 0 0 no-repeat;
}

Текст с фоновым изображением

Подключим миксин squish-text и посмотрим на результат его работы:

.squishtext{
 ...
 @include squish-text;
}

Результат замещения текста с помощью миксина squish-text

Результат компилирования представленного выше SCSS-кода в CSS-код показан ниже. Довольно интересный способ скрытия текста, который стоит рассмотреть более подробно. С помощью CSS-свойства font сбрасывается на ноль размер шрифта (кегль) и межстрочное расстояние (интерлиньяж) для текста. Цвет текста через CSS-свойство color устанавливается прозрачным. В добавок гарантированно убирается тень у текста, если она у него есть (вдруг сработает наследование).

.squishtext {
 ...
 font: 0/0 serif;
 text-shadow: none;
 color: transparent;
}

Несмотря на то, что визуально результат работы миксина squish-text аналогичен работе миксина hide-text, принцип последнего более эффективен для большинства современных браузеров в вопросе замещения inline-текста.

В показанном ниже примере можно улучшить разметку, “обернув” отдельные участки текста в любой из inline-элементов (span, b или i) и добавив к нему ноебходимый класс:

 class="squish">Lorem ipsum dolor sit amet, class="squish-text"> consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  class="squish-text">in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  class="squish-text">cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

.squish{
 margin: 0 auto;
 @include margin-leader;
 max-width: 960px;
 font-family: PT Sans, sans-serif;
 .squish-text{
  color: hsla(240,100%,50%,.6);
  font-style: italic;
 }
}

Текст с отдельными участками, подлежащими скрытию

.squish{
 ...
 .squish-text{
  ...
  @include squish-text;
 }
}

В то время, как экранные программы-читалки и другие подобные инструменты могут свободно прочитать “спрятанный” текст, в окне обычного браузера он ни как не отображен:

Скрытие текста с помощью миксина squish-text

Замещение текста изображением с фиксированными размерами

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

Преимущество данного миксина заключается в автоматизированном способе установки размеров для элемента в соответствии с размерами используемого изображения. Для этой цели в библиотеке Compass имеется миксин с говорящим названием replace-text-with-dimensions:

@include replace-text-with-dimensions();

Проиллюстрируем применение миксина replace-text-with-dimensions:

 class="replace_dimensions">
 replace-text-with-dimensions

Текст с непримененным миксином replace-text-with-dimensions

.replace_dimensions{
 @include replace-text-with-dimensions(alsatian.jpg);
}

Не забудьте активировать строку relative_assets = true в конфигурационном файле config.rb, чтобы сработали относительные пути для изображений!

Текст с примененным миксином replace-text-with-dimensions

Мне кажется, было бы очень любопытно взглянуть на результирующий код компиляции в CSS. Видим, что на изображение указывает корректная ссылка; а также, что у изображения установлены правильные ширина (width) и высота (height). Все это благодаря Compass!

.replace_dimensions {
 text-indent: -119988px;
 overflow: hidden;
 text-align: left;
 background-image: url(../img/alsatian.jpg?1400248446);
 background-repeat: no-repeat;
 background-position: 50% 50%;
 width: 640px;
 height: 470px;
}

Замена текста изображением в HTML5 Boilerplate

За годы существования веб-разработки было создано немало оригинальных способов замещения текста изображением. На сегодняшний день наиболее лучшим способом является техника, представленная в хорошо известном проекте HTML5 Boilerplate.

Ниже показан пример исходного CSS-кода, взятого из “HTML5 Boilerplate”, в котором показаны в виде классов различные способы замещения текста изображением. В каждом случае кратко описываются преимущества каждого из способов:

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}
// Скрыть текст от экранных читалок и браузеров
.hidden {
  display: none !important;
  visibility: hidden;
}
// Скрыть текст только визуально, но оставить доступным для экранных читалок
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
// Расширение класса .visuallyhidden благодаря возможности для элементов получать фокус с клавиатуры
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
// Скрыть текст визуально и от экранных читалок, но оставить нетронутой HTML-разметку
.invisible {
  visibility: hidden;
}

На этом все. Данная статья является вольным переводом отдельной главы из книги Ben Frain “Sass and Compass for Designers”.


В первую очередь, что за загадочное слово - permalink? Все просто - это сокращение от permanent link - постоянная ссылка.

Постоянные ссылки нужны в системе WordPress для того, чтобы указывать на одну и ту же запись в перемещающейся ленте записей. При первоначальной настройке WordPress одной из задач является вопрос с постоянными ссылками. По умолчанию в WordPress permalink имеют ужасающий вид:

http://localhost/word1/?p=123

Ужасающий в том смысле, что такая ссылка для человека совершенно не читаемая. Сможете ли вы сказать, что находится по адресу, указанному в этой ссылке? Конечно нет!

Это для системы CMS WordPress понятно, что в этой ссылке указан адрес на пост с id=123 (порядковый номер записи 123). И если система покопается в своей базе данных, то она (может быть) найдет запись с таким идентификатором и выдаст ее “на гора”. А для человека такая запись ни о чем не говорит.

Поэтому в настройках WordPress имеется специальный раздел, в котором можно настроить вид постоянных ссылок на понятный человеку (ЧПУ - Человеко-Понятный Урл). Размещен этот раздел по адресу “Настройки” - “Постоянные ссылки”.

Система WordPress предлагает на выбор пять вариантов постоянных ссылок (permalink) - один по умолчанию и четыре готовых (на выбор):

  • День и название поста - http://localhost:7788/third/2014/04/20/sample-post/
  • Месяц и название поста - http://localhost:7788/third/2014/04/sample-post/
  • Цифры - http://localhost:7788/third/archives/123
  • Название записи - http://localhost:7788/third/sample-post/

По большому счету, с каждым из этих четырех видов permalink все понятно. Я имею ввиду, в каком виде она предоставляет ссылку.

Но, помимо этих четырех permalink, имеется еще один вариант:

  • Произвольно - http://localhost:7788/third

В этом случае администратору сайта предоставляется возможность настроить вид permalink произвольно, руководствуясь специальными переменными. Ниже приведен список таких переменных, с указанием примера в скобках:

  • %year% - год публикации записи (2014)
  • %monthnum% - порядковый номер месяца публикации записи (05)
  • %day% - порядковый день месяца публикации записи (21)
  • %hour% - час публикации записи (09)
  • %minute% - минута публикации записи (12)
  • %second% - секунда публикации записи (13)
  • %post_id% - идентификатор записи (123)
  • %postname% - имя записи (about-the-permalink)
  • %category% - категория записи (wordpress)
  • %author% - автор записи (zencoder)
  • %tag% - метка записи (css)

Благодаря этим переменным можно создать permalink практически любого вида и под любые потребности.

К примеру, для блога с регулярными записями без тематики подойдет permalink следующей конструкции:

/%year%/%monthnum%/%day%/%postname%/
// Пример:
http://localhost:7788/third/%year%/%monthnum%/%day%/%postname%/

Для блога с нерегулярными записями и записи без тематики подойдет permalink вида:

/url/%postname%/
// Пример:
http://localhost:7788/third/url/%postname%/

Для блога с регулярными тематическими записями подойдет краткий permalink:

/%category%/%postname%/
// Пример:
http://localhost:7788/third/%category%/%postname%/

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

Еще одним важным моментом при самостоятельной настройке permalink является то, что любая из них должна заканчиваться переменной %postname% или %post_id%. В этом случае каждая из существующих в системе WordPress permalink будет указывать на конкретную запись. Если вы посмотрите на примеры выше, то заметите, что ссылки построены именно по такому принципу.

Данный материал является отрывком из книги Криса Койера “Digging Into WordPress”, пересказанным автором сайта своими словами.

На этом все.


Вот плавно и постепенно, стараясь без рывков и пробелов в познаниях front-end, я подошел к теме модульных сеток на CSS. Очередные мысли по поводу верстки для начинающего верстальщика.

Зачем я подошел к этой теме? Для чего нужны модульные сетки для верстальщика? Ответ прост - сегодня по крайней мере половина всех дизайнов верстается по такой сетке. Зачем это делается? Для быстроты процесса верстки и стандартизации этого же самого процесса. Сама идея модульной сетки далеко и далеко не новая - в типографии она была разработана еще в прошлом веке (если я не ошибаюсь). Благодаря такой сетке упорядочивается расположение всех элементов текста (изображений) на странице журнала, газеты и т. д.

Чтобы воочию представить себе модульную сетку в типографии, возьмите любой журнал или статью и внимательно посмотрите на любую его(ее) страницу. Вы сразу обратите внимание, что колонки текста, заголовки, фотографии на странице располагаются не хаотично, а в некотором порядке. Если попытаться начертить границы между блоками контента, то можно увидеть определенную блочную структуру:

Выдуманный пример разметки журнальной страницы

Рисунок выше - самый что ни на есть истинный пример модульной сетки. Блоки на этом рисунке могут быть блоками текста или изображениями. И такое расположение блоков информации на странице вполне может иметь место быть в реальной жизни.

Кстати, а почему модульные? Откуда такое название? Все просто - под модулем в таких сетках подразумевается “кирпичик”, основа сетки. Минимальная единица “измерения”, которая является основой этой сетки.

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

Сетка в электронной таблице MS Excel тоже является модульной структурой, в основе которой лежит ячейка этой сетки. Таблица в Excel может увеличиваться или уменьшаться с шагом, равным размеру ячейки этой таблицы.

Как очень хорошо известно, CSS - это типография, перешедшая в Интернет. Многие термины и понятия также перекочевали из типографии в технологию CSS: размер шрифта, межстрочное расстояние и т. д. Не стала исключением модульная сетка.

В один прекрасный момент веб-дизайнеры поняли, что не стоит изобретать велосипед. Что создание макета веб-страницы в коде HTML&CSS гораздо удобнее, проще и быстрее выполнять по модульной сетке, нежели “тасовать” блоки произвольно. Кроме того, сам дизайн страницы получается более стандартизированным, унифицированным; подчиненным одним и тем же, единым правилам.

С помощью кода на CSS была сделана попытка воспроизвести модульную сетку в Веб и применить ее на практике. Первой такой (насколько я знаю) попыткой была система 960 Grid System:

Модульная сетка на CSS

При первом взгляде на рисунок (не знаю, как у вас), у меня сразу возник вопрос - “а где же здесь сетка?” Сетка, сетка - это и есть сетка, спроектированная под особенности Веб! Ведь вы хорошо знаете, что в макете веб-страницы имеет значение только ширина блоков контента; высота же блоков является величиной переменной, она меняется в зависимости от количества контента, наполняющего эти блоки; она почти никогда не задается жестко, фиксировано. Поэтому в данном случае строки сетки совсем ни к чему - остаются только колонки.

Как уже упоминалось выше, модульная сетка пришла в CSS из типографии; понятия, связанные с модульной сеткой, также пришли из типографии.

В модульной сетке имеются всего три параметра:

  • container (контейнер)
  • column (колонка)
  • gutter (канавка)

Структура модульной сетки на CSS

Видим, что основной блок-обертка (container) содержит в себе 12 колонок (column). Содержимое (контент) располагается в этих колонках. Колонок может быть не обязательно 12; другими популярными величинами являются 16 колонок и 24 колонки:

Модульная CSS-сетка из 16 колонок

Модульная CSS-сетка из 24 колонок

Откуда такие величины - 12, 16 и 24 колонки? Во-первых, они взяты из математических расчетов, на которых основана модульная сетка. А во-вторых, такие значения наиболее применимы на практике.

Колонки разделяются между собой промежутками (gutter). Как правило, самые крайние отступы от колонок равны половине gutter - gutter/2.

Колонки можно объединять между собой - две колонки объединить в одну, три колонки объединить в одну и так далее. В результате получаются ячейки сетки - блоки с контентом. Чтобы визуально разъяснить (если еще непонятно) этот вопрос, посмотрите на рисунок ниже:

Пример блочной верстки на основе CSS-сетки

Вот и получается примерный вид блочной верстки страницы на основе модульной CSS-сетки.

Ну, это было краткое теоретическое введение в модульные CSS-сетки. Задачей данной статьи не являются теоретические основы подобных сеток, так как уже давно написаны прекрасные материалы (с не менее прекрасными иллюстрациями) по этой теме другими людьми. В этой же статье мы попытаемся осуществить практическое применение таких сеток и воспользуемся одной из старейший из них - 960 Grid System (сокращенное название - 960gs).

Получение модульной сетки 960gs

Первым шагом необходимо получить копию заготовки (шаблон) данной модульной CSS-сетки. Для этого заходим на сайт проекта 960gs и скачиваем оттуда заготовку, нажав большую кнопку посередине с надписью - ‘Big ol’DOWNLOAD button :)’. Получаем на свой компьютер архив с именем 960-Grid-System-master.zip.

Кстати, а почему такое название у этой модульной сетки - 960 Grid System? Все просто, здесь цифра 960 - это ширина блока-обертки container в 960px, наиболее приемлемая ширина страницы сайта для мониторов с разрешением 1024x768px. На время создания этой модульной CSS-сетки большинство сайтов делалось фиксированной ширины для наиболее популярного разрешения мониторов - 1024x768px.

Разархивируем этот пакет и взглянем на его содержимое:

  • app_plugins
  • code
  • licenses
  • logo_files
  • sketch_sheets
  • templates
  • .gitignore
  • README.txt

В папке app_plugins находятся плагины под два графических редактора - Fireworks и Photoshop. Цель плагинов - будучи установленными в эти программы, помогать создавать макеты сайтов на основе модульной сетки 960gs. Это помощь для дизайнеров, которые рисуют макеты будущих сайтов.

В папке licenses располагаются тексты лицензий, под которыми распространяется данная модульная сетка.

В директории logo_files находятся логотип 960 Grid System в разных форматах - .ai, .eps, .png и .psd. Как пишется сам автор 960gs - Nathan Smith, этот логотип был создан и предоставлен в бесплатное пользование всем желающим по многочисленным просьбам “трудящихся”.

Есть также заготовки модульной сетки в виде линованной бумаги с колонкой для комментариев. Эти заготовки помещены в папку sketch_sheets в формате .pdf и готовы для того, чтобы их распечатать и пользоваться. Видимо, это тоже было сделано по просьбам “трудящихся”, которые любят создавать наброски макета на бумаге с помощью ручки или карандаша.

А вот для настоящих IT-ов имеется директория templates, в которой расфасованы точно такие же макеты, но в электронном виде, под самые разные wireframe-программы. Количество впечатляет - тут и Balsamiq, и Photoshop, Firework и Illustrator; под Gimp на Linux и под Omnigraffle на Mac OS X; пользуйся не хочу, что называется.

Но мы вернемся к самой главной папке, которую мы пропустили - code. Там находится то, ради чего мы и затеялись с этой модульной сеткой 960gs - готовые файлы с кодом этой самой сетки. Файлы формата HTML (demo.html, demo_24_col.html, demo_24_col_rtl.html, demo_rtl.html) можно посмотреть, но интереса они представляют мало - как понятно из их названия, это всего лишь демо-файлы. В папке img находятся три файла формата .gif: 12_col.gif, 16_col.gif, 24_col.gif. Задача этих файлов - “подкладывать” их в виде фона для блока .container_12 (или .container_16 или .container_24) для того, чтобы удобно было визуально видеть эту самую сетку при верстке.

Папка CSS имеет список файлов формата CSS:

  • 960.css
  • 96012col.css
  • 96012col_rtl.css
  • 96016col.css
  • 96016col_rtl.css
  • 96024col.css
  • 96024col_rtl.css
  • 960_rtl.css
  • demo.css
  • reset.css
  • reset_rtl.css
  • text.css
  • text_rtl.css

… и подпапку min, в которой содержится точно такой же список файлов. Разница между первым и вторым списком в том, что первый список - это developer-версия, а второй - production-версия.

Внимательный читатель спросит - а что это за суффикс странный у некоторых файлов CSS - rtl. Ну, даже новичкам (которые в теме) должно быть понятно, что это right-to-left, стили для создания дизайна, в котором текст пишется и располагается справа налево. Таки если вы не собираетесь иммигрировать на историческую родину, то эти стили вам никогда не пригодятся, по большому счету!

Эти файлы формата CSS является тем самым, ради чего мы заходили на оф. сайт - это и сеть модульная сетка 960gs! Можно открыть их в HTML-редакторе и просмотреть исходный код - он очень короткий и простой.

Построение верстки на основе модульной сетки 960gs производится с помощью классов, расположенных в главном файле 960_12_col.css (или 960_16_col.css, или 960_24_col.css). Классов в модульной сетке 960gs не так уж много - точнее, их совсем мало:

  • .container12 (.container16, .container_24)
  • .grid_х
  • .push_х
  • .pull_х
  • .alpha
  • .omega
  • .prefix_х
  • .suffix_х
  • .clear

Эти классы - своего рода рычаги, с помощью которых можно управлять созданием верстки:

  • Класс .container_12 создает блок-обертку шириной 960px, расположенную по центру окна браузера, состоящую из 12 колонок. Аналогично классы .container_16 и .container_24 также создают обертку шириной 960px, но состоящую из 16 и 24 колонок, соответственно.
  • Класс .grid_х - это общее представление (можно сказать - формула) для создания ячеек модульной сетки. В качестве х может быть значение от 1 до 12 (в 12-колоночной сетке), от 1 до 16 (в 16-колоночной сетке), от 1 до 24 (в 24-колоночной сетке). Задав значение вместо х, создается ячейка шириной х колонок. То есть, .grid_2 создает ячейку шириной 2 колонки; .grid_10 - создает ячейку шириной в 10 колонок. Естественно, значение х не может превышать общее число колонок в контейнере. То есть, в контейнере с классом .container_12 может быть класс .grid_12, но не больше. В контейнере с классом .container_16 может быть класс .grid_16, но не больше. Аналогично с контейнером класса .container_24.
  • Класс .push_х “сдвигает” ячейку вправо на указанное количество колонок. То есть, класс .push_4 “отодвигает” ячейку вправо на 4 колонки.
  • Класс .pull_х “сдвигает” ячейку влево на указанное количество колонок. Например, .pull_3 сдвинет ячейку влево на три колонки.
  • Классы .alpha и .omega просты - они убирают отступы у ячейки слева и справа, соответственно.
  • Классы .prefix_х и .suffix_х добавляют пустое пространство (расширяют) ячейку слева и справа, соответственно.
  • Класс .clear служит для “очистки” содержимого после плавающего блока.

Давайте от теории перейдем к практике и создадим каркас обычного трех-колоночного макета, в котором “шапка” и “подвал” будут занимать всю ширину страницы:

Пример простого трех-колоночного макета

Из скачанного архива 960-Grid-System-master.zip нам потребуются файлы:

  • text.css (в нем находятся все правила по типографике)
  • reset.css (файл сброса стилей для браузеров)
  • 960_24_col.css (модульная CSS-сетка на 24 колонок)
  • 24_col.gif (фоновая картинка, рисующая 24 колонок в основном блоке .container_24)

Выбираем их оттуда и раскладываем по папкам нашего собственного проекта:

  • css:
    • text.css
    • reset.css
    • 96024col.css
  • img:
    • 24_col.gif

В шапке header файла index.html производим последовательное подключение полученных файлов. Только один из них - style.css - мы создадим самостоятельно, для написания своих собственных CSS-стилей. Все остальные файлы оставим без изменения - так и нужно поступать с файлами данного фреймворка (и не только этого):

 rel="stylesheet" type="text/css" href="css/reset.css" />
 rel="stylesheet" type="text/css" href="css/text.css" />
 rel="stylesheet" type="text/css" href="css/960_24_col.css" />
 rel="stylesheet" type="text/css" href="css/style.css" />

Затем создадим HTML-структуру страницы, применив знания классов, которые были рассмотрены выше. Шапке сайта задаем класс .grid_24, чтобы она заняла всю ширину 24-колоночного блока. Затем создаем левый блок шириной в 8 колонок с помощью класса .grid_8, центральный блок шириной в 13 колонок с помощью класса .grid_13, правый блок шириной в 3 колонки через класс .grid_3. И внизу помещаем “подвал” сайта опять на всю ширину страницы с помощью класса .grid_24:

 class="container_24">
 
   class="grid_24">
 
   class="grid_8 leftSideBar">
   class="grid_13">
   class="grid_3 rightSideBar">
 
   class="grid_24">

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

.container_24{
 background: url(../img/24_col.gif) top left repeat;
 margin-top: 10px;
}
header{
 background-color: hsla(120,100%,50%,.4);
 min-height: 100px;
 margin-bottom: 10px;
}
.leftSideBar, .rightSideBar, main{
 min-height: 300px;
 margin-bottom: 10px;
}
.leftSideBar{
 background-color: hsla(240,100%,50%,.5);
}
main{
 background-color: hsla(180,100%,50%,.4);
}
.rightSideBar{
 background-color: hsla(300,100%,50%,.3);
}
footer{
 background-color: hsla(60,100%,50%,.7);
 min-height: 50px;
}

На официальном сайте проекта 960gs имеется ссылка на слайд-шоу, в котором есть несколько интересных примеров создания разметки с помощью 960gs. Давайте разберем их - кусочки кода, которые можно применить на практике (кстати, именно такое предназначение имеют сниппеты).

Простой пример колонок

Очень простой пример создания двух рядов с тремя и двумя ячейками на всю ширину страницы:

Два ряда с колонками на всю ширину страницы

Для этого создаем такую разметку:

 class="container_12">
 
  class="grid_4">
  

1/3 ширины блока .container

class="grid_4">

1/3 ширины блока .container

class="grid_4">

1/3 ширины блока .container

class="clear"> class="grid_6">

1/2 ширины блока .container

class="grid_6">

1/2 ширины блока .container

… и CSS-код:

.container_12{
 background: url(../img/12_col.gif) top left repeat;
 margin-top: 10px;
}
div[class^="grid"]{
 min-height: 100px;
 text-align: center;
 line-height: 100px;
}
div[class="grid_4"]{
 background-color: hsla(120,100%,50%,.4);
}
div[class="grid_6"]{
 background-color: hsla(240,100%,50%,.4);
}

Ячейки, обернутые другой ячейкой

Простой пример обертывания ячеек с сетке еще одной - общей ячейкой, которая может служить для придания общего фона для всех элементов внутри блока. Стоит обратить внимание на применение двух классов alpha и omega для первого и последнего блоков. С помощью этих классов убираются отступы слева и справа от этих крайних блоков. Если не добавить эти классы, то верстка поломается:

Обертывание ячеек в 960gs

HTML-код:

 class="container_12">
 
  role="wrap" class="grid_12">
   class="grid_3 alpha">
   

Part_1

class="grid_3">

Part_2

class="grid_3">

Part_3

class="grid_3 omega">

Part_4

… и CSS-код:

.container_12{
 background: url(../img/12_col.gif) top left repeat;
}
div[role="wrap"]{
 background-color: hsla(120,100%,50%,.3);
 padding: 10px 0;
 margin-top: 10px;
}
div[class^="grid_3"]{
 background-color: hsla(240,100%,50%,.4);
}

Смещение ячеек в 960gs

Перемещение ячеек в сетке 960gs

Интересный пример перемещения ячеек в модульной сетке 960gs. Если внимательно посмотреть на пример, то станет заметно, что фиолетовый блок с надписью Last (последний) стоит на первом месте в ряду. Достигнуто это благодаря двум классам .push и .pull. Если не вдаваться в код, стоящий за этими двумя классами, то их назначение запомнить легко: push - толкать (толкаем, двигаем ячейки слева направо), pull - тянуть (тянем, двигаем ячейки справа налево). В этом примере было произведено взаимное замещение двух ячеек - они поменялись местами.

HTML-код:

 class="container_12">
 
  role="first" class="grid_6 push_6">
   class="grid_2 alpha">
   

Grid_1

class="grid_2">

Grid_2

class="grid_2 omega">

Grid_3

role="last" class="grid_6 pull_6"> Last

… CSS-код:

.container_12{
 background: url(../img/12_col.gif) top left repeat;
 margin-top: 10px;
}
div[class^="grid"]{
 min-height: 100px;
}
div[role="first"]{
 background-color: hsla(120,100%,50%,.3);
}
div[role="last"]{
 background-color: hsla(240,100%,50%,.3);
}
div[class^="grid_2"]{
 background-color: hsla(180,100%,50%,.2);
}

Создание рамки вокруг ячейки в 960gs

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

Ячейка с рамкой в 960gs

HTML-код:

 class="container_12">
 
  role="top" class="grid_7">
   role="border">
   

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, voluptatum, minus dolor eaque officiis quis placeat commodi unde minima recusandae amet velit dolorem perferendis quibusdam dolorum! Saepe iste nisi nobis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, iusto, id veniam non quas nesciunt laborum error debitis ipsam delectus sequi incidunt sunt et iste nulla deserunt vitae aut beatae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ab, totam, labore, odio accusamus excepturi repellendus porro deserunt ut nisi molestiae molestias quibusdam accusantium saepe doloribus perspiciatis aliquid voluptatum sit?

role="top" class="grid_5"> role="border" class="banner">

… CSS-код:

.container_12{
 margin-top: 10px;
}
div[role="top"]{
 background-color: hsla(120,100%,50%,.3);
}
div[role="border"]{
 border: 10px solid #e5e5e6;
 height: 280px;
}
 div[role="border"] p{
  margin: 10px;
  padding: 5px;
  background-color: hsla(0,0%,0%,.3);
  border-radius: 5px;
 }
 div[role="border" ][class="banner"]{
  background: url(../img/weiss.jpg) top left no-repeat;
 }

Ячейка с обтеканием в 960gs

И напоследок еще один пример, на этот раз с примером отмены обтекания. Обратите внимание на два последних ряда. В предпоследнем намеренно сделано три ячейки, чтобы ширина страницы не была заполнена до конца. После этого ряда добавлен блок с классом clear, чтобы предотвратить смещение ячеек следующего ряда в это пустое пространство. Это одно из предназначений класса clear в системе 960gs.

Отмена обтекания ячейки в 960gs

HTML-код:

 class="container_24">
 
  class="grid_24 navbar">
   class="grid_12 push_2 alpha header">
class="grid_6 push_5 omega header"> class="grid_24 content"> class="grid_10 alpha leftColumn"> class="grid_4 pull_9 label"> class="grid_11 push_3 rightColumn omega"> class="grid_6 topic"> class="grid_6 topic"> class="grid_6 topic"> class="clear"> class="grid_6 subtopic"> class="grid_6 subtopic"> class="grid_6 subtopic"> class="grid_6 subtopic">

… CSS-код:

.container_24{
 background: url(../img/24_col.gif) top left repeat;
}
.navbar{
 margin-top: 5px;
 margin-bottom: 10px;
 padding: 10px 0;
 background-color: hsla(240,100%,50%,.2);
}
.header{
 min-height: 50px;
 background-color: hsla(120,100%,50%,.7);
}
.content{
 background-color: hsla(60,100%,50%,.2);
 padding: 15px 0;
 margin-bottom: 10px;
}
.leftColumn{
 background-color: hsla(300,100%,50%,.5);
 min-height: 100px;
}
.rightColumn{
 background-color: hsla(180,100%,50%,.3);
 min-height: 150px;
 margin-top: -60px;
}
.label{
 background-color: hsla(0,0%,0%,.5);
 min-height: 50px;
 margin-top: 10px;
}
.news{
 background-color: hsla(0,0%,0%,.3);
}
.topic{
 background-color: hsla(0,0%,0%,.5);
 min-height: 80px;
}
.subtopic{
 background-color: hsla(30,100%,50%,.4);
 min-height: 80px;
}
.border{
 padding: 0 10px;
}

Вот и все. Объемной получилась статейка!


Короткая статья, посвященная условным комментариям. Такие комментарии до сих пор активно применяются на практике и имеют отношение исключительно к браузерам семейства Internet Explorer (IE).

Точнее - условные комментарии и являются изобретением фирмы ООО “Микрософт”, призванным помочь браузерам этой конторы более-менее адекватно обрабатывать веб-сайты. Откуда такое странное название - условный комментарий? Его можно расшифровать как слияние двух слов:

  • условие;
  • комментарий;

Условие - это как обычное условие if в любом языке программирования (в том же JavaScript, к примеру). А комментарий - это как обычный комментарий в HTML-документе:

-- Это комментарий в HTML -->

Синтаксис условного комментария

Сочетание условия и комментария в итоге получило название условного комментария. Синтаксис можно представить примером ниже:

--[if lte IE 8]>
 ...
endif]-->

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

Начинается (if) условный комментарий со строки:

--[if lte IE 8]>
 <p>... после которой идет HTML-код. Заканчивается (<strong>endifstrong>) условный комментарий строкой:p>
endif]-->

Реальный рабочий пример условного комментария можно привести ниже. Например, таким образом:

--[if lte IE 8]>
 <link rel="stylesheets" type="text/css" href="css/ie.css" media="screen, projection">
endif]-->

Расшифровать подобный условный комментарий можно таким образом: “если браузером посетителя является Internet Explorer версии 8 или ниже, то следует загрузить таблицу стилей ie.css, расположенную по адресу css/”.

Цель создания условных комментариев

Условные комментарии понимают только браузеры семейства IE. Для других браузеров (таких как Chrome, Firefox или Opera) такие строки являются обычным HTML-комментарием, который они просто опускают (проходят мимо него).

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

Зачем понадобилась такая особенность именно для браузеров IE, много говорить не надо. Все хорошо знают, что IE версии 6-9 отображают HTML-страницы не всегда в соответствии с веб-стандартами.

Поэтому был придуман обходной маневр, призванный не нагружать “правильные” браузеры Chrome, Firefox или Opera лишним кодом, предназначенным только для браузера IE.

Ключевые слова в условных комментариях

Условие в условном комментарии создается с помощью специальных слов, запомнить значение которых очень легко, так как их всего четыре:

  • lt - меньше (<)
  • lte - меньше или равно (<=)
  • gt - больше (>)
  • gte - больше или равно (>=)

То есть, запись вида:

--[if lte IE 7]>
 ...
endif]-->

… читается как: “если браузер IE версии 7 или ниже (версия 6 или 5), то применить код внутри комментария”.

Или же:

--[if lt IE 9]>
 ...
endif]-->

… “если версия браузера IE меньше 9, то применить код внутри комментария.

С записями - IE 6, IE 7, IE 8, IE 9 - думаю, все должно быть понятно без объяснений: Internet Explorer 6 (IE 6), Internet Explorer 7 (IE 7), Internet Explorer 8 (IE 8), Internet Explorer 9 (IE 9).

Заключение

Более подробно и обстоятельно об условных комментариях можно почитать из первоисточника (очень логично и правильно так сделать) - About conditional comments. Правда, оригинал написан на языке Шекспира, но кто не владеет им, может разобраться и так.

Стоит также заметить, что на оф. сайте Microsoft говориться о том, что в браузере IE начиная с версии 10 прекращается поддержка условных комментариев - Условные комментарии более не поддерживаются. То есть, браузер IE10 не сможет понять условный комментарий в HTML-документе и пропустит его, посчитав обычным комментарием.

Насколько я могу лично судить о таком шаге, вызван он тем, что в компании Microsoft уверены в том, что браузер версии 10 сможет правильно работать в соответствии с W3C-стандартами и “костыль” в виде условного комментария ему больше не требуется.

На этом все.