960 Grid System

960 Grid System — это одна из первых и наиболее влиятельных CSS-фреймворк-систем для веб-дизайна, основанная на сетке из 12 или 16 колонок фиксированной ширины в 960 пикселей. Разработанная в 2008 году американским дизайнером Натаном Смитом (Nathan Smith), она стала стандартом для создания многоколоночных макетов в эпоху до широкого распространения адаптивного дизайна. Система предоставляла набор готовых CSS-классов, которые позволяли разработчикам быстро и точно позиционировать элементы на странице, используя принцип модульной сетки.

История

Идея модульных сеток в веб-дизайне возникла из типографики и печатного дизайна, где сетки используются для организации контента на странице. В середине 2000-х годов, с ростом сложности веб-сайтов, возникла потребность в инструментах, упрощающих создание упорядоченных макетов. До появления 960 Grid System разработчики часто вручную прописывали CSS-стили для каждого блока, что приводило к несоответствиям и увеличению времени разработки.

Натан Смит, работавший в то время в компании «Mint Digital» (Великобритания), опубликовал 960 Grid System в марте 2008 года. Выбор ширины в 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, что позволяет создавать множество различных комбинаций колонок. Кроме того, 960 пикселей хорошо вписывалось в стандартные разрешения мониторов того времени (1024×768 и 1280×1024), оставляя поля по краям.

Система быстро завоевала популярность благодаря своей простоте и эффективности. Она была использована в тысячах веб-проектов, включая сайты крупных компаний, и стала основой для многих других CSS-фреймворков, таких как Bootstrap (изначально созданный как внутренний проект Twitter) и Foundation. С появлением адаптивного дизайна и мобильных устройств популярность 960 Grid System снизилась, так как она была ориентирована на фиксированную ширину, но её принципы остаются актуальными.

Структура и принципы работы

960 Grid System основана на концепции фиксированной сетки, где вся ширина страницы делится на равные колонки с заданными промежутками (gutters) между ними. Система предоставляет два основных варианта: 12-колоночную и 16-колоночную сетку.

Основные параметры

• Общая ширина контейнера: 960 пикселей.
• Количество колонок: 12 или 16.
• Ширина одной колонки: для 12-колоночной сетки — 60 пикселей, для 16-колоночной — 40 пикселей.
• Ширина промежутка (gutter): 20 пикселей (по 10 пикселей с каждой стороны колонки).
• Расчёт: 12 колонок × 60 пикселей + 11 промежутков × 20 пикселей = 720 + 220 = 960 пикселей. Аналогично для 16 колонок: 16 × 40 + 15 × 20 = 640 + 300 = 960 пикселей.

CSS-классы

Система включает в себя несколько типов CSS-классов:

• .container_12 или .container_16 — задаёт контейнер фиксированной ширины 960 пикселей.
• .grid_X — класс для блока, занимающего X колонок (например, .grid_4 занимает 4 колонки).
• .alpha и .omega — классы для удаления левого и правого полей у первого и последнего элементов в ряду соответственно.
• .clear — класс для очистки потока (float clearing).

Пример использования для 12-колоночной сетки:

``html <div class="container_12"> <div class="grid_4">Блок на 4 колонки</div> <div class="grid_8">Блок на 8 колонок</div> <div class="clear"></div> </div> ``

Вложенные сетки

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

Преимущества и недостатки

Преимущества

• Простота и скорость разработки: готовые классы позволяют быстро создавать макеты без написания большого количества CSS-кода.
• Предсказуемость и единообразие: все элементы выравниваются по одной сетке, что обеспечивает визуальную гармонию.
• Поддержка браузеров: система работает во всех основных браузерах, включая устаревшие версии Internet Explorer.
• Документация и сообщество: наличие подробной документации и активного сообщества разработчиков.

Недостатки

• Фиксированная ширина: система не поддерживает адаптивность и резиновые макеты, что делает её непригодной для современных мобильных устройств.
• Избыточность кода: использование множества классов в HTML может усложнять поддержку и увеличивать размер страниц.
• Ограниченная гибкость: изменение ширины колонок или промежутков требует ручной настройки CSS.
• Устаревание: с появлением CSS Grid и Flexbox, а также адаптивных фреймворков, 960 Grid System потеряла актуальность.

Применение

В период с 2008 по 2013 год 960 Grid System активно использовалась в веб-дизайне для создания:

• Корпоративных сайтов: многие компании использовали систему для быстрой разработки своих веб-страниц.
• Блогов и порталов: система позволяла организовать контент в виде многоколоночных макетов.
• Интернет-магазинов: каталоги товаров часто строились на основе сетки.
• Прототипов и макетов: дизайнеры использовали систему для быстрого создания прототипов интерфейсов.

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

Влияние на развитие веб-дизайна

960 Grid System оказала значительное влияние на индустрию веб-дизайна. Она популяризировала концепцию CSS-фреймворков и модульных сеток, что привело к появлению более сложных и функциональных инструментов, таких как Bootstrap (разработан Марком Отто и Джейкобом Торнтоном в Twitter) и Foundation (от ZURB). Эти фреймворки, в свою очередь, внедрили адаптивность, поддержку мобильных устройств и более гибкие системы колонок.

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

Интересные факты

• Натан Смит создал 960 Grid System как побочный проект, а не как коммерческий продукт. Исходный код был опубликован под лицензией MIT.
• Система была вдохновлена работой Кимберли Элам «Grid Systems in Graphic Design» (Системы сеток в графическом дизайне).
• В 2010 году 960 Grid System была включена в список «10 лучших CSS-фреймворков» по версии сайта Smashing Magazine.
• Существуют версии системы для различных CMS, включая WordPress и Drupal, а также для графических редакторов, таких как Photoshop и Sketch.
• Несмотря на устаревание, 960 Grid System до сих пор используется в некоторых старых проектах и в образовательных целях.

Источники

• Smith, Nathan. «960 Grid System». Официальный сайт проекта (архивная версия).
• Smashing Magazine. «960 Grid System: A CSS Framework for Designers». 2008.
• Elam, Kimberly. «Grid Systems in Graphic Design». Princeton Architectural Press, 2004.
• Marcotte, Ethan. «Responsive Web Design». A Book Apart, 2011.
• W3C. «CSS Grid Layout Module Level 1». 2017.