960 Grid System - это очень просто

Когда я впервые столкнулся с 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-код:

<div class="grid_6 push_3">
		<p>logo</p>
	</div>
	
	<div class="grid_3 pull_6">
		<p>text column</p>
	</div>

	<div class="grid_3">
		<p>text column</p>
	</div>
	
	<div class="grid_12">
		<p>big box</p>
	</div>

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

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

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

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

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

Чтобы достичь этого, для блоков 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 и к тому, что дизайн на основе сетки может предложить вам как веб-дизайнеру, ознакомьтесь с этой галереей макетов. Как видите, приложив немного фантазии и изобретательности, вы получаете просто безграничные возможности:

Typogridphy

Цитата с официального сайта: «Typogridphy – CSS фреймворк, разработанный, чтобы предоставить веб-дизайнерам и разработчикам интерфейсов возможность быстро создавать привлекательные сеточные макеты типографского качества»:

Tiny Fluid Grid

Это конструктор сеток для адаптивной версии описанной выше системы 1KB Grid System:

За рамки сетки

Стоит признать, даже со всеми возможностями, предлагаемыми сеточными системами наподобие 960 GS, до сих пор существует ряд ограничений. Никто не говорит, что все веб-сайты должны создаваться на основе сетки – это приведет к застою творчества и отсутствию развития новых макетов страниц.

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

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

Ваши мысли по поводу сеточных систем?

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