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

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

Однако, так как в то время я был еще относительным новичком в веб-дизайне, когда я скачал файлы, там было столько информации, что очень быстро все это мне стало казаться очень сложным:

При наличии такого количества кодов, разве можно просто создать макет?

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

Мы рассмотрим конкретно 960 Grid System , однако после прочтения этого руководства, вы увидите, что большинство других систем сеток очень похожи, и вам будет проще с ними работать после того, как вы поймете несколько основных принципов.

Дизайн на базе сетки

Прежде чем перейти к специфике 960 Grid System , давайте кратко рассмотрим дизайн на основе сетки в целом. Эта идея, конечно, не возникла с появлением Интернета. На самом деле, она происходит от одного из старейших и фундаментальных принципов проектирования: выравнивания.

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

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

Рассмотрим два макета страниц, которые представлены на рисунке ниже:

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

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

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

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

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

Зачем нужна система сеток?

960 Grid System – как и другие подобные инструменты – обеспечивает быстрый и простой способ создания макетов на основе сетки с помощью CSS. Это делается путем предоставления протестированных на совместимость с браузерами и оптимизированных предустановленных размеров столбцов, в которых вы можете размещать контент.

До CSS3, не так то и просто было разбить веб-страницу на столбцы, не прибегая к утомительным математическим вычислениям.

Например, если у вас есть контейнер шириной в 1000 пикселей, и вы хотите разделить его на три столбца, то это будет 333 и 1/3 пикселя на столбец (не лучшее число). Кроме того, столбцы должны быть разделены, иначе их содержимое сольется – значит нужно добавить отступ.

Если к этому добавить отступ в 10 пикселей с каждой стороны каждого столбца, мы должны дополнительно вычесть по 20 пикселей от ширины каждого столбца. Это дает нам 3 столбца примерно по 313 пикселей в ширину и с отступом в 10 пикселей с каждой стороны (даже в этом случае получается 999 пикселей, а не 1000).

Хотите создать 4 столбца чуть ниже? Тогда вы должны начать весь процесс подсчетов с начала и вычесть 80 пикселей отступа от 1000 пикселей общей ширины, а затем 920 пикселей разделить на 4, чтобы получить ширину столбцов в 230 пикселей.

Наконец, если вы хотите добавить боковую панель, которая будет иметь ширину в одну треть ширины страницы, вы должны создать столбец в 750 пикселей для контента и еще один в 250 пикселей для боковой панели, затем вычесть 40 пикселей отступа, чтобы получить ширину одного столбца 730 пикселей и 230 пикселей – ширину другого.

Уже запутались?

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

Решение? Найти кого-то другого, кто разберется с этими сумасшедшими вычислениями ширины столбцов, забьет их в CSS-документ и позволит вам скачать его бесплатно. (Этим человеком оказался Натан Смит , создатель 960 Grid System ).

960 Grid System

960 Grid System – это простой способ создавать макеты сайтов с использованием сетки, которая имеет ширину 960 пикселей:

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

960 GS выпускается в двух основных вариантах: сетка с 12 столбцами и сетка с 16 столбцами (возможно подключение 24-разрядной версии, для тех, кому нужен экстремальный контроль дизайна).

В версии из 12 столбцов, самый узкий столбец имеет ширину 60 пикселей. Ширина каждого следующего столбца увеличивается на 80 пикселей.

Таким образом, доступные размеры ширины столбцов составляют: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей:

В 16-разрядной версии самый узкий столбец имеет ширину 40 пикселей, и каждый следующий столбец становится шире на 60 пикселей.

Таким образом, доступные размеры ширины столбцов составляют: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей:

Сессии CSS классов

Когда вы смотрите на приведенные выше диаграммы, то каждую из темно-синих горизонтальных полос можно рассматривать в 960 Grid System , как класс CSS.

Чтобы создать объект в структуре вашей страницы, ширина которого соответствует ширине одного из этих блоков, нужно просто присвоить ему в div надлежащий класс – вот и все!

Классы имеют показательные названия в соответствии с их размерами сgrid_1 — самый узкий класс CSS, grid_12 – самый широкий (в версии с 16 столбцами самый широкий класс – grid_16 ).

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

Эта система названий позволяет невероятно просто за считанные секунды составлять сложные макеты. Для того чтобы заполнить всю ширину страницы используется хитрая уловка. Суть ее заключается в том, что сумма номеров выбранных классов должна равняться 12 в 12-разрядной версии и 16 в 16-разрядной версии.

Например, в версии с 12 столбцами, если у вас есть 3 блока текста, которые вы хотите разместить бок о бок в 3 столбца, просто присвойте класс grid_4 каждому из них, что в сумме составит 12 (4+4+4=12):

Аналогично, присвоив класс CSS grid_4 в версии с 16 столбцами, можно легко создать макет из 4 столбцов (4+4+4+4=16):

Чтобы быть уверенными, что вы использовали соответствующие классы, не забудьте разместить элементы 12-разрядной версии внутри div с классом container_12, а классы 16-разрядной версии внутри div с классом container_16 .

Если вы никогда до этого не работали с 960 GS, я рассчитываю, что прямо сейчас у вас вырвется восклицание на манер «Вот оно как! », которое будет относиться к тому, насколько просто манипулировать макетом с помощью этой системы.

Push Me, Pull Me

960 Grid System позволяет независимо перемещать элементы, перетаскивая их вдоль горизонтального края. Это достигается с помощью классов CSS push и pull .

Рассмотрим два примера, приведенные на рисунке ниже. Первый пример является макетом, состоящим из 4 столбцов, использующим только класс grid_3 .

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

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

Система push/pull глубоко затрагивает структуру страницы в HTML-документе.

Например, представьте, что в приведенном ниже примере мы вводим имя сайта в логотипе и помещаем его в первый элемент на странице.

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

До перетаскивания:

Чтобы визуально расположить элемент логотипа между двумя текстовыми столбцами, вы должны использовать следующий HTML-код:

text column

В результате выводимый макет будет выглядеть следующим образом:

После перетаскивания:

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

Полностью пустые пространства

Вы будете часто сталкиваться с ситуацией, когда вам нужно создать в макете пустое пространство (негативное пространство — это отличный инструмент управления дизайном).

Чтобы достичь этого, для блоков div применяются классы prefix и suffix . Их реализация очень похожа на реализацию классов push и pull.

Например, чтобы оставить пустое пространство, которое будет по ширине равно одному столбцу, используйте перед элементом класс prefix_1 или после элемента класс suffix_1 :

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

Начало и конец

И в заключении я хочу дать вам немного информации о классах alpha («первый «) и omega («последний «), которые должны применяться к любым элементам сетки, которые являются дочерними для других сеток.

Очевидно, что класс alpha будет применяться к первому дочернему элементу, а класс omega к последнему.

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

Подводя итоги

Получив эти новые знания, теперь вы должны чувствовать себя экспертом 960 Grid System .

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

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

В 960 Grid System используется также сброс CSS. Это опциональный файл, в основе которого лежит популярный набор сброса CSS Эрика Мейера . Если он вам понравится, используйте его. Если нет, отправьте его в корзину!

Ресурсы 960 Grid System

Теперь, когда вы являетесь экспертом веб-дизайна на основе сетки и 960 Grid System , вот несколько инструментов и ресурсов, с которыми вы можете ознакомиться, чтобы еще больше разобраться в этой теме.

Fluid 960 Grid System

Замечательная адаптивная версия 960 GS ! Плавающие веб-макеты позволяют скорректировать структуру, чтобы она соответствовала странице. В них применяются некоторые действительно сложные коды, но если вы используете эту систему, она будет делать всю тяжелую работу за вас:

The 1KB CSS Grid

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

Variable Grid System

Простой и гибкий конструктор CSS сеток на базе 960 Grid System :

Grid-Based Design Gallery

Если вы скептически относитесь к 960 Grid System и к тому, что дизайн на основе сетки может предложить вам как веб-дизайнеру, ознакомьтесь с этой галереей макетов. Как видите, приложив немного фантазии и изобретательности, вы получаете просто безграничные возможности.

В этом уроке мы разработаем дизайн веб-страницы, используя 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: приступаем к дизайну

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

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

Header;
Callout;
Content – Left;
Content – Right;
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 и т.д.

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

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

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

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

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

text column

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

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

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

Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы 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

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

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

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

Next, in combination with the container_24 class, the pull_xx classes give the div a negative left padding, which makes it possible to “pull” the div"s content to the left. On the other hand, the push_xx classes, as expected, does the opposite and gives the div a (positive) left padding to “push” its content to the right (by giving way to the left padding).

“But why the hassle?” you might ask. “Why not just put them in the correct order in the markup in the first place, so you won"t have to use these unnecessary classes?”

Good questions. The answer lies in the pursuit of having semantic and accessible markup-our designs should not force the markup to a structure that doesn"t make sense or isn"t up to standards when the stylings are turned off. And CSS has been proven to handle such situations elegantly-it lets us achieve the look of our designs regardless of how the markup was written (well, largely).

In the 960gs site, Nathan Smith shows the header as a good example of how he used these classes:

On the surface, we might think the markup will show the Twitter logo first, then the Download link, and finally the 960 logo. But that wouldn"t be semantic-the title of the site (i.e. 960 logo) should come in first. And as you probably know, this arrangement also has SEO benefits. So, the markup for the header actually goes something like:

960 Grid System

Download - Templates: Acorn Fireworks, Flash, ...

As you can see, the logo does come in first, and after it, the download link. (The markup for the Twitter logo is found after the footer , was given an id of twitter , and is absolutely-positioned. It wasn"t given a 960.gs class, so we won"t concern ourselves with it.)

You also saw in the markup (as predicted) that the logo was pushed and the download link section pulled. To visualize it more clearly:

And that"s how you use the push or pull classes-know that they either give your divs a negative or positive left padding, then “pull” or “push” your content according to the number of columns you need your content to be pulled or pushed.

There"s one last set of classes that are integral to 960.gs-and they let you create complex layouts. A column that spans several rows, for example. Let"s tackle them next.

alpha and omega Classes

If you"ve read tutorials or articles on 960.gs before, you probably already know by now that the alpha and omega classes cancel the horizontal paddings set by grid_xx classes. And most likely you also know that their primary use lies when you have grid_xx classes inside nested divs.

For the benefit of those who don"t know yet, let"s go to our CSS and see what the se classes do to the elements they are assigned to:

Alpha { margin-left: 0; } .omega { margin-right: 0; }

Pretty straightforward-they simply zero out the left (alpha ) and right (omega ) margins. And as we"ve seen a while ago, when we assign an element a grid_xx class, we automatically give it horizontal margins of 5px on both sides. With nested divs, we don"t want to double these margins, so we give an alpha or an omega class, or both, accordingly.

A nested div that"s touching the left edge of its parent div would be given the alpha class. Similarly, the omega class is assigned to the nested div that"s placed on the parent div"s right edge. But what if we have a nested div that touches both edges of its parent div? That"s right, we assign both classes to it.

Let"s move on to an example so that you can see how it"s done.

Though not shown in the 960.gs demo, here"s an instance of how a complex layout is achieved with the aid of the alpha and omega classes (and nested divs with grid_xx classes):

Here we have columns that span several rows on both sides, with rows and boxes in the middle. You can also visualize it as a typical 3-column layout; but for our example, we"re just using 15 columns. Of course, you can easily expand it to 24 columns.

The key to creating layouts like these in 960.gs is to:

Remember that 960.gs makes the layout possible by floating divs to the left.
Create your nested divs from those initial floated divs-. This means you"ll have floated divs within floated divs.

Here"s one way of approaching our layout: group them into three columns first, and assign them the appropriate grid_xx classes:

Next, assign the additional grid_xx classes for the nested divs (note that we don"t have any nested div for the right column):

Since we have at least two levels of grid_xx classes inside nested divs, we also need to add the alpha and omega classes appropriately:

The nested divs inside the left column touches both edges of its parent div, so we need to add both alpha and omega . The same holds true for the divs with grid_8 classes in the middle section. But each grid_4 div on top only has to have alpha or omega , since it only touches either the left or the right edge of its parent div.

As you may have concluded from this simple example, you can nest divs with grid_xx classes as deep as you want (if your design demands it), as long you correctly mark them up, and give them the right 960.gs classes, so that they are floated correctly and any excess margins are canceled.

And speaking of floats, the last group of 960.gs classes, though not unique to 960.gs, make it all possible-they clear the floats that are automatically created when you assign a grid_xx class.

Leveling the Field: The clear Classes

Earlier, we noticed this in the markup-every div that was given a grid_xx class, that was also the last div for its row, was followed by an empty div with a class of clear .

The no-brainer reason for this is that we need to clear floated divs, because once we float them, they no longer take up space, causing the elements below it to be “pulled up,” which ultimately leads to a broken layout.

As we"ve seen in the demo, a solution for this potential problem is to place an extra non-semantic div with a class of clear , which does the following:

Clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

The code above is basically Nathan Smith"s own solution to the problem, as discussed in his blog . A lot of web designers don"t have any issues with it, except probably for standardistas who might cringe at the thought of using extra non-semantic divs in the markup for a styling problem.

Thankfully, Nathan Smith also included the clearfix solution in the 960.gs CSS, first discussed on PositionIsEverything.net . It does away with the extra div, as you can place it alongside the grid_xx classes and achieve the same effect:

That"s the same example markup above with the extra divs removed, and the clearfix class added. It will do the same thing, so you can choose this method of clearing if you find it to your liking. Here"s the CSS for it:

Clearfix:after { clear: both; content: ""; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } /* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */ * html .clearfix, *:first-child+html .clearfix { zoom: 1; }

The code might be a bit different from what you"re used to. This is because Nathan Smith based it on a blog entry by Jeff Star , which supposedly updates the original clearfix hack, to do away with code intended for a browser that"s now extinct (i.e. IE for macs), and tweaks it for newer ones (i.e. IE6 and IE7).

Conclusion

Using just the 24-column demo of 960.gs (and in some instances, the 960.gs site itself), I"ve shown you how each of its classes work and how you could use them in converting your 960-based designs into HTML and CSS.

Every section in the demo imparts lessons to be learned, and once you see what the classes do to your markup by examining the CSS, the mystery of 960.gs vanishes, and you gain a better understanding of what happens behind the scenes. You might even find new ways of using the classes, since you now know what they do.

Applying your newfound knowledge becomes easy, because once you"ve set your columns using 960.gs, you"ll just have to assign id"s to the divs (as the situation warrants) as hooks to further adjust the divs" paddings or the sizes of its text inside.

Просматривая исходный код и стили шаблона можно увидеть такие классы как: “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;
}

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

Some content

В этом 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 Вы можете узнать на официальном сайте