Как установить плагин 960 grids. Зачем мне необходима сеточная система? Дизайн на базе сетки
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
940px 460px 460px |
При создании строки в сетке, убедитесь, что все дочерние 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; }
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; }
div#footer { background-color : #e5e5e6 ; |
Отлично! Теперь колонтитул имеет сплошной цвет фона, и вы можете настроить размер столбцов, если необходимо. Добавьте какой-либо текст в столбцы нижнего колонтиула прямо сейчас, что позволит перейти к блоку навигации. Блок навигации (меню) — простой неупорядоченный список. Добавьте несколько ссылок и надлежащие стили.
XHTML
- Articles
- Topics
- About
- Editors
- Contact
|
div#navbar ul { list-style: none; display: block; margin: 0 10px; } div#navbar ul li { float: left; margin: 0 1.5em; font: bold 1em Arial; }
div#navbar ul { list-style : none ; display : block ; margin : 0 10px ; div#navbar ul li { float : left ; margin : 0 1.5em ; font : bold 1em Arial ; |
Превосходно. Прямо на глазах страница принимает целостный вид. Все, что осталось, так это создать эффективный блок на верхнюю часть страницы. Перед тем как заняться им, вы должны понять некоторые моменты и нюансы в сетке 960 CSS framefork в целом.
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 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:
- 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.
Очередной урок, посвященный веб-дизайну. Здесь мы покажем, как создаются макеты для сайтов с использованием системы направляющих 960 Grid System. Вы увидите, как при помощи таких приемов макетирования процесс правильного позиционирования становится четким и прозрачным. К тому же по окончанию данного урока у вас получится стильный, аккуратный скин для вашего сайта.
1 Шаг
Начните с создания нового документа в фотошоп шириной 1680px и высотой 1100px, затем залейте фон слабым серым цветом #F9F9F9 .
2 Шаг
В Сети доступно большое количество макетировочных сеток, а также уроков по их созданию. Задачей этого урока будет введение вас в курс дела, если вы никогда не сталкивались с такими сетками ранее. С их помощью процесс макетирования может существенно ускориться и привести к качественным прототипам шаблонов страниц. Скачайте разметку 960 Grid System . Скачав ее по ссылке, распакуйте файл и откройте эту папку. Загрузите сетку “960 12 column grid” в фотошоп.
Теперь нам нужно перенести сетку в наш документ. Выберите группу “12 col Grid”, слейте ее в один слой, а затем перенесите его в главный документ. Сетка по высоте будет немного меньше документа, поэтому вам предстоит ее растянуть по вертикали, чтобы ее концы касались верхнего и нижнего края документа.
Теперь нам нужно еще создать строчную базу. Эта сетка поможет нам правильно расставлять отступы между элементами по вертикали и контролировать интерлиньяж в тексте, между абзацами и логическими блоками. Сначала создайте еще один файл в Photoshop размерами 24?24px, удалите в нем фон и проведите единственную линию в 1px по самой последней линейке рабочей области. Нам необходимо его сохранить, как шаблон (Edit > Define Pattern) и дать ему какое-нибудь выделяющееся имя.
Осталось разметить рабочую область тремя направляющими. Создайте новую вертикальную направляющую: View > New Guide, выберите пункт Vertical и задайте ей позиционирование на отметке 360px. Точно так же создайте еще две направляющих на отметках 840px и 1320px. Так мы выделили область размерами 960px между отметками 360px и 1320px и провели одну направляющую ровно посередине документа.
Если же вы работаете прямо из файла с 960 Grid System, в нем уже настроены удобные направляющие. Просто откройте View > Show > Guides.
3 Шаг
Теперь, когда у нас готов шаблон разметки, можно браться за проектирование структуры сайта. Дизайн страницы будет разделен на 5 блоков: Шапка (Header), Выноска (Callout), Левый блок (Content - Left), Правый блок (Content - Right), Подвал (Footer).
4 Шаг
Первым делом займемся шапкой, так как будем двигаться сверху вниз. Возьмите Rectangular Marquee Tool и выделите им область по всей ширине документа в самом верху высотой 120px (включив видимость своей горизонтальной разметки, высоту в 120px рассчитать более чем легко - это всего 5 строк по 24px каждая). Залейте шапку темно-серым (#2C2C2C ). Шапка будет содержать лого сайта и навигационное меню.
5 Шаг
Теперь в верхний левый угол страницы поместите ваш логотип, выровняв его по второй колонке (что есть отступ в 40px). В качестве логотипа я использовал обыкновенную надпись, состоящую из двух частей шрифтом Century Gothic и кеглем в 50pt. Первая часть надписи имеет светло-голубой оттенок (#ADC7D9 ), вторая - жирное начертание (bold) и белый цвет (#FFFFFF ). Далее я добавил к лого внутреннюю тень (стиль Inner Shadow); понизил непрозрачность (Opacity) стиля до 25% и задал такие параметры: Distance - 2px, Choke - 0%, Size - 5px.
6 Шаг
Здесь оформим навигационное меню. Чтобы сохранить чистоту и порядок на странице, мы будем использовать текстовые ссылки в меню. Выберите шрифт Arial размером 18pt и создайте надписи для ссылок. Закрасьте активную кнопку белым цветом (#FFFFFF ), а остальные - светло-серым (#BBBBBB ). Выровняйте их по вертикали и поместите в средней полосе шапки.
7 Шаг
Этот блок я назвал выноской потому, что все для чего он нужен - донести до пользователя информацию о странице. Повторите тот же процесс, что и с шапкой (выделение инструментом Rectangle Marquee), но на этот раз имейте в виду высоту блока в 240px, залейте выделение тем же светло-голубым (#ADC7D9 ), что и часть логотипа. Нам нужно добавить легкий градиент этому слою, поэтому выполните двойной щелчок по нему, чтобы вызвать панель стилей слоя и выберите стиль Gradient Overlay. Выберите градиент, переходящий к прозрачному цвету, смените режим наложения стиля на Overlay и понизьте его непрозрачность (Opacity) до 30%.
8 Шаг
Поскольку мы назвали свою компанию “Blue grid” - покажем в фоне выноски едва заметные ячейки. Для этого используем ту же технику, которую применяли для создания горизонтальных линий. Сначала создайте новый документ размером 25px на 25px. После этого удалите его фон, чтобы сделать его прозрачным и закрасьте одну нижнюю линейку пикселей толщиной в 1px, и такую же - по одной из сторон. Сохраните этот файл, как шаблон (Edit > Define Pattern).
9 Шаг
Создайте новый слой поверх слоя с выноской и залейте его только что созданным шаблоном (Edit > Fill).
Поверните этот слой на 15 градусов, задайте ему стиль Color Overlay белого цвета и поместите над панелью выноски.
Задайте слою режим наложения Soft Light. Далее выделите панель выноски либо инструментом Rectangular Marquee Tool, либо нажатием Ctrl + Click по слою с ней. После этого, находясь в режиме Rectangular Marquee Tool, кликаем по выделенной области правой клавишей мыши, выбираем пункт Inverse, затем жмем Delete. Сейчас мы удалили ненужную часть сетки, которая выходит за пределы панели выноски.
Следующим шагом будет создание видимости сетки лишь по ширине рабочей области в 960px. Включите направляющие, если они у вас спрятаны (View > Show > Guides), затем добавьте маску к слою с сеткой.
Перейдите в режим маски нажатием соответствующей кнопки в нижней части палитры Layers, затем выберите инструмент Gradient Tool (G) и определите градиент от прозрачного к черному. С помощью градиента и маски мы уберем части сетки, выходящие за рамки центральной области 960px.
Убедитесь, что выбран линейный стиль градиента. Начните растягивать градиент, немного отступив от края центральной рабочей области выноски в сторону ограничивающих ее направляющих до тех пор, пока не коснетесь непосредственно границы. То же самое повторите с другой стороны.
10 Шаг
Поместим текст на нашу выноску. Возьмите Arial шрифт, кегль 45pt (#2C2C2C ) и напишите какой-нибудь слоган, выделяя значимые слова жирным начертанием. Под ним поместите текстовое введение меньшим по размеру кеглем (17pt) и сдвиньте все это в левую часть панели выноски.
11 Шаг
Сейчас будем готовить область для слайдшоу. Выберите инструмент Rectangular Marquee Tool и нанесите выделение между крайней правой и центральной направляющими. По высоте выделенная область должна составить 8 линеек по горизонтали, оставьте по одной пустой линейке сверху и снизу. Залейте этот прямоугольник темным серым цветом (#2C2C2C ).
Добавьте тень к вашему фону для слайдшоу: выполните двойной щелчок, чтобы вызвать панель стилей слоя, выберите Drop Shadow, смените цвет на #2C2C2C , задайте Distance 1px и Size 10px.
Далее, в качестве слайда, на фон нужно поместить скриншот какого-нибудь сайта - не важно. Я сделал снимок экрана первого попавшегося блога, изменил его размеры ровно по размерам нашего темно-серого фона, а затем сделал отступы шириной в 10px (Select > Modify > Contract 10px, затем инвертировал выделение и удалил его содержимое нажатием Delete).
12 Шаг
Чтобы начать работать с основным разделом, нужно на фон еще добавить легкий градиент. При помощи Rectangular Marquee Tool выделите всю область, находящуюся под выноской, затем выберите Gradient Tool (G) от цвета #F0F0F0 к прозрачному и протяните градиент по направлению вниз. Не заходите чересчур далеко - фон должен переходить в #F9F9F9 к низу страницы.
13 Шаг
Добавьте вводный абзац в левую часть основного блока. Шрифт - Arial, кегль - 18 pt, цвет >#9C9C9C а цвет ссылки сделайте #A3BBCC и задайте ему подчеркивание.
14 Шаг
Добавим список услуг. Для начала оформите заголовок: Arial, 25pt, Bold, цвет #262626 . Список элементов сделайте размером 18pt , шрифтом Arial #9C9C9C . Пункты списка оформите либо с помощью Elliptical Marquee Tool, либо используя альт коды (Alt + 7) с светло-голубым цветом шрифта (#A4BCCD ) и выравниванием по сетке.
Добавьте любую необходимую информацию таким же путем.
15 Шаг
Правый блок основного раздела будет выводить последние новости. Сначала добавьте заголовок в том же стиле, что и предыдущий (Arial, 25pt, Bold, цвет #262626 ) и выровняйте его по секции предоставляемых услуг. Теперь создайте заголовок для одной из новостей шрифтом Arial, 18pt, #A4BDCD , а само содержимое пишите размером 16pt и цветом #9C9C9C . Напишите таким образом 3 новости, а затем поместите под ними ссылку на ленту новостей шрифтом Arial с подчеркиванием, кеглем 16pt и цветом #A4BDCD .
16 Шаг
Нашим последним блоком будет подвал, в котором будет находиться форма для ввода логина и пароля, контакты и несколько ссылок. Выделите нижнюю часть документа c помощью Rectangular Marquee Tool и залейте ее темно-серым (#262626 ).
Сейчас нам нужно добавить форму для ввода логина и пароля. Сначала шрифтом Arial Bold, 20pt, белого цвета сделайте соответствующую надпись в левой части подвала. Затем с помощью Rectangular Marquee Tool создайте два прямоугольника, которые будут служить полями для ввода. Назовите поля, сделав в них надписи шрифтом Arial 16pt, цвета #9C9C9C .
Повторите то же самое для кнопки отправки, только на этот раз используйте Rounded Rectangle Tool (U). Далее добавьте к этим элементам Inner Shadow, понизьте Opacity этого эффекта до 30%, выставьте Spread равным 0 и Distance - 10px. Добавьте ссылку для восстановления потерянного пароля (Arial, 13pt, подчеркнутый стиль, цвет #A4BDCD ).
17 Шаг
Завершим макет добавлением блока контактов в подвале: озаглавьте его шрифтом Arial 20pt, Bold белого цвета (#FFFFFF ) и выровняйте по заголовку формы для авторизации. Затем добавьте информацию для контактов простым Arial 16pt также белого цвета.
18 Шаг
Проверьте баланс и выравнивание. С помощью ваших направляющих и разлинейки проверьте: все ли находится на своих местах, все ли сбалансировано. Если нет - поправьте.
19 Шаг
Надеюсь, в этом уроке вы получили хороший толчок к изучению систем сеток, а также создали свой собственный, не похожий на другие, аккуратный макет сайта. Я настоятельно рекомендую пользоваться такими сетками и в дальнейшем, пока это не войдет в привычку. Со временем такой подход сильно упростит вашу работу.
Поделитесь уроком
Правовая информация
Переведено с сайта www.tutorial9.net , автор перевода указан в начале урока.
Фреймворк (от англ. framework - каркас)
Вы возможно уже слышали о CSS Frameworks таких как Blueprint, Grid System 960, Elastic и так далее. Также есть мнения что они могут быть хорошей отправной точкой для развития собственных работ и значительно сокращают время вёрстки шаблонов для web сайтов. Но так-ли это на самом деле? В этой статье мы рассмотрим то, как использовать CSS Frameworks на примере одного из наиболее популярных CSS фреймворков Grid System 960.
И так CSS Frameworks – это инструмент который предоставляет web – дизайнеру (разработчику) четкую архитектуру, основанную на довольно точных записанных правилах, которые позволяют выполнять вёрстку шаблонов дизайна для web сайтов не начиная с нуля.
А что такое CSS Frameworks- Grid System 960.
Grid System 960- представляет собой связку таблиц стилей, которые предусматривают общий контейнер расположенный на сетке. Структура делает доступным две стеки: первая сформирована 12 колонками, а вторая 16 колонками. В обеих сетках ширена общего контейнера всегда остаётся 960px.
Почему выбор размера 960px?
Все современные мониторы поддерживают к настоящему времени минимальное разрешение 1024×768 пиксел. Цифра 960 является делимой на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. Это даёт намного более гибкие комбинации относительно измерений колонок которые могут быть сделаны.
На изображениях ниже вы можете видеть примеры двух сайтов которые были сделаны с использованием двух разных сеток, первая с 12 колонками вторая с 16.
Как использовать рамки Grid System 960.
Для начала конечно нужно скачать архив CSS framework Grid System 960 , и распаковать его, берём оттуда папку css и перемещаем её туда где будут находиться все файлы шаблона. Теперь запускаем ваш любимый редактор(я рекомендую Adobe Dreamweaver) и создаём документ index.html. Подключим к документу index.html все необходимые файлы фреймворка.
Вставить между тегами head
= "stylesheet" type= "text/css" media= "all" href= "css/reset.css" /> = "stylesheet" type= "text/css" media= "all" href= "css/960.css" /> = "stylesheet" type= "text/css" media= "all" href= "css/text.css" />Также создадим отдельный css файл “style.css” в котором будут находиться наши собственные правила стилей, сохраняем его в папке path, это сделано для того чтобы не вносить изменения в css файлы фреймворка.
Подключим “style.css”
= "stylesheet" type= "text/css" media= "all" href= "css/style.css" />
Как выбрать контейнер/сетку для использования.
Теперь мы должны выбрать тип сетки которую хотим использовать 12-колоннок (. Container_12) или 16-колоннок (. Container_16). Мы знаем что обе сетки имеют размерность 960px, разница заключается только в том что 12-колоннок делит размерность на 12, а 16 соответственно на 16.
Класс который выбирает тип сетки выглядит так:
Как установить размер колонок?
Когда мы хотим разделить наш контейнер в несколько столбцов, для этого достаточно просто использовать класс. Grid_XX, в котором “XX” представляет число колонок (сетки выбранной в качестве контейнера). Из которых будет составлен колонка, которую мы хотим получить.
Например, если мы хотим иметь две колонки (боковое меню и содержание) достаточно указать это так:
Класс "grid_7" указывает на то, что у боковой колонки меню должен быть размер равный 7 колонкам выбранной сетки.
Как Вы можете видеть, сумма первой колонки (grid_7) со второй колонкой (grid_5) точно 12, общее количество колонок которые составляют сетку контейнера, который мы выбрали (container_12). Таким образом не нужно знать ширину которую должна иметь каждая единственная колонка, тем самым легче изменять размеры наших колонок во время развития вёрстки.
Давайте посмотрим на другой пример, нам нужно разделить наш основной контейнер на три колонки равного размера, нет необходимости делать какие-то вычисления для того чтобы определить нужный размер в пикселах, которая должна иметь каждая колонка. Достаточно применить немного математики, чтобы получить следующее:
Как вы видите сумма этих трех колонок grid_4 точно 12 (4 + 4 + 4).
Отступы между колонками.
Предопределенные настройки столбцов имеют определенный отступ между ними.Каждый класс grid_XXимеет 10px . отступа и справа и слева. Если мы хотим убрать например отступ у первой и последней колонки нашего макета, надо добавить класс “alpha ” это уберёт отступ с левого края и “omega” для правого.
Вотпример:
Мы в примере сделали, так что у первой колонки не будет отступа слева, а у последней справа.
В случае если мы захотим оставить одну или несколько пустых пространств до и после колонки.
Для того чтобы оставить одно или более пустых мест до или после колонки, надо использовать классы “prefix_XX” или “suffix_XX”, в местоXX надо указать количество колонок которые вы хотите оставить пустыми.
Давайте посмотрим пример:
В этом примере мы установили, что перед колонкой grid _7 будет находиться пустое пространство равное одной колонке, и также после колонки grid _3 будет одна пустая колонка.
Не забывайте что сумма всех колонок, в том числе и пустых должна быть равна 12 (grid_7 + grid_3 + prefix_1 + suffix_1) или 16 если вы выбрали соответствующую сетку.
Выводы
Как вы могли наверно заметить CSS framework, даёт возможность значительно сэкономить время в процессе верстки дизайна сайта. Очевидно, никто не запрещает персонализацию платформы согласно Вашим реальным потребностям, поскольку эти решения никогда не могут быть универсальными, особенно относительно верстки Ваших работ. Поэтому советую не останавливаться на простом использовании рамок, а идти дальше и экспериментировать.
Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 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, осталось рассмотреть лишь несколько моментов.
Во-первых, скачать код с примерами из статьи можно по адресу
