Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 960gs. Недавно где-то в комментариях сказали, что 960gs сложнее в понимании, чем blueprint, что меня удивило. Я не хочу заниматься сравнением этих фреймворком, хотя бы потому, что они выступают в разных весовых категориях, однако, для построения модульной сетки ничего легче и проще в понимании, чем 960gs я не видела.
Про модульные сетки на Хабре, кажется, писали, да вот что-то поиск подкачал, всякая фигня находится, вроде «Философской геометрии». Вот навскидку несколько ссылок:
Так как я сама программист, то, надеюсь, матерые верстальщики и дизайнеры простят мне некоторые оплошности, если они вдруг допущены ниже по тексту. Весь код я убрала на pastie.org, во-первых, Хабр не дает разместить статью целиком из-за большого количества тегов при подстветке кода, во-вторых, код не будет напрасно раздувать статью.
960gs получил свое название из-за выбора Натаном Смитом (Nathan Smith), автором фреймворка, полной ширины контейнеров по-умолчанию в 960 пикселей. Однако, 960 px – совсем не железное ограничение.
Все элементы 960gs описаны как классы для css. Очевидно, использовать их следует как <тег class=«960gs_someclass»>.
В данной статье я буду использовать код фреймворка с официального сайта, 960.gs/css/960.css. Для чтения и понимания статьи этот код смотреть совсем не обязательно, в конце повествования я остановлюсь на способах получения css-кода подробнее.
В примерах, в качестве элементов разметки, я буду использовать дивы, а, для удобства – называть такие дивы по имени их 960gs-класса. К примеру, див с классом .container_12 я буду называть элементом container. Надеюсь, эта небольшая вольность найдет понимание в глазах гуру от верстки.
Так же, при описании параметров элементов фреймворка, я буду описывать только параметры оригинального css-кода. Разумеется, верстальщик волен менять их или дополнять новыми свойствами так, как ему будет нужно.
При переводе, элемент grid получил название «ячейка», что несколько далеко от дословного «сетк��», зато звучит не так уродливо и гораздо ближе к реальному назначению. Сравните: «поместить три сетки в одну строку» и «поместить три ячейки в одну строку».
Надеюсь с шероховатостями покончено, поэтому перехожу непосредственно к теме данной статьи.
Container
Контейнер – корневой элемент разметки 960gs, задающий параметры для модульной сетки. «Корневой элемент» — означает, что только дочерние по отношению к нему элементы фреймворка будут участвовать в формировании модульной сетки, «задающий параметры» — означает, что все элементы фреймворка, что находятся внутри контейнера, подчиняются его параметрам единообразным образом.
Контейнер с 12 колонками может выглядеть так:
Контейнер задает следующие параметры для модульной сетки:
Все остальное оставлено на волю дизайнера.
На одной странице могут находиться сразу сколько угодно контейнеров как с одинаковыми параметрами, так и с разными (очевидно, у дизайнера должны быть очень веские причины использовать несколько разных модульных сеток на одной странице).
Несколько контейнеров удобно использовать, к примеру для того, что бы разделить страницу на области на шапки/основного содержимого/подвала (header/content/footer).
Вложенные контейнеры в рамках идеологии 960gs являются абсурдом (представьте себе вложенные <body> в html), однако путем манипуляций с отступам в css вложить контейнеры друг в друга возможно. Вот только зачем?
В дальнейшем, я буду использовать контейнер с параметрами:
- Ширина колонки: 60px
- Кол-во колонок: 12
- Ширина канавки: 20px
- Ширина контейнера = (60*12) + (20 * 11) + (20/2 * 2) = 960px
Пример кода контейнера:
<div class="container_12" />
На этапе разработки удобно использовать в качестве background-image контейнера картинку-сетку, взять которую можно, например, на официальном сайте (про это будет написано немного дальше). Правда, только для стандартных 12 и 16 колоночных макетов.
div.container_12 { background: #fff url("/img/12_col.gif") repeat-y; }
Grid
Grid – один из двух базовых элементов разметки, предназначенный для расположения html-элеменов на модульной сетке контейнера. Ячейка (grid), всегда ориентирует свое содержимое в горизонтальной плоскости по отношению к контейнеру. Одна ячейка может занимать как одну колонку модульной сетки, так и все сразу, названия классов отражают данное свойство: для ячейки, занимающей одну колонку, класс будет иметь имя grid_1, для ячейки в две колонки – grid_2, для пятиколоночной ячейки — grid_5 и т.д. Следоватльно, в общем виде мы можем представить класс, как grid_X, где X – необходимая нам ширина ячейки в колонках модульной сетки. Рассмотрим пример с сетками grid_1, grid_6 и grid_12 соответственно:
pastie.org/780079
Одна ячейка вполне себе может соседствова��ь с другими ячейками по горизонтали, при условии, что они все вместе покрывают колонок не более, чем есть в контейнере:
pastie.org/780086
Будьте бдительны, если колонок требуется больше, чем есть у контейнера, крайние правые ячейки, не влезающие по размеру в одну строчку, будут насильно низвергнуты на строку ниже.
pastie.org/780088
Любознательные читатели могут заглянуть в css код и узнать, что формируются канавки с помощью margin’а, в отличие от ячеек, для которых нужен html-элемент. Впрочем, я надеюсь, это было очевидно всем.
Агрессивные верстальщики могут с негодованием переименовать в коде фреймворка все упоминания grid_ на, к примеру, cell_, что, на мой взгляд, ближе к истине, а так же более наглядно.
Clear
Вероятно, все, кто читал предшествующий код заметили, что в нем появился новый элемент:
<div class="clear" />
Clear – второй базовый элемент разметки 960gs. Что бы понять, что же делает clear, рассмотрим следующую ситуацию: я попытаюсь переписать последний пример, не используя clear, для удобства добавив контейнеру красный ободок.
pastie.org/780092
Хм, контейнер не растянулся дочерними ячейками, а остался худеньким и одиноким. Следовательно, первая задача clear – растягивать родительский контейнер до ожидаемых размеров. Теперь, предлагаю посмотреть внимательно на первый пример из раздела grid, в котором каждая ячейка единолично занимает всю строчку. Из этого примера логично сделать вывод, что вторая задача clear – завершать текущую строку, независимо от того, сколько в ней осталось свободных колонок.
Из этих двух правил следует хорошая привычка при работе с 960gs всегда завершать любую строку с помощью clear, даже если эта строка последняя или единственная в контейнере.
Не секрет, что дивы с классом clear используются верстальщиками относительно часто. Для того, что бы избежать возможных конфликтов между кодом всего сайта и кодом 960gs в будущем, вероятно, верстальщику следует либо переименовать в коде css файла фреймворка класс clear на какой-нибудь другой (к примеру, на clr), либо уточнить его, (например, .container_12 .clear). Всё же, по моему мнению, переименование в случае вероятных конфликтов – более подходящий способ.
Далее я перечислю все дополнительные классы для элемента grid. Дополнительные они потому, что существуют только как добавочные классы к основному классу grid_X. К примеру,
<div class="grid_2 alpha" />
Alpha и Omega
Иногда встречаются ситуации, когда необходимо вложить в одну ячейку несколько других. Как пример: нам нужны две очень длинные сплошные ячейки по бокам, в высоту занимающие 10 строк, и по одной ячейке в середине, на каждой из десяти строк.
В таких случаях следует использовать классы alpha и omega. Суть проста – если в ячейку мы вкладываем несколько других ячеек, то у первой вкладываемой ячейки нужно поставить класс alpha, а у последней, очевидно, omega.
pastie.org/780095
Кстати, пример является одним из редких случаев необходимости использования тега <br>.
Если нужно вложить только одну ячейку, достаточно использовать только класс alpha, без omega.
Prefix, Suffix, Push и Pull
Эти четыре дополнительных класса, по сути, являются более абстрактной заменой padding-left, padding-right, left и right соответственно. Стоит отметить, что пользоваться этими классами гораздо удобнее, чем вычислять нужные отступы в уме или на калькуляторе.
Все они имеют названия классов, сходные с названиям классов ячеек: имякласса_X, где Х – количество столбцов модульной сетки.
Рассмотрим простой пример:
pastie.org/780097
А теперь применим к каждой из ячеек со стишком классы prefix_1, suffix_1, push_1 и pull_1 соответственно:
pastie.org/780099
Вот и всё, в статье были перечислены все возможности 960gs, осталось рассмотреть лишь несколько моментов.
Во-первых, скачать код с примерами из статьи можно по адресу www.mediafire.com/?2jfqdxdtqow
Во-вторых, адрес сайта фреймворка: 960.gs. Там же, нажав на download вы получите css файл с двумя видами стилей (12 и 16 колоночными), а так же кучу всего в добавок, включая шаблоны для множества графических редакторов.
В-третьих, по адресу www.spry-soft.com/grids расположен чудесный генератор модульных сеток на основе 960gs, который, в том числе, умеет делать резиновые модульные сетки (!), обязательно оцените эту замечательную вещь. Именно с помощью этого инструмента можно обойти заданное автором ограничение в 960px.
В-четвертых, хочу порекомендовать статью habrahabr.ru/blogs/css/70203 для закрепления материала, если кто-то еще не читал.
На сим позвольте откланяться, желаю интересных и сложных вам проектов в новом году!
UPD:Добавляю (px, em, %) грид-генератор gridinator.com. Спасибо Pendalf.
А также «резиновый» вариант 960gs. www.designinfluences.com/fluid960gs. Спасибо Deavy
