элементная база сайтостроения

960 Grid System

ПОДЕЛИТЬСЯ
, / 894 0

Дизайн любого сайта начинается с проектирования структуры, взаимного расположения блоков и элементов. Сначала прикидывают как будут расположены глобальные составные части (шапка, подвал), потом начинают прорабатывать детали. Привычный нашему пониманию дизайн — цвет, шрифты, отрисованные элементы интерфейса, — все это добавляется в самом конце. Чтобы структура гармонично соединялась с дизайном, необходимо выровнять макет сайта по сетке. Например, вертикальные направляющие сетки отделяют боковую колонку от области контента, горизонтальные делят сайт на шапку, меню, область контента и подвал. Чтобы избавиться от рутинного создания сеток и были разработаны фреймворки — шаблоны, на базе которых можно строить сайты разных конфигураций, по типовым правилам. Одним из первых фреймворков стал 960 Grid.

Фреймворк получил название по ширине сетки, которая удовлетворяет большинству современных мониторов — 960 пикселей. С помощью системы 960 Grid сайт макет сайта разбивается на 12 или 16 колонок, по которым и будут выстроена структура. В варианте из 12 колонок их ширина составляет 60 пикселей, 16-колоночная структура содержит 40-пиксельные колонки. В обоих вариантах отступы у колонок по 10 пикселей (20 пикселей расстояние между колонками).

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

  • родительский класс container_12 (или container_16)
  • классы блоков, занимающих несколько колонок описываются как ширина ячеек в колонках сетки (grid_1, grid_4)
  • классы push и pull служат для перемещения колонок вправо или влево в пределах сетки
  • классы prefix и suffix работают как отступы, чтобы оставить какое-то количество пустых колонок до блока или после него
  • классы alpha и omega служат для обозначения первой и последней вложенных ячеек

Кроме классов, базовым элементом разметки фреймворка 960 Grid является элемент Clear — растягивающий родительский контейнер на полную ширину и завершающий строку колонок.

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

Чтобы начать работать с фреймворком, достаточно скачать его на официальном сайте 960.gs (русскоязычная версия расположена по адресу 960grid. ru). Там же можно скачать шаблоны на 12 и 16 колонок для самых распространенных программ прототипирования, посмотреть примеры верстки сайтов и почитать руководство (на английском).

Оставить сообщение

PASSWORD RESET

16 − четрынадцать =

REGISTER


семнадцать − девять =

LOG IN