960 grid system как установить на фотошоп

Обновлено: 06.07.2024

960gs была отличной системой вёрстки! Поскольку у подавляющего большинства посетителей вашего сайта был монитор с разрешением как минимум 1024 пикселя по горизонтали, 960g позволял легко построить сайт прямо в HTML/CSS.

Но с появлением различных мобильных устройств и медиа-запросов (media queries) сайты, свёрстанные при помощи сетки фиксированной ширины, стали сильно проигрывать сайтам с адаптивным дизайном.

Тема этой статьи – сетка в Foundation , её сравнение с сеткой 960gs и дополнительные возможности Foundation , получаемые при помощи SASS . Далее я буду подразумевать, что читатель уже хорошо знаком с 960gs и присматривается к Foundation , чтобы использовать на практике адаптивный дизайн.

Шаг 18: Проверьте выравнивание и баланс всей страницы

Ресурсы 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 , вы увидите, что существует множество способов выйти за рамки системы, что заставит вас переосмыслить свои проекты.

Push Me, Pull Me

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

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

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

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

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

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

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

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

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

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

Шаг 17: Подвал – правая часть

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

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

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

Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа.

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

Создание Сетки

Grid 960 работает на основе наследования классов. Этот фреймворк предоставляет две сетки: 12 и 16 колонок. Основной контейнер всегда имеет ширину 960px. Использование числа 960 позволяет применять большинство различных комбинаций колонок, без усложнения работы с ними. Для верстки этого дизайна, мы будем использовать сетку из 12-ти колонок, но мы не будем использовать все 12 колонок. Каждой ячейке сетки назначено свойство margin: 0 10px. Это создает промежуток в 20 пикселей. При создании строки, сумма ширины всех элементов добавляется к 960. Взгляните на демонстрационную страницу Grid 960. Вы увидите сетку со всеми видами комбинаций. Каждая ячейка сетки имеет класс, который определяет, какой она будет ширины. Далее представлена разбивка ширины столбцов для 12-ти колоночной сетки:

Каждая ширина соответствует имени класса, оформленного в виде: grid_X, где X это порядковый номер из представленного выше списка. Если вам нужен блок, шириной 940px, используйте класс grid_12. Откуда же Grid 960 знает, какая должна использоваться ширина? Каждый grid_X представляет собой селектор container_Y .grid_X, где значение Y равно 12 либо 16 колонок.

Давайте немного рассмотрим сам код. Вот как можно создать сетку из двух строк в 12-ти колоночном контейнере. Здесь первая строка шириной 940 пикселей, и вторая строка содержит две одинаковых колонки.

< div class ="container_12" >
< div class ="grid_12" >< p > 940px </ p ></ div >

< div class ="clear" ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >

< div class ="clear" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

Когда вы создаете строку в сетке, убедитесь, что все дочерние номера gird_X в сумме дают число колонок, которое вы используете. Это гарантирует правильную ширину. Два дива с классом grid_6, дают в сумме 12. Вы не ограничены только этими значениями, и также можете использовать 6, 4 и 2. Вот и все, сетка готова для контента. Теперь, после того как вы узнали как работает Grid 960, давайте посмотрим как создается макет.

Макет

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

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

< div class ="container_12" >
< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_12" ></ div >
< div class ="clear" > </ div >

< div class ="grid_7" ></ div >
< div class ="grid_5" ></ div >

< div class ="clear" ></ div >

< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_3" ></ div >

< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="clear" ></ div >

< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >

< div class ="grid_4" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

Скелет готов. Пришло время накладывать дизайн. Зеленые панели – это просто блоки с фоновым цветом и высотой. У панели навигации высота не задана. Вместо этого, она будет контролироваться размером внутренних ссылок. Не забудьте добавить картинку заголовка.

* This source code was highlighted with Source Code Highlighter .

Применение классов для корректировки блоков grid_12 и установка ID

< div class ="container_12" >
< div class ="grid_12" >< a href ="images/header.jpg" alt ="" />
</ div >
< div class ="clear" ></ div >

< div class ="grid_12" id ="navbar" ></ div >
< div class ="clear" > </ div >

< div class ="grid_7" ></ div >

< div class ="grid_5" ></ div >
< div class ="clear" ></ div >

< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >

< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >

< div class ="clear" ></ div >

< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >

< div class ="grid_4" ></ div >

< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

Центральным колонкам не требуются никакие эффекты. Добавим немного текста для заполнения дизайна. Прежде, чем приступать к верхней части, взглянем на подвал. На скриншоте подвал однородного цвета. У вас не получится реализовать это с существующим кодом. Оборачивающий div, вокруг этих трех колонок решит проблему. Вы думаете, ничего страшного, просто нужно вставить div. Но этот див поломает сетку, поскольку Grid 960 основывается на родительских и дочерних элементах, при использовании стилей (вспомните селектор container_12 .grid_4 ). В данном случае, проблему поможет решить вложенная сетка, которую Grid 960 позволяет использовать. Создайте вложенную сетку, путем добавления блока grid_12, затем расположите внутри блоки grid_4. При использовании вложенных сеток, дочерние элементы должны иметь специальные классы. Первый дочерний элемент должен иметь класс «alpha», а последний дочерний блок – класс «omega». Отредактируйте разметку для внесения необходимых изменений для подвала.

< div class ="grid_12" id ="footer" >
< div class ="grid_4 alpha" ></ div >
< div class ="grid_4" ></ div >

< div class ="grid_4 omega" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

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

< div class ="grid_12" id ="navbar" ></ div >
< ul >
< li > Articles </ li >
< li > Topics </ li >

< li > About </ li >
< li > Editors </ li >
< li > Contact </ li >
</ ul >

* This source code was highlighted with Source Code Highlighter .

CSS-фреймворки не решат всех ваших проблем

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

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

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

Есть еще один аспект Grid 960, который следует принять во внимание, прежде, чем мы перейдем к верхней секции. Grid 960 основывается на размерах элементов и отступов, при создании строки правильного размера. Если вы используете рамку или внутренний отступ (padding), макет сломается. Следовательно, если вам нужно их использовать, вы должны предусмотреть это в размере блока, для отражения изменений. Это очень утомительно. Указание размеров элементов в двух местах, всегда будет приводить к путанице, к тому же макет будет гораздо сложнее в обслуживании. Вот и все. Давайте закончим верхнюю секцию.

Верхняя секция

К счастью, вы можете манипулировать колонками одинаковой высоты в верхней секции. Поскольку картинке справа назначена ширина и высота, нам известен размер другой колонки. Создадим эффект блока, с помощью добавления нового дива с рамкой, внутри существующих дивов. Не забудьте указать размеры. Не назначайте padding дивам, потому что это изменит ширину блоков и сломает сетку. Вместо этого, укажите margin дочерним элементам. Это не изменит ширину родительских блоков. Применим margin к строчным элементам. Это создаст желаемый эффект и текст будет отступать от края.

< div class ="grid_7 topSection" >
< div > </ div >
</ div >
< div class ="grid_5 topSection" >

* This source code was highlighted with Source Code Highlighter .

Используйте классы, вместо ID, потому что класс topSection применяется к обоим блокам. Это к тому же, упрощает изменение высоты. Выберите значение высоты, и создайте класс.

div.topSection div p <
margin: 10px;
>

* This source code was highlighted with Source Code Highlighter .

Отлично! Давайте посмотрим на нашу работу.

Приступаем к наполнению контентом. Заполните левый блок небольшим количеством текста. Только не увлекайтесь, если текста будет слишком много, он вылезет за край блока. Это создает потенциальную проблему в макете. Как вы узнаете, какое количество текста будет слишком большим? В производственном дизайне, для предотвращения этой проблемы, дизайнеру пришлось бы создать функцию, выводящую определенное количество слов.

Теперь, давайте вставим картинку. Только, прежде чем ее вставлять, укажите размеры. Если вы нормальный математик и понимаете боксовую модель, вы, скорее всего, уже знаете, какого размера она должна быть. Если не знаете, запустите Firebug и взгляните на DOM. Включите кнопку Inspect и кликните по блоку, в котором будет размещаться картинка. Откройте вкладку Layout. Firebug отобразит боксовую модель выделенного вами блока.

Скриншот показывает размер картинки 360 x 280. Найдите картинку, и создайте стиль. Я решил позволить картинке целиком заполнить весь блок. Если вы хотите создать 10-ти пиксельные отступы, убедитесь в том, что уменьшили размеры по 20 пикселей с каждой стороны.

* This source code was highlighted with Source Code Highlighter .

У вас должно было получиться следующее. Можете смело менять текст или картинку.

Помните об ограничениях

Теперь, когда прототип готов, давайте подведем итоги проделанной работы. Вы научились быстро создавать прототипы дизайна. Grid 960 легко создает сетку для нас. И что же дальше? Естественно, нужно показать клиенту, и послушать, что он скажет. Хотя, есть несколько предостережений. Тестировался ли дизайн в IE6 и IE7? Нет. Нужно ли это делать? Нет. Это только прототип. Конечно же, все особенности браузеров будут учтены, до производства.

А что если клиенты захотят создать более комплексный дизайн? В таком случае, вы быстро обнаружите ограничения фреймворка. Что если дизайн должен быть резиновым или эластичным? Фреймворк не сможет вам в этом помочь, поэтому вам придется делать все с нуля. Помните, что CSS-фреймворки не решат все ваши проблемы, но они могут помочь с некоторыми. Grid 960 также как и другие фреймворки, замечательно подходит для создания прототипов.

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

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

960gs получил свое название из-за выбора Натаном Смитом (Nathan Smith), автором фреймворка, полной ширины контейнеров по-умолчанию в 960 пикселей. Однако, 960 px – совсем не железное ограничение.

Все элементы 960gs описаны как классы для css. Очевидно, использовать их следует как <тег >.
В данной статье я буду использовать код фреймворка с официального сайта, 960.gs/css/960.css. Для чтения и понимания статьи этот код смотреть совсем не обязательно, в конце повествования я остановлюсь на способах получения css-кода подробнее.
В примерах, в качестве элементов разметки, я буду использовать дивы, а, для удобства – называть такие дивы по имени их 960gs-класса. К примеру, див с классом .container_12 я буду называть элементом container. Надеюсь, эта небольшая вольность найдет понимание в глазах гуру от верстки.
Так же, при описании параметров элементов фреймворка, я буду описывать только параметры оригинального css-кода. Разумеется, верстальщик волен менять их или дополнять новыми свойствами так, как ему будет нужно.
При переводе, элемент grid получил название «ячейка», что несколько далеко от дословного «сетка», зато звучит не так уродливо и гораздо ближе к реальному назначению. Сравните: «поместить три сетки в одну строку» и «поместить три ячейки в одну строку».
Надеюсь с шероховатостями покончено, поэтому перехожу непосредственно к теме данной статьи.

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

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

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

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

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

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

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

Шаг 1: Создаем новый документ

Критические точки Foundation

Вот мы и подошли к главному, ради чего занялись Foundation : к адаптивности. О точках large , medium и small вы уже знаете.

Существуют также xlarge и xxlarge . (Как в американских размерах одежды. Удобно запомнить, не правда ли?). Вот как соотносятся критические точки и ширина экрана:

Критическая точка	Ширина экрана
small	до 40em (640px)
medium	от 40,063em (641px) до 64em (1024px)
large	от 64,063em (1025px) до 90em (1440px)
xlarge	от 90,063em (1441px) до 120em (1920px)
xxlarge	120,063em (1921px) и более

Обратите внимание: только классы small , medium и large можно использовать непосредственно в HTML. Для работы с xlarge или xxlarge , равно как и для кастомизации любого класса, нужно применять SASS.

Шаг 4: Добавляем заголовок (Header)

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

Эта область будет использоваться под лого и панель меню:

Шаг 2: Добавляем сетку

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

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

Для начала скачайте 960 grid system . После этого распакуйте 960 Grid System Натана

Смита в папку с шаблонами. Открываем 12 столбцовый макет 960 grid в Adobe Photoshop :

Теперь нам нужно создать базовую сетку. Базовая сетка поможет с промежутками между элементами и высотой линий. Создадим новый документ 24 на 24 пикселя, удалим фон, нарисуем линию, толщиной 1 px в нижней части документа.

Мы определим этот документ как шаблон: Edit > Define Pattern и присвоим ему запоминающееся название:

Далее возвращаетесь к нашему документу и создаете новый слой. Заполняете этот слой шаблоном, Edit> Fill . Так мы создадим базовую сетку:

И наконец, мы выделим нашу рабочую область, используя направляющие. Создаем новую направляющую View > New Guide , выбираем вертикальный тип и создаем направляющие в точках 360px, 840px и 1320px.

Сохраняем документ как шаблон

Вы можете сохранить этот документ в качестве шаблона и использовать по мере необходимости. Это сэкономит вам кучу времени.

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

Prefix, Suffix, Push и Pull

Эти четыре дополнительных класса, по сути, являются более абстрактной заменой padding-left, padding-right, left и right соответственно. Стоит отметить, что пользоваться этими классами гораздо удобнее, чем вычислять нужные отступы в уме или на калькуляторе.
Все они имеют названия классов, сходные с названиям классов ячеек: имякласса_X, где Х – количество столбцов модульной сетки.
Рассмотрим простой пример:

А теперь применим к каждой из ячеек со стишком классы prefix_1, suffix_1, push_1 и pull_1 соответственно:

На сим позвольте откланяться, желаю интересных и сложных вам проектов в новом году!

Шаг 11: Добавляем слайд-шоу

Это фон к слайдшоу:

Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px , выбрав инверсию, как ранее, далее delete :

Шаг 16: Подвал

Создание разрывов

Классы prefix и suffix в 960gs были отличным инструментом для вставки пустых промежутков и центрирования блоков. В Foundation эти же функции выполняют классы offset.

Создание дополнительных критических точек

Для того чтобы добавить точку разрыва, вы должны использовать в работе с CSS такой приём:

Такая техника работы с CSS полезна тем, что позволяет не вносить изменения в HTML-код, что больше подходит к концепции разделения содержания и представления.

Переупорядочивание столбцов

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

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

Прежде чем перейти к специфике 960 Grid System , давайте кратко рассмотрим дизайн на основе сетки в целом. Эта идея, конечно, не возникла с появлением Интернета. На самом деле, она происходит от одного из старейших и фундаментальных принципов проектирования: выравнивания.

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

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

Рассмотрим два макета страниц, которые представлены на рисунке ниже:

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

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

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

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

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

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

Когда вы смотрите на приведенные выше диаграммы, то каждую из темно-синих горизонтальных полос можно рассматривать в 960 Grid System , как класс CSS.

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

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

Шаг 5: Вставляем лого

Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px. Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic .

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

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

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

В заключение

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

В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System . Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:

Избегайте дублирования стилей

Есть ещё одна примечательная особенность работы со стилями в Foundation . Если вы собираете свои стили в отдельные файлы, но хотите использовать в них примеси из Foundation , вы должны определить переменную $include-html-classes как false . Это может выглядеть так:

Пути могут отличаться в зависимости от расположения документов на вашем сайте. Эта переменная поможет вам избежать дублирования стилей фреймворка Foundation при использовании всех его настроек, функций и примесей.

Используйте эту технику, если вы уже включили основной .css-файл Foundation в вашу страницу. Тогда у вас будет место для хранения особых настроек страницы или набора страниц.

Шаг 3: приступаем к дизайну

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

Мы разделим страницу на пять секций:

Header;
Callout;
Content – Left;
Content – Right;
Footer.

Шаг 6: Добавляем меню

Меню. Чтобы сохранить простой и строгий вид, мы будем использовать текст в основе меню. Выбираем для меню шрифт 18pt Arial .

Шаг 8: Делаем фон для области Callout

Так как мы назвали компанию « blue grid », добавим фон для секции Callout в стиле решетки. Для этого будем использовать технологию, схожую с той, которой пользовались, добавляя горизонтальные линии.

Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.

Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern :

Сетка

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

Можно (но необязательно), завершить первую строку при помощи <div что эквивалентно двенадцати столбцам. Такой расклад породит две строки с двумя столбцами одинаковой ширины.

Классы alpha и omega удаляют у контейнера margin-left и margin-right соответственно.

Того же результата можно добиться с использованием предопределённых классов в Foundation :

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

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

Нотация medium-6 говорит о том, что данная колонка на экране средней ширины (по умолчанию – не шире 641 пикселя) займёт 6 долей ширины из 12, то есть половину доступного экранного пространства.

Чтобы указать, как должна измениться относительная ширина колонки на другом разрешении, нужно добавить тот же <div> в другие классы, начинающиеся на small или large , например:

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

Foundation устроен согласно концепции « Мобильность прежде всего ». Это означает, что если вы зададите для столбца один из small-классов, его параметры будут наследоваться через все критические точки, если только поведение в этих точках не будет явно задано при помощи классов medium или large .

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

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 пикселей:

Alpha и Omega

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

В таких случаях следует использовать классы alpha и omega. Суть проста – если в ячейку мы вкладываем несколько других ячеек, то у первой вкладываемой ячейки нужно поставить класс alpha, а у последней, очевидно, omega.

Кстати, пример является одним из редких случаев необходимости использования тега <br>.

Если нужно вложить только одну ячейку, достаточно использовать только класс alpha, без omega.

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

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

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

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

Шаг 7: Добавляем Callout

Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает — выкладывает информацию о странице.

Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay . Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay , уменьшаем opacity до 30%:

Шаг 19: Расслабьтесь. Финиш!

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

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

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

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

При наличии такого количества кодов, разве можно просто создать макет?

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

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

Clear

Вероятно, все, кто читал предшествующий код заметили, что в нем появился новый элемент:

Clear – второй базовый элемент разметки 960gs. Что бы понять, что же делает clear, рассмотрим следующую ситуацию: я попытаюсь переписать последний пример, не используя clear, для удобства добавив контейнеру красный ободок.

Хм, контейнер не растянулся дочерними ячейками, а остался худеньким и одиноким. Следовательно, первая задача clear – растягивать родительский контейнер до ожидаемых размеров. Теперь, предлагаю посмотреть внимательно на первый пример из раздела grid, в котором каждая ячейка единолично занимает всю строчку. Из этого примера логично сделать вывод, что вторая задача clear – завершать текущую строку, независимо от того, сколько в ней осталось свободных колонок.
Из этих двух правил следует хорошая привычка при работе с 960gs всегда завершать любую строку с помощью clear, даже если эта строка последняя или единственная в контейнере.

Не секрет, что дивы с классом clear используются верстальщиками относительно часто. Для того, что бы избежать возможных конфликтов между кодом всего сайта и кодом 960gs в будущем, вероятно, верстальщику следует либо переименовать в коде css файла фреймворка класс clear на какой-нибудь другой (к примеру, на clr), либо уточнить его, (например, .container_12 .clear). Всё же, по моему мнению, переименование в случае вероятных конфликтов – более подходящий способ.

Далее я перечислю все дополнительные классы для элемента grid. Дополнительные они потому, что существуют только как добавочные классы к основному классу grid_X. К примеру,

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

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

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

Вложенность

В системе 960gs вложенность достигалась при помощи классов alpha и omega , удаляющих горизонтальные отступы у блока. При таком подходе вложенные строки должны содержать столько же условных ячеек по ширине, сколько их есть у внешнего блока.

В Foundation , чтобы создать вложенную строку, достаточно добавить <div> класса row в любую ячейку. Никаких дополнительных классов не требуется.

Главное отличие от 960gs состоит в том, что вложенная строка делит оставшуюся ей ширину на те же 12 долей. То есть строка внутри блока с классом medium-6 разделит эти 6 условных ячеек на 12.

Полезные направляющие

Если вы работаете напрямую из файла 960 Template , направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides :

Шаг 12: Секция содержимого

Шаг 9: Добавляем фон для секции Callout

Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill :

Поверните этот слой на 15 градусов, примените к нему наложение белого цвета и поместите его над секцией callout . Затем создайте новый слой и объедините его с белым решетчатым слоем. Дайте ему имя:

Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.

Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete . Эти действия уберут всю сетку, которая не находится в области блока callout :

Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G) , выберите градиент от черного к прозрачному.

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

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

Шаг 14: Добавляем список услуг

Повторяйте этот шаг для добавления данных:

Container

Контейнер – корневой элемент разметки 960gs, задающий параметры для модульной сетки. «Корневой элемент» — означает, что только дочерние по отношению к нему элементы фреймворка будут участвовать в формировании модульной сетки, «задающий параметры» — означает, что все элементы фреймворка, что находятся внутри контейнера, подчиняются его параметрам единообразным образом.
Контейнер с 12 колонками может выглядеть так:

Контейнер задает следующие параметры для модульной сетки:

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

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

Вложенные контейнеры в рамках идеологии 960gs являются абсурдом (представьте себе вложенные <body> в html), однако путем манипуляций с отступам в css вложить контейнеры друг в друга возможно. Вот только зачем?

Ширина колонки: 60px
Кол-во колонок: 12
Ширина канавки: 20px
Ширина контейнера = (60*12) + (20 * 11) + (20/2 * 2) = 960px

На этапе разработки удобно использовать в качестве background-image контейнера картинку-сетку, взять которую можно, например, на официальном сайте (про это будет написано немного дальше). Правда, только для стандартных 12 и 16 колоночных макетов.

Grid – один из двух базовых элементов разметки, предназначенный для расположения html-элеменов на модульной сетке контейнера. Ячейка (grid), всегда ориентирует свое содержимое в горизонтальной плоскости по отношению к контейнеру. Одна ячейка может занимать как одну колонку модульной сетки, так и все сразу, названия классов отражают данное свойство: для ячейки, занимающей одну колонку, класс будет иметь имя grid_1, для ячейки в две колонки – grid_2, для пятиколоночной ячейки — grid_5 и т.д. Следоватльно, в общем виде мы можем представить класс, как grid_X, где X – необходимая нам ширина ячейки в колонках модульной сетки. Рассмотрим пример с сетками grid_1, grid_6 и grid_12 соответственно:

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

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

Опции SASS

Foundation использует Compass и SASS . Если вы уже на « ты » с SASS , это значительно облегчает дело. Если же нет, здесь вы можете почитать о том, как начать работать с SASS в Foundation .

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

Например, класс news можно заставить вести себя как сочетание классов grid-6 columns .

Вот пример, как этого можно добиться. Допустим, у вас есть HTML-разметка:

Чтобы блоки делили экран между собой по 50%, ваш SASS должен быть следующим:

Это то же самое, как если бы мы изменили HTML-код следующим образом:

Шаг 10: Добавляем содержимое в область Callout

Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:

Дополнительная информация

Foundation может всё, что может 960gs , и даже намного больше. Обратитесь к документации , чтобы получить исчерпывающую информацию о возможностях ZURB Foundation .

Эквивалент 960gs

Полученный расклад будет похож на то, как ваша старая 960gs выглядела на экранах шириной в 640 пикселей и уже. Набор столбцов растянется на весь экран, то есть у каждого столбца ширина будет составлять 100%.

Вот ещё некоторые концепции 960gs , переведённые на язык Foundation .

Шаг 13: Содержимое – левая область

Читайте также: