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

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

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

Основные преимущества 960-сетки:

1. Простота использования: Одно из главных преимуществ 960-сетки заключается в ее простоте использования. Разработчикам не нужно самостоятельно создавать и настраивать сетку, достаточно применить готовый шаблон, который уже оптимизирован и готов к использованию.

2. Адаптивность: 960-сетка поддерживает респонсивный дизайн, что означает, что сайт будет корректно отображаться на разных устройствах и экранах. Разработчики могут легко адаптировать структуру страницы для различных разрешений экрана, используя медиазапросы.

3. Кросс-браузерная совместимость: 960-сетка хорошо работает во всех современных браузерах, что делает ее универсальным инструментом для создания веб-страниц.

4. Эффективность: Использование 960-сетки позволяет значительно ускорить процесс разработки, поскольку разработчикам не нужно тратить время на создание и настройку сетки, а также на позиционирование элементов на странице.

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

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

Но тогда я был еще относительным новичком в веб-дизайне, и когда я скачал файл, там было так много информации, что очень быстро все стало казаться очень сложным.

С таким количеством кода можноМожно ли просто создать макет?

Эта статья предназначена для веб-дизайнеров и разработчиков веб-интерфейсов, интересующихся системами верстки на основе макетов, но не понимающих.

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

Дизайн на базе сетки

Прежде чем вдаваться в подробности960 сетевых систем.Давайте вкратце рассмотрим дизайн на основе сетки в целом. Конечно, эта идея возникла не в Интернете. На самом деле, он происходит от одного из самых старых и основных принципов дизайна: выравнивание.

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

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

Рассмотрим положение о двух страницах, показанное на рисунке ниже.

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

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

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

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

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

Зачем нужна система сеток?

960 сетевых систем. — Как и другие подобные инструменты, он обеспечивает быстрый и простой способ создания положений на основе сетки с помощью CSS. Это достигается путем предоставления протестированных и оптимизированных для совместимости с браузерами размеров колонок, в которых может быть размещен контент.

До появления CSS3 было непросто разделить сайт на колонки, не прибегая к математическим расчетам.

Например, если у вас есть контейнер шириной 1000 пикселей и контейнер, который делится на три колонки, это означает 333 и 1/3 пикселя на колонку (не очень хорошее число). Колонки также должны быть разделены. В противном случае содержимое будет сливаться. Поэтому необходимо добавить отступ.

Если вы хотите добавить отступ в 10 пикселей с каждой стороны каждого столбца, вам нужно вычесть еще 20 пикселей из ширины каждого столбца. Это создает три колонки шириной примерно 313 пикселей с отступом по 10 пикселей с каждой стороны (снова 999 пикселей вместо 1000).

Хотите ли вы создать четыре колонки непосредственно под ним? Затем нужно начать весь процесс вычисления заново, вычитая отступ в 80 пикселей из общей ширины 1000 пикселей и деля 920 пикселей на 4, чтобы получить ширину колонки в 230 пикселей.

Наконец, если вы хотите добавить боковую панель на треть ширины страницы, создайте колонку шириной 750 пикселей для содержимого, еще 250 пикселей для боковой панели и вычтите отступ в 40 пикселей, чтобы создать колонку 730. пикселей в ширину и еще 230 пикселей в ширину.

Уже запутались?

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

Решение: попросите кого-нибудь другого организовать расчеты ширины колонок, поместите их в документ CSS и загрузите его бесплатно. (Этот человек может бытьНатан Смитсоздатель960 сетевых систем.).

960 сетевых систем.

960 сетевых систем. — Сетка шириной 960px может быть использована для легкого проектирования макета сайта.

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

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

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

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

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

Таким образом, доступная ширина столбцов выглядит следующим образом

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

На графике выше показано, что каждая из темно-синих горизонтальных линий является960 сетевых систем., как класс CSS.

Чтобы создать объект в структуре страницы с шириной, соответствующей ширине одного из этих блоков, просто присвойте ему нужный класс div.

Класс имеет легко узнаваемое название, соответствующее его ширинеcgrid_1. — самый узкий класс CSS, theсетка_12 — шире (в 16-колонной версии более широкий класс — этосетка_16).

Посмотрите еще раз на изображение выше. Считайте, что различные ширины столбцов — это классы CSS.

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

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

Аналогично, назначение классаCSS grid_4 версию с 16 колонками, вы можете легко создать четырехколоночный макет (4+4+4+4+4+4=16).

Чтобы убедиться, что вы использовали соответствующий класс, не забудьте поместить элемент 12-колоночной версии внутри div класса.Контейнер_12,. Класс 16-битной версии внутри div, содержащего символКонтейнер_16.

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

Push Me, Pull Me

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

Рассмотрим два примера, показанные на следующих диаграммах. Первый пример показываетсетка_3.

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

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

СистемаТолкать и тянуть Оказывает значительное влияние на структуру страницы HTML-документа.

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

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

Перед перемещением и опусканием :

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

<div class="grid_6 push_3">,
  <p>логотип</p>,
 </div>,
 
 <div class="grid_3 pull_6">,
  <p>текстовая колонка</p>,
 </div>,
 <div class="grid_3">,
  <p>текстовая колонка</p>,
 </div>,
 
 <div class="grid_12">,
  <p>большая коробка</p>,
 </div>,

Полученная схема выглядит следующим образом

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

Логотип находится в верхней части разметки, но визуально центрирован на странице.

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

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

Для этого в блоке div имеетсяпрефикс иЗаключение.. Их реализация очень похожа на реализацию и классаВычитание.

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

Как вы можете видеть, в приведенном выше примересуффикс_33 Создает пустое пространство после ширины столбца.

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

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

Занятия, конечно, проводятсяАльфа. применяется к первому дочернему элементу, а классОмега Наконец-то.

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

Подводя итоги

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

Основы системы содержат всего пять понятий, которые необходимо иметь в виду

Используйте классконтейнер_12Опубликовать систему с 12 колонкамиКонтейнер_16 Версия с 16 колонками — использует классGRID_1, GRID_2, сетка_3 Установите ширину равных столбцов. Если вы хотите заполнить всю ширину страницы по горизонтали, убедитесь, что общее количество классов равно 12 или 16 соответственно.GRID_4 + GRID_2 + GRID_6 = 12); Использовать классы и размещать классы индивидуально на странице, независимо от положения документа вывески — Использовать класспрефикс иЗаключение. Использование классов для создания пробельных элементов в макетахАльфа. иОмегаустановить границы вставки сетки.

В 960 сетевых систем. Также используется функция CSS Reset. Это необязательный файл, основанный на популярном наборе сброса CSSЭрик Мейер.. Если он вам нравится, используйте его. Если нет, отправьте его в мусорное ведро!

Ресурсы 960 Grid System

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

Решетчатая система Fluid 960

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

CSS 1KB сетка

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

Система переменной сетки

Основан на простом и гибком конструкторе сетки CSS960 сетевых систем.:

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

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

Скрипка.

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

Малая влажная решетка.

Это адаптированная версия вышеупомянутой системы Grid BuilderСистема сетки 1 кб:

За пределами сети.

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

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

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