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 these 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:

1. Remember that 960.gs makes the layout possible by floating divs to the left.
2. 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.

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

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

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

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

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

Также Вы можете скачать исходный код нашего макета:

Звучит замечательно, но как это сделать? Есть много статей по поддержке CSS Framework-ов , но ни одна из них не содержит ничего, чтобы помочь неопытным читателям. Эта статья будет отличаться. Она охватывает весь процесс создания прототипа. Представьте, что вы получаете дизайн, и вам нужно сделать макет для клиента. Эта статья объясняет основы Grid960 , планирования сетки для проектирования и кодирования. Выборки будут использовать наиболее возможные Grid 960 , давая вам твердую базу знаний для работы. После того как вы увидите дизайн ниже, самое время узнать о том, как Grid 960 работает.

Создаем сетку

Grid 960 работает, используя классы через наследование. Grid 960 предусматривает две сети: 12 и 16 столбцов. Основной контейнер всегда 960px в ширину. Использование 960 позволяет воспользоваться наибольшим числом комбинаций столбцов в то время, как работать с ними легко. Мы будем использовать 12 столбцов, чтобы закодировать этот дизайн, но мы не будем использовать все 12 колонн. Каждая ячейка имеет margin: 0 10px . Это создает отступ в 20px. При создании строки, общая ширина всех элементов доходит до 960. Посмотрите на сетку 960′s демонстрационной страницы . Вы увидите симпатичную сетку со всеми возможными комбинациями. Каждая ячейка имеет класс, который определяет, какой ширины он будет. Вот разбивка ширины столбца в сетке на 12 столбцов.

Каждая ширина соответствует классу, формирующемуся следующим образом: grid_X , где Х — это номер из приведенного выше списка. Если вы хотите создать блок шириной 940, используйте класс grid_12 . Как сетка 960 знает, какой должна быть ширина? Каждый grid_x является селектором container_Y . Grid_X где У равен 12 или 16 колонкам. Давайте посмотрим код. Вот как можно создать две строки сетки в столбце 12 контейнеров. Пусть первая строка будет 940px, а вторая строка содержит два равных столбца.

XHTML

При создании строки в сетке, убедитесь, что все дочерние grid_X число сложены с числом столбцов, которые вы используете. Это обеспечивает правильную ширину. Два grid_6 div-а добавляются к 12. Вы не ограничены теми же номерами. Вы также можете использовать 6, 4 и 2. Когда вы все сделаете, сетка готова к заполнению. Теперь, когда вы знаете, как Grid 960 работает, давайте посмотрим, как создать макет.

Создаем макет

Визуализация сетки дизайна легка. Существует одна строка для заголовка изображения, строки для навигационной панели, строки с 2 колонками для истории заголовков и плакатов, ниже 4 колонки, затем нижний колонтитул с 3 столбцами.

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

XHTML

Скелет готов. Время начинать накладывать дизайн. Зеленые панели — просто div-ы с цветом фона и высотой. Блок меню не имеет установленной высоты. Его высота будет управляться размером ссылок, которые лежат внутри блока. Так же не забудьте картинку в header сайта.

Div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; }

Примените класс для корректировки grid_12 и установите ID.

XHTML

Средние столбцы не требует какого-либо содержания. Добавьте какой-либо текст в эти блоки. Вы можете сделать это . Прежде чем приступать к верхней части, переходите к колонтитулу. На скриншоте, нижний колонтитул залит сплошным цветом. Вы не можете сделать это при данной разметке. Оберните три нижних столбца в Div, чтобы решить эту проблему. Или просто вставьте див (DIV). Это нарушает сетку из-за того, что Grid 960 полагается на родительские и дочерние ячейки, чтобы применить стили (помните селектор container_12. Grid_4?). Подсетка решает эту проблему. Grid 690позволяет использовать вложенные сетки. Создайте подсетку, добавив grid_12 DIV, затем поместите grid_4 внутри его. При использовании вложенных сеток в дочерние элементы требуют специальных классов. Первая клетка нуждается в классе «alpha» а последняя — класс “omega». Измените разметку, чтобы отразить изменения и применить стилистические изменения в колонтитуле.

XHTML

div#footer { background-color: #e5e5e6; }

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

XHTML

• Articles
• Topics
• About
• Editors
• Contact