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

Дневник админа

960 Grid System — это просто

Когда я впервые столкнулся с 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 Система — это простой способ создания веб-макетов с использованием сетки из 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 - 2

В 16-битной версии самый узкий столбец имеет ширину 40 пикселей, а каждый следующий становится шире на 60 пикселей.

Итак, доступный размеры столбца: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей:

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

Сеансовые классы 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):

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

Чтобы убедиться, что вы используете правильные классы, не забудьте поместить элементы 12-битной версии внутри div с классом container_12, и класс 16-битной версии внутри div с классом container_16 .

Если никогда раньше вы не работали с 960 GS , я ожидаю, что вы поставите здесь восклицательный знак типа « Есть! », который будет указывать на то, насколько легко это заключается в управлении макетом с помощью этой системы.

Push Me, Pull Me

960 Grid System позволяет перемещать элементы независимо, перетаскивая их по горизонтали край. Это достигается с помощью CSS и.

См. Два примера, показанные ниже. Первый пример — это макет с 4 столбцами, использующий только класс grid_3 .

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

Push Me, Pull Me

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

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

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

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

Перед перетаскиванием:

Чтобы визуально разместить элемент логотипа между двумя столбцами текста используйте следующий HTML-код:

 & lt; div class = & quot; grid_6 push_3 & quot; & gt;
& lt; p & gt; логотип & lt;/p & gt;
& lt;/div & gt;
& lt; div class = "grid_3 pull_6" & gt;
& lt; p & gt; текстовый столбец & lt;/p & gt;
& lt;/div & gt;
& lt; div class = "grid_3" & gt;
& lt; p & gt; текстовый столбец & lt;/p & gt;
& lt;/div & gt;
& lt; div class = "grid_12" & gt;
& lt; p & gt; большой ящик & lt;/p & gt;
& lt;/div & gt; 

Результат будет следующим:

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

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

Хотя логотип находится в начале тега, визуально он находится в центре страницы.

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

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

Для этого классы prefix и suffix являются применяется к блокам div, и их реализация очень похожа на классы и pull.

Например, чтобы оставить пустое пространство шириной в один столбец, используйте prefix_1 перед элементом или suffix_1 после элемента:

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

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

Начало и конец

Наконец, позвольте мне дать вам некоторую информацию об альфа-классах (& # 171; first & # 171;) и omega (& # 171; last & # 171;), который должен применяться ко всем элементам сетки, которые являются дочерними по отношению к другим сеткам.

Конечно, alpha будет применяться к первому дочернему элементу, а omega — к последнему.

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

Резюме

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

Основные правила системы охватывают только 5 концепций, которые вы должны запомнить:

> Используйте container_12 класс для 12 столбцов и container_16 для 16 столбцов; используйте классы grid_1 , grid_2 , grid_3 и т. д., чтобы установить ширину столбцов. Если вы хотите заполнить всю ширину страницы по горизонтали, убедитесь, что сумма номеров классов равна 12 или 16 соответственно ( grid_4 + grid_2 + grid_6 = 12); использовать классы и самостоятельно размещать элементы на странице независимо от их положения в разметке документа; Используйте классы prefix и suffix для создания пробелов в макете; используйте классы alpha и omega , чтобы установить границы для любых вложенных элементов сетки

Система 960 Grid также использует сброс CSS. Это необязательный файл, основанный на популярном наборе сброса CSS Eric Meyer . Если вам это нравится, пожалуйста, используйте это. Если нет, отправьте в корзину!

Сетка Fluid 960

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

Fluid 960 Grid System

Adaptive 960 GS ! Плавающие макеты страниц позволяют настраивать структуру страницы. Они используют действительно сложный код, но если вы воспользуетесь этой системой, она сделает всю тяжелую работу за вас:

Система сеток Fluid 960

Сетка CSS 1 КБ

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

CSS-сетка размером 1 КБ

Система переменных таблиц

Простая и гибкая сетка CSS на основе Сетка 960 :

Галерея дизайна на основе сеток

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

Галерея дизайна на основе сетки

Typogridphy

Цитата с официального сайта:" Typogridphy — это фреймворк CSS, разработанный для того, чтобы дать веб-дизайнерам и разработчикам пользовательского интерфейса возможность быстро создавать убедительные типографически качественные макеты сеток ":

Tiny Fluid Grid Grid

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

Tiny Fluid Grid

Beyond the Grid

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

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

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

 

 

Оцените статью