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 Grid System

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

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

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

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

960 Grid System - 2

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

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

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

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

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

Аналогично, присвоив класс 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 Me, Pull Me

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

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

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

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

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

Push Me, Pull Me - 2

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

Fluid 960 Grid System

The 1KB CSS Grid

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

The 1KB CSS Grid

Variable Grid System

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

Variable Grid System

Grid-Based Design Gallery

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

Grid-Based Design Gallery

Typogridphy

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

Typogridphy

Tiny Fluid Grid

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

Tiny Fluid Grid

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

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

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

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

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

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

Сергей Бензенкоавтор-переводчик статьи «The 960 Grid System Made Easy»