960 grid system в фотошопе. Широкие открытые пространства

Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 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 являются абсурдом (представьте себе вложенные в html), однако путем манипуляций с отступам в css вложить контейнеры друг в друга возможно. Вот только зачем?

В дальнейшем, я буду использовать контейнер с параметрами:

• Ширина колонки: 60px
• Кол-во колонок: 12
• Ширина канавки: 20px
• Ширина контейнера = (60*12) + (20 * 11) + (20/2 * 2) = 960px

Пример кода контейнера:

На этапе разработки удобно использовать в качестве 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 соответственно:


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

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

Любознательные читатели могут заглянуть в css код и узнать, что формируются канавки с помощью margin’а, в отличие от ячеек, для которых нужен html-элемент. Впрочем, я надеюсь, это было очевидно всем.

Агрессивные верстальщики могут с негодованием переименовать в коде фреймворка все упоминания grid_ на, к примеру, cell_, что, на мой взгляд, ближе к истине, а так же более наглядно.

Clear

Вероятно, все, кто читал предшествующий код заметили, что в нем появился новый элемент:

Clear – второй базовый элемент разметки 960gs. Что бы понять, что же делает clear, рассмотрим следующую ситуацию: я попытаюсь переписать последний пример, не используя clear, для удобства добавив контейнеру красный ободок.


Хм, контейнер не растянулся дочерними ячейками, а остался худеньким и одиноким. Следовательно, первая задача clear – растягивать родительский контейнер до ожидаемых размеров . Теперь, предлагаю посмотреть внимательно на первый пример из раздела grid, в котором каждая ячейка единолично занимает всю строчку. Из этого примера логично сделать вывод, что вторая задача clear – завершать текущую строку, независимо от того, сколько в ней осталось свободных колонок .
Из этих двух правил следует хорошая привычка при работе с 960gs всегда завершать любую строку с помощью clear, даже если эта строка последняя или единственная в контейнере.

Не секрет, что дивы с классом clear используются верстальщиками относительно часто. Для того, что бы избежать возможных конфликтов между кодом всего сайта и кодом 960gs в будущем, вероятно, верстальщику следует либо переименовать в коде css файла фреймворка класс clear на какой-нибудь другой (к примеру, на clr), либо уточнить его, (например, .container_12 .clear). Всё же, по моему мнению, переименование в случае вероятных конфликтов – более подходящий способ.

Alpha и Omega

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

В таких случаях следует использовать классы alpha и omega . Суть проста – если в ячейку мы вкладываем несколько других ячеек, то у первой вкладываемой ячейки нужно поставить класс alpha, а у последней, очевидно, omega.

Кстати, пример является одним из редких случаев необходимости использования тега
.

Если нужно вложить только одну ячейку, достаточно использовать только класс alpha, без omega.

Prefix, Suffix, Push и Pull

Эти четыре дополнительных класса, по сути, являются более абстрактной заменой padding-left, padding-right, left и right соответственно. Стоит отметить, что пользоваться этими классами гораздо удобнее, чем вычислять нужные отступы в уме или на калькуляторе.
Все они имеют названия классов, сходные с названиям классов ячеек: имякласса_X , где Х – количество столбцов модульной сетки.
Рассмотрим простой пример:


А теперь применим к каждой из ячеек со стишком классы prefix_1, suffix_1, push_1 и pull_1 соответственно:


Вот и всё, в статье были перечислены все возможности 960gs, осталось рассмотреть лишь несколько моментов.
Во-первых, скачать код с примерами из статьи можно по адресу

Просматривая исходный код и стили шаблона можно увидеть такие классы как: “grid_6 ”, “grid_8 ”. Эти классы использует система сеток 960. Давайте рассмотрим что это за система такая и что она предлагает.

Система сеток 960 — это попытка ускорить разработку сайтов благодаря применению форматов, рассчитанных на ширину в 960 пикселей. Есть несколько вариантов макета. Наиболее часто используют сетки на 12, 16 и 24 колонки.

Ниже показан пример 24-колонной сетки, используемой в шаблоне:

Как Вы видите расположение блоков соответствует столбцам сетки. С помощью доступных классов можно изменить макет вебсайта как Вы хотите.

Применение

В каждом шаблоне где есть система сетки находится grid.css файл, где можно увидеть используемые специальные классы. Давайте посмотрим, как можно использовать систему сеток.

Откройте файл grid.css, там можно увидеть:

Вначале css файла Вы увидите:

columns:24
Column width:30
Gutter width :10

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

Потом идет класс .container_24{} — этот класс нужно использовать для контейнера, в котором будет находится все содержимое вебсайта.

Примечание: основной класс следует назвать container_12 или container 16 в зависимости от количества используемых столбцов.

Потом классы .grid_1 , .grid_2 и т.д - эти классы используют чтобы установить ширину внутренних блоков. Блоки с grid классами нужно поместить внутрь класса container_24.

Эти классы обозначают ширину блоков:

Container_24 .grid_2 {
width:70px;
}

Например, код для этого макета такой:

В этом html макете были использованы такие grid классы:

Container_24 { margin-left: auto; margin-right: auto; width: 960px; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .container_24 .grid_9 { width:350px; } .container_24 .grid_12 { width:470px; } .container_24 .grid_15 { width:590px; }

Можно также применить несколько дополнительных классов как, например:

.prefix_1 , .prefix_2 и т д — определяет отступ блока с левой стороны;

.suffix_1 , .suffix_2 и т д — определяет отступ блока с правой стороны;

Больше о системе сеток 960 Вы можете узнать на официальном сайте

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

Дизайн основанный на сетке

Перед тем, как перейти к специфике системы 960 Grid, я хочу разъяснить что такое дизайн основанный на сетке. В принципе в этой системе нет ничего нового, т.к. она основана на старом и добром "выравнивании"

Итак, расслабляем мозги и начинаем впитывать информацию. Рассмотрим несколько макетов страниц:

Как вы видите на данном рисунке изображены исключительно прямоугольные фигуры. Вы конечно же узнали в них различные блоки ваших сайтов. Идём дальше.

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

Фишка заключается в том, что сетка приносит некоторое логическое содержание в этот хаос и ставит всё на свои места. Это кому-то может не понравиться, но сетки очень важны и эффективны для современного дизайна и совсем не загоняют вас в рамки. Вы по прежнему сможете творить всё, что вздумается.

Зачем мне необходима сеточная система?

960 Grid и подобные ей системы, позволяют быстро создать вёрстку основанную на сетке. Данный результат достигается при помощи протестированных на кроссбраузерность пресетов ширины страницы, куда вы помещаете свой код.

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

К примеру, у вас есть контейнер шириной 1000px и вы хотите разделить его на три колонки. При подсчёте вы выясняли, что вам понадобится 333px на одну колонку. Потом начинались заморочки с отступами, потому что если мы хотели добавить внешний отступ в 10 пикселей, то это значило, что нам надо отнять 20 пикселей у каждой колонки. В итоге у нас получались 3 колонки по 313px что в сумме давало 999px, но никак не 1000px.

А что если вам надо сделать ниже ещё 4 колонки? Всё сначала! Вам надо отнять 80px от ширины родительского контейнера. Остаётся 920px, которые мы делим на 4 колонки шириной 230px.

В конце концов, вы хотите добавить блок меню, который будет занимать 1/4 страницы. Вам надо разделить родительский контейнер на 2: один 250px, другой 750px. Далее опять отнять компенсирующую длину в 40px из-за отступов, и получить колонки шириной 730px и 250px

Вот это морока...

Многие дизайнеры сталкивались с этим. Это конечно не высшая математика, но на всё это уходит время и нервы. Представьте, что к всему вышеперечисленному надо добавить ещё и рамку в 1px (и всё по новой).

Где же тот кто нас спасёт от всего этого сумасшествия? Вот он - Nathan Smith , создатель 960 Grid.

Система 960 Grid

Данная система - это прекрасное решение для тех, кто не имеет ничего против сайтов шириной 960px.

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

Система 960 Grid может быть представлена нам в 2х начальных вариантах, состоящая из 12 или 16 колонок (Но так же есть и 24 колоночная система - но эт для извращенцев).

В 12 колоночной системе первая ячейка имеет 60px, а все последующие 80.

Так что вы можете делать колонки шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.

Соответственно в 16 колоночной версии, первая будет составлять 40px, а все последующие 60px.

Это значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей.

CSS классы

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

Для того, чтобы создать такой контейнер необходимо блоку присвоить соответствующий класс и всё!

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

Теперь, глядя на этот рисунок вы будете видеть не тёмные прямоугольники, а CSS классы:

Как я уже упомянул ранее названия классов говорят сами за себя. Однако запомните, что в 12 колоночной системе на одну строку не может быть больше 12 одно колоночных элементов и т.д. Так что в какой-то степени считать всё-таки надо будет. Но теперь намного легче). В системе с 16 колонками всё то же самое.

К примеру, если у вас 12 колоночная система и вы хотите создать 3 блока текста, следующие друг за другом, то вам этим трём блокам необходимо задать класс grid_4, что в сумме даст 12 (4+4+4)

Точно такая же логика рассуждения справедлива и к 16 колоночной системе для 4х блоков: 4+4+4+4 = 16.

Теперь внимание: для того, что всё это работало все ваши блоки нужно поместить в один родительский контейнер с классом container_12 или container_16.

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

Пихай туда, пихай сюда!

Кроме примитивных классов, которые мы только что с вами видели, система 960 Grid поддерживает ещё несколько полезных фичей, таких к примеру, как перемещение колонки вперёд или назад. Соответственно классы будут push и pull.

Примеры вы можете увидеть на изображении, которое находится ниже. Первая часть изображения состоит из четырёх колонок с классом grid_3.

На второй половине изображения вы можете увидеть результат применения классов push_1 и pull_1.

Помните, что вы можете перемещать колонки столько, сколько вам надо (но в пределах сетки). Если вы хотите переместить колонку на 2 ячейки, то вам надо выставить ей класс push_2 и т.д.

Данная система позволяет разместить элементы на странице.

Представьте, что у вас такая же ситуация, какая на рисунке, расположенном ниже. Блок логотипа стоит на первом месте.

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

До перемещения:

Для решения задачи нам надо применить следующие классы:

Результаты не заставят себя долго ждать.

После перемещения:

Цель достигнута!

Широкие открытые пространства

Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы prefix и suffix, которые работают практически как push и pull.

К примеру для того, чтобы оставить 1 колонку пустой после блока используйте класс suffix_1 и prefix_1 для пустой колонки до элемента.

В примере выше, вы видите результат применения класса suffix_3 к первому элементу на странице.

В начало и в конец

Последнее, что вам нужно знать, — это ещё два класса: alpha (первый) и omega (последний), которые должны применяться только если элемент является потомком элемента с одним из вышеперечисленных классов.

Данные классы поставят элементы на соответствующие места - на первое и последнее.

Подытожим:

Всё! Теперь вы эксперт в системе 960 Grid.

Вам следует помнить 5 главных идей:

1. Используйте для родительского элемента класс container_12 если вы хотите использовать 12-колоночную систему и container_16 если 16 колоночную;
2. Используйте классы grid_1, grid_2, grid_3 и т.д. для того, чтобы задать ширину элемента. Помните об ограничениях (grid_4 + grid_2 + grid_6 = 12). В 16 колоночной системе соответственно;
3. Используйте классы push и pull для того, чтобы двигать колонки влево или вправо;
4. Используйте класса prefix и suffix для создания пустых промежутков между блоками;
5. И наконец используйте класс alpha и omega для перемещения колонки на первую или последнюю позицию;

Ресурсы системы 960 Grid

Это ещё не всё! В комплекте с этим замечательным CSS фрэймворком идут так же не менее полезные интернет ресурсы.

Fluid 960 Grid System

Это специальный сайт, вёрстка которого была сделана с помощью системы 960 Grid. Тут вы убедитесь в том, что на этой системе можно делать страницы любой сложности.

The 1KB CSS Grid

Этот сайт предназначен для тех, кого не устраивают стандартные размеры данной системы и он хочет немного другие. Выставляйте свои опции, сайт сформирует для вас новый файл 960 Grid и пользуйтесь на здоровье!

Variable Grid System

То же самое, что и прошлый ресурс, только визуально всё понятнее

Grid-Based Design Gallery

Если вы сомневаетесь в возможностях системы 960 Grid, то советую вам просмотреть галерею сайтов, которые были сделаны на данной системе

Typogridphy

Ещё один CSS фрэймворк, основанный на 960 Grid, предназначенный для оформления текстов

Tiny Fluid Grid

Комбинация ресурса 2 и 3

Последние мысли

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

Как я уже говорил, помимо данной системы, существуют и другие со своими специфическими особенностями. Мы о них ещё поговорим, а пока я бы хотел узнать ваше мнение обо всём вышеизложенном. Спасибо за внимание!

В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System . Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:

Шаг 1: Создаем новый документ

Начнем с создания нового документа в Photoshop, шириной 1680 px и высотой 1100 px . Фон заливаем светло-серым цветом (# F9F9F9 ).

Шаг 2: Добавляем сетку

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

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

Для начала скачайте 960 grid system . После этого распакуйте 960 Grid System Натана

Смита в папку с шаблонами. Открываем 12 столбцовый макет 960 grid в Adobe Photoshop :

Теперь нам нужно создать базовую сетку. Базовая сетка поможет с промежутками между элементами и высотой линий. Создадим новый документ 24 на 24 пикселя, удалим фон, нарисуем линию, толщиной 1 px в нижней части документа.

Мы определим этот документ как шаблон: Edit > Define Pattern и присвоим ему запоминающееся название:

И наконец, мы выделим нашу рабочую область, используя направляющие. Создаем новую направляющую View > New Guide , выбираем вертикальный тип и создаем направляющие в точках 360px, 840px и 1320px.

Мы выбрали именно эти точки, потому как при ширине рабочей области в 960px, между точками 360px и 1320px — центральная 840px.

Полезные направляющие

Если вы работаете напрямую из файла 960 Template , направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides :

Сохраняем документ как шаблон

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

Шаг 3: приступаем к дизайну

Теперь, когда у нас настроен шаблон, мы можем приступить непосредственно к дизайну.

Мы разделим страницу на пять секций:

1. Header;
2. Callout;
3. Content – Left;
4. Content – Right;
5. Footer.

Шаг 4: Добавляем заголовок (Header)

Мы начнем с верха страницы и будем двигаться к низу, потому заголовок будет первым элементом, с которым мы работаем.

С помощью Rectangular Marquee Tool выбираем область шириной во весь документ и высотой в 120px - вам могут помочь направляющие или же тяните за край прямоугольного выделения до тех пор, пока не заполните пять горизонтальных маркеров, затем заливайте выделенную область серым цветом (#2C2C2C ).

Эта область будет использоваться под лого и панель меню:

Шаг 5: Вставляем лого

Первое слово — залито светло-голубым (#ADC7D9 ), второе выделено жирным и залито белым (#FFFFFF ). Далее применяем внутреннюю тень к элементам лого.

Я уменьшил внутреннюю непрозрачность до 25%, поставил значения Distance равное 2px , Choke равное 0% и Size — 5px:

Шаг 6: Добавляем меню

Цвет активной ссылки, которая, в нашем случае, Home , имеет белый цвет (#FFFFFF ), а остальные заполняем серым (#BBBBBB ). Совмещаем эти элементы и помещаем их в центре верхней части заголовка:

Шаг 7: Добавляем Callout

Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает - выкладывает информацию о странице.

Повторим действия на примере тех, что выполнили, создавая заголовок. С помощью инструмента Rectangular Marquee , выбирая высоту, равную 240px и заполняя голубым цветом (#ADC7D9 ), как и лого, делаем прямоугольник.

Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay . Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay , уменьшаем opacity до 30%:

Шаг 8: Делаем фон для области Callout

Так как мы назвали компанию «blue grid », добавим фон для секции Callout в стиле решетки. Для этого будем использовать технологию, схожую с той, которой пользовались, добавляя горизонтальные линии.

Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.

Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern :

Шаг 9: Добавляем фон для секции Callout

Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill :

Поверните этот слой на 15 градусов, примените к нему наложение белого цвета и поместите его над секцией callout . Затем создайте новый слой и объедините его с белым решетчатым слоем. Дайте ему имя:

Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.

Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete . Эти действия уберут всю сетку, которая не находится в области блока callout :

Следующее, что мы должны сделать — убедиться в том, что решетчатый участок распространяется только на область рабочей зоны шириной в 960px. Используйте View > Show > Guides , затем добавьте маску слоя к решетчатому слою:

Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G) , выберите градиент от черного к прозрачному.

Мы собираемся использовать данный способ для того, чтобы уничтожить сетку, которая располагается за переделами области в 960px.

Убедитесь, что тип градиента — Linear , и он установлен от черного к прозрачному. Начинайте от края и перетаскивайте градиент к началу решетки.

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

Шаг 10: Добавляем содержимое в область Callout

Область callout необходимо наполнить контентом, который будет выполнен шрифтом Arial 45pt (#2C2C2C) и выделить необходимые слова жирным.

Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:

Шаг 11: Добавляем слайд-шоу

Берите в руки Rectangular Marquee Tool и растягивайте прямоугольник между крайними правыми и средними направляющими, ставьте высоту в 8 линий, оставляя 1 линию вверху и 1 линию внизу, и заливайте темно-серым цветом (#2C2C2C ).

Это фон к слайдшоу:

Добавьте тень к фону, дважды кликнув на панели Layer style и выбрав drop shadow , изменив цвет на # (2C2C2C) и выбрав Distance равный 1px и size , равный 10px:

Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px , выбрав инверсию, как ранее, далее delete :

Шаг 12: Секция содержимого

Для начала добавим легкий градиент в этой секции. Сначала используйте Rectangular Marquee Tool , чтобы выбрать область для размещения контента, затем — Gradient Tool (G) .

Выберите градиент от цвета (# f0f0f0 ) к прозрачности и перетащите его вниз. Не заходите слишком далеко. Фон у границы нижней части страницы должен вернуться к цвету (# F9F9F9 ):

Шаг 13: Содержимое – левая область

Добавьте параграф описания шрифтом Arial 18pt #9C9C9C и со стилем ссылки Underlined #A3BBCC :

Шаг 14: Добавляем список услуг

Для начала добавьте заголовок шрифтом Arial 25pt Bold #262626 , затем добавьте элементы списка шрифтом Arial , цветом # 9C9C9C и величиной в 18 пунктов.

Пункт маркированного списка можно иллюстрировать с помощью Elliptical Marquee Tool или же использовать комбинацию клавиш Alt +7 .

Выкрасите все пункты списка в светло-голубой цвет (# A4BCCD ) и выровняйте по сетке.

960 Grid - это CSS Фреймворк, с помощью которого можно легко создать сайт не беспокоясь о кроссбраузерности. Система создаёт каркас шириной 960 пикселей в ширину и все блоки, созданные в этом каркасе должны соответствовать определённым пропорциям. Почему именно 960? И почему блоки должны быть фиксированной ширины? Во-первых, т.к. данная ширина позволяется сделать n-ое количество пропорциональных сегментов из которых будет состоять страница, и ещё данная длина "удовлетворяет" подавляющее большинство экранных расширений. Во вторых, блоки с фиксированной шириной обеспечат нормальное отображение во всех браузерах, даже в IE6).

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.

1) Фреймворки увеличивают размер страницы.

2) Загоняют разработчика в определенные рамки. Например, 960 grid предназначен для верстки страниц с шириной 960рх.

3) Многим не нравятся имена классов вроде «grid-16».

4) Кто-то считает, что нужно самому создавать фреймворк «под себя».

Но давайте посмотрим насколько существенны эти недостатки.

1) Объем файлов действительно увеличивается. Но 960 Grid System состоит из трех файлов, суммарный размер которых - 8 кБ (сжатая версия). Если использовать архивацию размер уменьшается до 1,6кБ.

Вы, конечно, сможете обойтись меньшим количеством кода для конкретной страницы, но разница вряд ли будет больше 1 кБ, т.е. если на вашей страничке есть хотя бы парочка картинок, выигрыш в общем объеме окажется менее 1%.

2) По поводу ограничений. Фреймворк, как и любую библиотеку, имеет смысл использовать в случаях, для которых он разрабатывался. Т.е. если нужна «резиновая» верстка, 960 Grid - не подходящее решение (хотя есть проект Fluid 960 Grid System). Но если в тех. задании сказано, что страница должна иметь фиксированную ширину 960px, то ситуация меняется.

3) Имена классов. На мой взгляд - это вопрос привычки. Цифры в имени означают ширину блока и по ним достаточно просто ориентироваться. Кроме того, никто не запрещает использовать одновременно несколько классов, например,

Класс grid_4 будет использовать фреймворк, sidebar - вашими стилями. 4) Свой фреймворк - это хорошо… если у вас есть время на его разработку и вы уверены, что он получится лучше существующих решений.

Теперь о преимуществах. 1) Время разработки. Оно сокращается и значительно, особенно если у вас есть минимальный опыт работы с фреймворком и вы используете его в подходящей ситуации. Т.е. нужно потратить какое-то время на изучение, но окупается оно очень быстро. 2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает 3) Упрощается поддержка. Вам будет легче прочитать свой же код, написанный полгода назад, если вы все время используете одинаковые имена классов.

Дизайн основанный на сетке

Перед тем, как перейти к специфике системы 960 Grid, я хочу разъяснить что такое дизайн основанный на сетке. В принципе в этой системе нет ничего нового, т.к. она основана на старом и добром "выравнивании"

Итак, расслабляем мозги и начинаем впитывать информацию. Рассмотрим несколько макетов страниц:

Как вы видите на данном рисунке изображены исключительно прямоугольные фигуры. Вы конечно же узнали в них различные блоки ваших сайтов. Идём дальше.

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

Фишка заключается в том, что сетка приносит некоторое логическое содержание в этот хаос и ставит всё на свои места. Это кому-то может не понравиться, но сетки очень важны и эффективны для современного дизайна и совсем не загоняют вас в рамки. Вы по прежнему сможете творить всё, что вздумается.

Зачем мне необходима сеточная система?

960 Grid и подобные ей системы, позволяют быстро создать вёрстку основанную на сетке. Данный результат достигается при помощи протестированных на кроссбраузерность пресетов ширины страницы, куда вы помещаете свой код.

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

К примеру, у вас есть контейнер шириной 1000px и вы хотите разделить его на три колонки. При подсчёте вы выясняли, что вам понадобится 333px на одну колонку. Потом начинались заморочки с отступами, потому что если мы хотели добавить внешний отступ в 10 пикселей, то это значило, что нам надо отнять 20 пикселей у каждой колонки. В итоге у нас получались 3 колонки по 313px что в сумме давало 999px, но никак не 1000px.

А что если вам надо сделать ниже ещё 4 колонки? Всё сначала! Вам надо отнять 80px от ширины родительского контейнера. Остаётся 920px, которые мы делим на 4 колонки шириной 230px.

В конце концов, вы хотите добавить блок меню, который будет занимать 1/4 страницы. Вам надо разделить родительский контейнер на 2: один 250px, другой 750px. Далее опять отнять компенсирующую длину в 40px из-за отступов, и получить колонки шириной 730px и 250px
Вот это морока...

Многие дизайнеры сталкивались с этим. Это конечно не высшая математика, но на всё это уходит время и нервы. Представьте, что к всему вышеперечисленному надо добавить ещё и рамку в 1px (и всё по новой).

Где же тот кто нас спасёт от всего этого сумасшествия? Вот он - Nathan Smith, создатель 960 Grid.

Система 960 Grid

Данная система - это прекрасное решение для тех, кто не имеет ничего против сайтов шириной 960px.

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

Система 960 Grid может быть представлена нам в 2х начальных вариантах, состоящая из 12 или 16 колонок (Но так же есть и 24 колоночная система - но эт для извращенцев).

В 12 колоночной системе первая ячейка имеет 60px, а все последующие 80.

Так что вы можете делать колонки шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.

Соответственно в 16 колоночной версии, первая будет составлять 40px, а все последующие 60px.

Это значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей.

CSS классы

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

Для того, чтобы создать такой контейнер необходимо блоку присвоить соответствующий класс и всё!

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

Теперь, глядя на этот рисунок вы будете видеть не тёмные прямоугольники, а CSS классы:

Как я уже упомянула ранее названия классов говорят сами за себя. Однако запомните, что в 12 колоночной системе на одну строку не может быть больше 12 одно колоночных элементов и т.д. Так что в какой-то степени считать всё-таки надо будет. Но теперь намного легче). В системе с 16 колонками всё то же самое.

К примеру, если у вас 12 колоночная система и вы хотите создать 3 блока текста, следующие друг за другом, то вам этим трём блокам необходимо задать класс grid_4, что в сумме даст 12 (4+4+4)

Точно такая же логика рассуждения справедлива и к 16 колоночной системе для 4х блоков: 4+4+4+4 = 16.

Теперь внимание: для того, что всё это работало все ваши блоки нужно поместить в один родительский контейнер с классом container_12 или container_16.

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

Пихай туда, пихай сюда!

Кроме примитивных классов, который мы только что с вам видели, система 960 Grid поддерживает ещё несколько полезных фичей, таких к примеру, как перемещение колонки вперёд или назад. Соответственно классы будут push и pull.

Примеры вы можете увидеть на изображении, которое находится ниже. Первая часть изображения состоит из четырёх колонок с классом grid_3.

На второй половине изображения вы можете увидеть результат применения классов push_1 и pull_1.

Помните, что вы можете перемещать колонки столько, сколько вам надо (но в пределах сетки). Если вы хотите переместить колонку на 2 ячейки, то вам надо выставить ей класс push_2 и т.д.

Данная система позволяет разместить элементы на странице.

Представьте, что у вас такая же ситуация, какая на рисунке, расположенном ниже. Блок логотипа стоит на первом месте.

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

До перемещения :

Для решения задачи нам надо применить следующие классы:

Результаты не заставят себя долго ждать.
После перемещения:

Цель достигнута!

Широкие открытые пространства

Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы prefix и suffix, которые работают практически как push и pull.

К примеру для того, чтобы оставить 1 колонку пустой после блока используйте класс suffix_1 и prefix_1 для пустой колонки до элемента.

В примере выше, вы видите результат применения класса suffix_3 к первому элементу на странице.

В начало и в конец

Последнее что вам нужно знать это ещё два класса: alpha (первый) и omega (последний), которые должны применться только если элемент является потомком элемента с одним из вышеперечисленных классов.

Данные классы поставят элементы на соответствующие места - на первое и последнее.

Подытожим:

Всё! Теперь вы эксперт в системе 960 Grid.

Вам следует помнить 5 главных идей:
1.Используйте для родительского элемента класс container_12 если вы хотите использовать 12-колоночную систему и container_16 если 16 колоночную;
2.Используйте класса grid_1, grid_2, grid_3 и т.д. для того, чтобы задать ширину элемента. Помните об ограничениях (grid_4 + grid_2 + grid_6 = 12). В 16 колоночной системе соответственно;
3.Используйте классы push и pull для того, чтобы двигать колонки влево или вправо;
4.Используйте класса prefix и suffix для создания пустых промежутков между блоками;
5.И наконец используйте класс alpha и omega для перемещения колонки на первую или последнюю позицию;
Ресурсы системы 960 Grid

Последние мысли

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

Как я уже говорила, помимо данной системы, существуют и другие со своими специфическими особенностями. Мы о них ещё поговорим, а пока я бы хотела узнать ваше мнение обо всём вышеизложенном. Спасибо за внимание!