Прототипы с Grid 960 CSS Framework

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

Также Вы можете скачать исходный код нашего макета:

Скачать исходный код

Звучит замечательно, но как это сделать? Есть много статей по поддержке CSS Framework-ов, но ни одна из них не содержит ничего, чтобы помочь неопытным читателям. Эта статья будет отличаться. Она охватывает весь процесс создания прототипа. Представьте, что вы получаете дизайн, и вам нужно сделать макет для клиента. Эта статья объясняет основы Grid960 , планирования сетки для проектирования и кодирования. Выборки будут использовать наиболее возможные Grid 960, давая вам твердую базу знаний для работы. После того как вы увидите дизайн ниже, самое время узнать о том, как Grid 960 работает.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Создаем сетку

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

60px

140px

220px

300px

380px

460px

540px

620px

700px

780px

860px

940px

Каждая ширина соответствует классу, формирующемуся следующим образом:

<div> <div><p>940px</p></div> <div></div> <div><p>460px</p></div> <div><p>460px</p></div> <div></div> </div>

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

Создаем макет

Визуализация сетки дизайна легка. Существует одна строка для заголовка изображения, строки для навигационной панели, строки с 2 колонками для истории заголовков и плакатов, ниже 4 колонки, затем нижний колонтитул с 3 столбцами.

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

<div> <div></div> <div></div> <div></div> <div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Скелет готов. Время начинать накладывать дизайн. Зеленые панели — просто div-ы с цветом фона и высотой. Блок меню не имеет установленной высоты. Его высота будет управляться размером ссылок, которые лежат внутри блока. Так же не забудьте картинку в header сайта.

div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; }

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<div> <div><a href=»images/header.png» alt=»»/></div> <div></div> <div></div> <div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Средние столбцы не требует какого-либо содержания. Добавьте какой-либо текст в эти блоки. Вы можете сделать это здесь. Прежде чем приступать к верхней части, переходите к колонтитулу. На скриншоте, нижний колонтитул залит сплошным цветом. Вы не можете сделать это при данной разметке. Оберните три нижних столбца в Div, чтобы решить эту проблему. Или просто вставьте див (DIV). Это нарушает сетку из-за того, что Grid 960 полагается на родительские и дочерние ячейки, чтобы применить стили (помните селектор container_12. Grid_4?). Подсетка решает эту проблему. Grid 690позволяет использовать вложенные сетки. Создайте подсетку, добавив grid_12 DIV, затем поместите grid_4 внутри его. При использовании вложенных сеток в дочерние элементы требуют специальных классов. Первая клетка нуждается в классе «alpha» а последняя — класс “omega». Измените разметку, чтобы отразить изменения и применить стилистические изменения в колонтитуле.

<div> <div></div> <div></div> <div></div> </div>

div#footer { background-color: #e5e5e6; }

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

<div></div> <ul> <li>Articles</li> <li>Topics</li> <li>About</li> <li>Editors</li> <li>Contact</li> </ul> </div>

div#navbar ul { list-style: none; display: block; margin: 0 10px; } div#navbar ul li { float: left; margin: 0 1.5em; font: bold 1em Arial; }

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

CSS framework не решит всех ваших проблем

Внимательные читатели, возможно, что-то поняли. Создание страницы является чрезвычайно сложным делом. Все имеет определенный размер, изменение размера создает проблемы или потенциально нарушает дизайн. Например, исходный дизайн был 1000px в ширину. Сетка же 960 только создает сетку 960px шириной, так что дополнительные размеры теряются. Что делать, если вы хотите сделать вашу страницу 1000px вместо 960px? Одним словом, вы не сделаете ничего, кроме как сделать множество сложных изменений в коде. Сетки ограничивают дизайнеров и создают множество препятствий. Скажем, клиент хочет, чтобы дизайн был шире или тоньше. Дизайнер должен будет, скорее всего, отказаться от кода, который написан для выполнения новых задач. Существует еще одна проблема, которая не была выявлена раньше – это равные по высоте столбцы. Т.к. все средние столбцы делят один задний фон, они имеют одинаковую высоту. В footer-е шаблона Div ставит фон за 3 столбцами. Сетка 960 не дает Вам равные по высоте столбцы. Конечно, вы можете все сделать по-своему. Поскольку мы создаем прототип, не тратьте времени на беспокойство по поводу деталей о том, как дизайн будет функционировать в процессе производства. Мы только пытаемся передать идеи на этом этапе.

Давайте закончим с верхней частью вкладки.

Верхняя часть

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

<div> <div> </div> </div> <div> </div>

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

div.topSection div { border: solid 10px #e5e5e6; height: 280px; } div.topSection div p { margin: 10px; }

Круто! Давайте проверим наш прогресс.

Готовы для заполнения двух контейнеров?

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

Пришло время получить плакатное изображение. Перед вставкой изображения определите его размеры. Если ты хороший математик и сможешь сделать прикидку свободного пространства, то вы сами знаете, насколько большим оно должно быть. Если нет – пулей в FireBug и отправляйтесь в DOM. Нажмите на инспекцию (Inspect – в английской версии). Спускайтесь на Div в вопросах и нажмите на нее. Откройте вкладку Макет (Layout). FireBug будет отображать рекомендации эталонной модели окна. Проверьте изображение в разделе помощь. Нажмите на картинку для получения реальных рзмеров.

Скриншот показывает картинку размером 360×280 px. Найдите изображение и создайте свой стиль. Я решил, чтобы изображение полностью заполнило пустое пространство.

img#poster { width: 360px; height: 280px; }

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

Знайте границы

Теперь, когда прототип готов, подведем итоги того, что было сделано. Вы смогли быстро создать прототип дизайна. Grid 960 легко создает сетки для нас. Куда идти дальше? Естественно, мы хотели бы показать работу клиенту и посмотреть, что они думают. Есть несколько предостережений. Вы проверили этот дизайн в IE6 и IE7? Нет. Должны ли мы? Нет. Это прототип. Это то, как он будет выглядеть в производстве. Вполне естественно, что любые причуды браузера будут устранены до производства. Что делать, если клиент хочет создать более сложный дизайн? В этом случае, вы быстро начнете видеть пределы этих рамок. Что делать, если дизайн должен быть «жидким»? Рамки не будут делать этого. Вам будет необходимо начать с нуля. Помните, что CSS framework не решат все ваши проблемы, но они помогут с решением некоторых задач . Grid 960, а также другие сетки великолепны для лепки воедино прототипов.

Редакция: Рог Виктор и Андрей Бернацкий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Создание прототипа с помощью CSS-фреймворка 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-ти колоночной сетки:

1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10. 780px
11. 860px
12. 940px

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

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

<div>
<div><p>940px</p></div>

<div></div>
<div><p>460px</p></div>
<div><p>460px</p></div>

<div></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>
<div></div>
<div></div>

<div></div>
<div> </div>

<div></div>
<div></div>

<div></div>

<div></div>
<div></div>

<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>

<div></div>
<div></div>

<div></div>
</div>

* This source code was highlighted with Source Code Highlighter.

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

div.spacer {
background-color: #8FC73E;
height: 1em;
}

div#navbar {
background-color: #8FC73E;
padding: 10px 0;
}

* This source code was highlighted with Source Code Highlighter.

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

<div>
<div><a href="images/header.png" alt=""/></div>
<div></div>

<div></div>
<div> </div>

<div></div>

<div></div>
<div></div>

<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>

<div></div>
<div></div>

<div></div>

<div></div>
<div></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>
<div></div>
<div></div>

<div></div>
</div>

* This source code was highlighted with Source Code Highlighter.

div#footer {
background-color: #e5e5e6;
}

* This source code was highlighted with Source Code Highlighter.

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

<div></div>
<ul>
<li>Articles</li>
<li>Topics</li>

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

</div>

* This source code was highlighted with Source Code Highlighter.

div#navbar ul {
list-style: none;
display: block;
margin: 0 10px;
}

div#navbar ul li {
float: left;
margin: 0 1.5em;
font: bold 1em Arial;
}

* This source code was highlighted with Source Code Highlighter.

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

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

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

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

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

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

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

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

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

<div>
<div> </div>
</div>
<div>

</div>

* This source code was highlighted with Source Code Highlighter.

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

div.topSection div {
border: solid 10px #e5e5e6;
height: 280px;
}

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 пикселей с каждой стороны.

img#poster {
width: 360px;
height: 280px;
}

* This source code was highlighted with Source Code Highlighter.

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

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

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

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

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

Скачать архив с примером.

Модульная сетка | maximsoldatkin.com

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

Модульная сетка сайта – для чего нужна?

Если вы поищите информацию в интернете про модульные сетки, то вы увидите что-то подобное (рис.1).

Рис. 960 grid

То есть, это модульная сетка 12-ти колонок, а также 14-ти, 16-ти и 18-ти. Это столбики розовые, которые делятся на какие-то модули там по 2-3- 4 и так далее колонки. Так называемый 960 grid. И какие еще есть рекомендации? Чтобы сделать макет, мы начинаем с какой-то сетки вертикальных колонок, горизонтальных колонок, горизонтальный ритм с какой-то базовой высотой строки. Дальше мы эти колонки и столбики как-то объединяем и получаем в результате какой-то очень красивый, гармоничный, выровненный по сетке макет (рис.2).

Рис.2 Модули, блоки, макет

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

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

Рис.3 Сетка рабица

Кстати, рекомендую посмотреть прямо сейчас:

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

Вот о чем я говорю. Давайте, я на примере покажу.

Вот есть сайт lenta.ru (рис.4).

Рис.4 Сайт lenta.ru

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

Видим, что у нас получилось 1, 2, 3, 4 колонки (рис. 5).Первая – 140 пикселей, остальные одинаковые по 210. И, в принципе, на этом наши оси могут закончиться.

Рис.5 Основные оси

Дальше мы имеем еще отступы. Отступы между колонками и отступы между блоками. Здесь, здесь, здесь и так далее. Вот отступы между блоками… Лучше использовать для их определения модули.

Мы видим, что у нас (вот я снизу их показал) есть определенные модули. 12 пикселей, 6 пикселей. Здесь 12, 6 12, 12, 12, 6 12 (рис.6).

Все это определенные единички, еще раз: модули, которые мы используем как для отступов между колонками, так и для отступов между блоками (для вертикальных отступов).

Тоже видим, что здесь 12, здесь 2 раза по 12, здесь тоже 2 раза по 12, но это все делится еще такой маленькой тоненькой полосочкой. Здесь 6 и 12, потому что у нас тут конец строки (рис.6).

У этого макета можно сформулировать определенные правила, определенные закономерности вертикальные и горизонтальные. Что у нас есть 4 оси и получилось колонки по 140 и 210 пикселей. И отступы, кратные 6 – это, как правило, 6 и 12. 6 и 12 и там еще 18, 24 как комбинация 6 и 12.

Зачем это нужно? Чтобы в дальнейшем… На самом деле, зачем нужны модульные сетки? Чтобы в дальнейшем, когда вы сделали одну страницу, когда вам понадобилось сделать какую-то следующую страницу, вы уже не думаете лишний раз, какие колонки использовать, как контент выровнять, какие отступы сделать – вы используете то, что есть.

Можем для контента использовать эти три колонки, а дальше сделать следующую колонку поменьше – для какой-то статьи, может быть (рис.7).

Рис.6 Отступы

Модульные сетки в веб дизайне: вертикальный и горизонтальный ритм

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

Какой еще может быть? Usatoday – сайт немножко посложнее. Принцип тот же на самом деле, просто здесь колонок больше. Тоже вертикальные оси основные. Вот здесь блоки начинаются, вот этот блок начинается. Здесь колонка маленькая (160 пикселей), эта тоже 240 (рис.8).

Рис.8. Сайт usatoday.com

То есть, здесь мы видим, что одна маленькая колонка в середине и три равнозначные – здесь две и здесь одна. И то же самое с модулями. Здесь только кратны они 9. 9, 9, 9, 9 12. Ну, здесь вот еще получается 12 – 9+3. То есть, кратно 3 получается. Потому что здесь решили отделить вот эту колонку чуть большим отступом.

И вертикальные тоже между блоками – тоже девятки, девятки, девятки. То есть, тоже видим модульность в этой всей штуке. И правила получаются: колонки – 160, 240; отступы – 3, 9. Основные – 3, 9. Вот это, в принципе, можно уже убрать. Которые у нас определяют – 3, 9, 12.

Давайте вернемся. Я то же самое использую в своих работах. Вот это макет я уже готовил для верстки модульной сетки (рис.9).

Рис.9 Вертикальные правила

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

У нас есть 200, 350, 600. Дальше кратность отступов – это кратность отступов вертикальных и размеры шрифтов модульной сетки. Вот про вертикальные отступы – у меня есть 80, есть 10-ки, есть 30, есть 50. И 80 – это, на самом деле 30+50=80 (рис.10).

Рис.10 Горизонтальные правила

И тут и вам проще – не нужно каждый раз думать, какой отступ вам отступить между блоками (как по вертикали, так и по горизонтали), и верстальщику, на самом деле, проще.

Вам не нужно на самом деле даже идеально пиксель в пиксель выравнивать макет – достаточно ему сказать, что у нас тут отступы вот такие. Если у меня в макете где-то 39 или 31, то это неправильно – нужно исправить на 30. Вдобавок я и шрифты тоже пишу, что у нас есть только такие шрифты.

Зачем нужны модульные сетки?

Не стоит сильно много развлекаться с осями. То, что здесь нарисовано – это не сетка, не правило – это хаос, в котором ни вам, ни верстальщику невозможно ориентироваться (рис.11).

Рис.11 Не сетка, а хаос

Используйте оси как направляющие для основных блоков, а для вот таких мелких деталей лучше использовать модули – они будут кратны 3, 4, 5 – не знаю, это на ваш выбор, на ваше усмотрение.

Какая здесь последовательность (рис.12)?

Рис.12 Последовательность создания сетки

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

Если вы хотите ее расположить (какую-то картинку) крупно, то она должна быть крупной. Что-то меньше, что-то еще меньше, что-то объединено и так далее. То есть, начинается все с того, что вы думаете, как человек будет вашу страницу смотреть, как он ее будет изучать.

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

Дальше – следование. И после этого – смещение. То есть, разумеется, то правило, те отступы, которые вы придумали в самом начале, когда у вас еще было 5-10% макета – у вас они могут измениться. У вас может что-то в дальнейшем не совпасть, что-то должно быть чуть меньше, чуть больше. Ту ось, которую вы провели, нужно пододвинуть, на следующей странице тоже что-то изменить и так далее.

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

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

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

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

Аккумуляторная батарея Hoppecke grid.power VR L 2-960 (8 OpzV 800) 2 В / 800 Ач

Герметизированные свинцово-кислотные аккумуляторные батареи Hoppecke grid.power VR L 2-960 (8 OpzV 800) 2 В / 800 Ач с трубчатыми положительными пластинами и сгущенным силикагелем электролитом (технология OPzV). Это повышает температурную стабильность, плотность энергии и устойчивость к негативному влиянию глубокого разряда батарей grid.power VR L. Аккумуляторы grid.power VR L используются в системах резервного питания телекоммуникационного оборудования, энергетике, промышленности и транспорте, при буферном и циклическом режиме работы.

Создание прототипа с помощью CSS-фреймворка Grid 960 — Очередной блог фрилансера

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-ти колоночной сетки:

1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10. 780px
11. 860px
12. 940px

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

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

<div>   
    <div><p>940px</p></div>   
  
    <div></div>   
    <div><p>460px</p></div>     
    <div><p>460px</p></div>   
  
    <div></div>   
</div>   

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

Макет

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

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

<div>   
    <div></div>   
    <div></div>   
  
       
    <div></div>   
    <div> </div>   
       
    <div></div>   
    <div></div>   
  
    <div></div>   
       
    <div></div>   
    <div></div>   
       
    <div></div>   
  
    <div></div>   
    <div></div>   
    <div></div>   
    <div></div>   
  
       
    <div></div>   
    <div></div>   
       
    <div></div>   
    <div></div>   
  
    <div></div>   
</div>   

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

div.spacer {   
    background-color: #8FC73E;   
    height: 1em;   
}   
  
div#navbar {   
    background-color: #8FC73E;   
    padding: 10px 0;   
}   

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

<div>   
    <div><a href="images/header.png" alt=""/></div>   
    <div></div>   
  
       
    <div></div>   
    <div> </div>   
       
    <div></div>   
  
    <div></div>   
    <div></div>   
       
    <div></div>   
    <div></div>   
  
       
    <div></div>   
    <div></div>   
    <div></div>   
    <div></div>   
  
    <div></div>   
       
    <div></div>   
    <div></div>   
       
    <div></div>   
  
    <div></div>   
    <div></div>   
</div>   

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

<div>   
    <div></div>   
    <div></div>   
  
    <div></div>   
</div>   

div#footer {   
    background-color: #e5e5e6;   
}   

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

<div></div>   
    <ul>   
        <li>Articles</li>   
        <li>Topics</li>   
  
        <li>About</li>   
        <li>Editors</li>   
        <li>Contact</li>   
    </ul>   
  
</div>   

div#navbar ul {   
    list-style: none;   
    display: block;   
    margin: 0 10px;   
}   
  
div#navbar ul li {   
    float: left;   
    margin: 0 1.5em;   
    font: bold 1em Arial;   
}   

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

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

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

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

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

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

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

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

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

<div>   
    <div> </div>   
</div>   
<div>   
  
</div>   

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

div.topSection div {   
    border: solid 10px #e5e5e6;   
    height: 280px;   
}   
  
div.topSection div p {   
    margin: 10px;   
}   

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

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

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

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

img#poster {   
    width: 360px;   
    height: 280px;   
}   

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

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

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

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

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

Скачать архив с примером.

Перевод статьи «Prototyping With The Grid 960 CSS Framework«, автор Adam Hawkins

960 Сетка

Скачать — CSS, бумага для набросков и шаблоны для: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Репозиторий на GitHub.

Сущность

Система 960 Grid System — это попытка упростить рабочий процесс веб-разработки, предоставляя часто используемые размеры на основе ширины 960 пикселей.Есть два варианта: 12 и 16 столбцов, которые можно использовать по отдельности или в тандеме. Прочитайте больше.

Габаритные размеры

Сетка из 12 столбцов разделена на части шириной 60 пикселей. Сетка из 16 столбцов состоит из 40 пикселей. Каждый столбец имеет поля 10 пикселей слева и справа, которые создают промежутки шириной 20 пикселей между столбцами. Посмотреть демо.

Цель

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

Больше столбцов

Для тех, кому удобнее работать с сеткой из 24 столбцов, также включена альтернативная версия. Он состоит из столбцов шириной 30 пикселей, с промежутками по 10 пикселей и 5-пиксельного буфера с каждой стороны контейнера. Это не позволяет тексту касаться хрома браузера — полезно для таких устройств, как iPhone, где строчные буквы «i» или «l» могут быть легко пропущены.Посмотреть демо.

Исходный заказ

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

Код

Посмотрите исчерпывающий код на демонстрационной странице.

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

Если блок сетки содержит дочерние элементы сетки, первому дочернему элементу в строке потребуется класс alpha , а последнему дочернему элементу в строке потребуется имя класса omega .Аналогичным образом, если вы хотите вставить пустое пространство до или после единицы сетки, используйте префикс класса _XX или суффикс _XX .

 

  

      

          ...
      
      

          ...
      
      

          ...
      
  
  

      ...
  
 

Девять шестьдесят

Все современные мониторы поддерживают разрешение не менее 1024 × 768 пикселей.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. Это делает его очень гибким базовым числом для работы.

Кредиты

Я черпал вдохновение в этих людях: Хой Винх, Камерон Молл, Олав Бьоркёй, Брэндон Шауэр, Джефф Крофт, Марк Бултон и Эрик Мейер. Их работа подтолкнула меня к созданию своей собственной. Я, так сказать, «стою на плечах гигантов».

Плагины

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

Учебники

Web Designer Depot опубликовал статью о том, как писать меньше кода за счет непосредственного стилизации тегов. Nettuts имеет как учебник, так и видео. WooThemes написал сообщение под названием «Почему мы любим 960.gs.» Также есть статьи на испанском и шведском языках [1] [2].

Производные

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

960 Grid System — демонстрация

Сетка из 12 столбцов

940

60

860

140

780

220

700

300

620

380

540

460

460

60

60

60

60

60

60

60

60

60

60

60

60

60

380

220

220

220

220

60

380

Сетка из 16 столбцов

940

40

880

100

820

160

760

220

700

280

640

340

580

400

520

460

460

40

40

40

40

40

40

40

40

40

40

40

40

40

40

40

40

40

400

220

220

220

220

40

400

Простая система сетки 960

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

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

Со всем этим кодом, как может быть простым способом для создания макета?

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

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

Сетевой дизайн

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

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

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

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

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

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

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

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

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

Зачем мне сетка?

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

Сетка 960 — это просто способ разметки веб-сайтов с использованием сетки шириной 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.

Классы CSS сейчас в сеансе

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

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

Классы имеют удобные названия в соответствии с их размером: grid_1 CSS-класс является самым узким, а grid_12 CSS-класс является самым широким ( grid_16 является самым широким в версии с 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).

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

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

Тяни меня, Тяни меня

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

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

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

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

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

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

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

Перед толканием / вытягиванием:

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

  
 логотип 
 


  
 текстовый столбец 
 

 
  
 текстовый столбец 
 


  
 большая коробка 
 
 

В результате получается макет, показанный на изображении ниже.

После выталкивания / вытягивания:

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

Широкие просторы

Вы часто обнаруживаете, что хотите создать в макете пустое пространство (отрицательное пространство — хороший дизайнерский прием). Для этого примените классы префикса и суффикс к вашим div. Они реализованы очень аналогично классам push и pull .

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

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

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

Последнее, что вам нужно знать, это то, что вам предоставлены классы alpha («первый») и omega («последний»), которые должны быть применены к любым блокам сетки, которые являются дочерние элементы других сеток.

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

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

Давайте рассмотрим

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

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

1. Используйте класс container_12 для версии с 12 столбцами и container_16 для версии с 16 столбцами.
2. Используйте классы grid_1 , grid_2 , grid_3 и т. Д., Чтобы установить ширину столбцов. Если вы хотите заполнить страницу по горизонтали, убедитесь, что сумма чисел составляет 12 или 16 (т.е. grid_4 + grid_2 + grid_6 = 12).
3. Используйте классы push и pull для независимого позиционирования элементов на странице, независимо от их положения в разметке вашей страницы.
4. Используйте классы с префиксом и суффикс для создания пустых пространств в макете.
5. Используйте alpha и omega , чтобы зафиксировать поля для любых вложенных единиц сетки.

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

960 Системные ресурсы сетки

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

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

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

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

Чрезвычайно легкая сеточная система, простая и понятная. Его можно настраивать, но по умолчанию — 960 пикселей.

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

Простой и гибкий конструктор CSS-сеток на основе 960 Grid System.

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

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

Типогридфия

С сайта: «Typogridphy — это CSS-фреймворк, созданный, чтобы позволить веб-дизайнерам и интерфейсным разработчикам быстро кодировать типографически приятные макеты сетки.”

Крошечная сетка для жидкости

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

Не в сети

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

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

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

Ваши мысли о сетевых системах?

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

Связанное содержимое

nathansmith / 960-Grid-System: 960-Grid System — это попытка упростить рабочий процесс веб-разработки.

Создано Натаном Смитом. Дополнительную информацию см. На официальном сайте: http://960.gs

Чтобы установить расширение Adobe Fireworks, просто дважды щелкните файл * .mxp включен в каталог / app_plugins / fireworks . Если вы используете Windows 7 вам потребуются права администратора, чтобы правильно установить это расширение.

Спасибо за загрузку 960 Grid System. Надеюсь, это поможет упростить рабочий процесс веб-разработки. В комплект входят листы с эскизами для печати. и файлы шаблонов для Adobe Fireworks и Photoshop, OmniGraffle и Visio.

Также включен облегченный файл CSS, который содержит размеры сетки. Чтобы использовать этот файл, просто включите 960.css в HTML-страницы. Вы также можете использовать файлы reset.css и text.css или отказаться от них. Вот пример кода XHTML, необходимого для включения файлов CSS:

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

Файлы в системе 960 Grid System предоставляются бесплатно по лицензии MIT / GPL.

Обратите внимание: если вы создаете сайт на языке, читаемом справа от left, используйте файлы CSS, которые заканчиваются на _rtl.css . Обозначим язык:

Обязательно установите для lang = "..." соответствующее двухбуквенное сокращение язык, который вы используете. Пример: lang = «he» для иврита, lang = «ar» для арабского.

  / *
* 960 Адаптивная сетка
* Авторское право 2012, Тайлер Вольф
* Бесплатное использование по лицензии MIT.* http://www.opensource.org/licenses/mit-license.php
* 10.12.2012
* /  / * Ширина вертикальной ориентации планшета до 960 пикселей * /
@media only screen и (min-width: 768px) и (max-width: 959px) {  тело {
 минимальная ширина: 768 пикселей;
 }  .container_12,
 .container_16 {
 ширина: 768 пикселей;
 }  .container_12 .grid_1 {width: 44px; }
 .container_12 .grid_2 {ширина: 108 пикселей; }
 .container_12 .grid_3 {ширина: 172 пикселей; }
 .container_12 .grid_4 {ширина: 236 пикселей; }
 .container_12 .grid_5 {ширина: 300 пикселей; }
 .container_12.grid_6 {ширина: 364 пикселей; }
 .container_12 .grid_7 {ширина: 428 пикселей; }
 .container_12 .grid_8 {ширина: 492 пикселей; }
 .container_12 .grid_9 {ширина: 556 пикселей; }
 .container_12 .grid_10 {ширина: 620 пикселей; }
 .container_12 .grid_11 {ширина: 684 пикселей; }
 .container_12 .grid_12 {ширина: 748 пикселей; }  .container_16 .grid_1 {ширина: 28 пикселей; }
 .container_16 .grid_2 {ширина: 76 пикселей; }
 .container_16 .grid_3 {ширина: 124 пикселей; }
 .container_16 .grid_4 {ширина: 172 пикселей; }
 .container_16 .grid_5 {ширина: 220 пикселей; }
 .container_16 .grid_6 {ширина: 268 пикселей; }
 .container_16 .grid_7 {ширина: 316 пикселей; }
 .container_16 .grid_8 {ширина: 364 пикселей; }
 .container_16 .grid_9 {ширина: 412 пикселей; }
 .container_16 .grid_10 {ширина: 460 пикселей; }
 .container_16 .grid_11 {ширина: 508 пикселей; }
 .container_16 .grid_12 {ширина: 556 пикселей; }
 .container_16 .grid_13 {ширина: 604 пикселей; }
 .container_16 .grid_14 {ширина: 652 пикселей; }
 .container_16 .grid_15 {ширина: 700 пикселей; }
 .container_16 .grid_16 {ширина: 748 пикселей; }  .container_12 .prefix_1 {padding-left: 64px; }
 .container_12 .prefix_2 {отступ слева: 128 пикселей; }
 .container_12 .prefix_3 {padding-left: 192px; }
 .container_12 .prefix_4 {padding-left: 256px; }
 .container_12 .prefix_5 {padding-left: 320px; }
 .container_12 .prefix_6 {padding-left: 384px; }
 .container_12 .prefix_7 {padding-left: 448px; }
 .container_12 .prefix_8 {padding-left: 512px; }
 .container_12 .prefix_9 {padding-left: 576px; }
 .container_12 .prefix_10 {padding-left: 640px; }
 .container_12 .prefix_11 {padding-left: 704px; }  .container_16 .prefix_1 {padding-left: 48px; }
 .container_16 .prefix_2 {отступ слева: 96 пикселей; }
 .container_16 .prefix_3 {padding-left: 144px; }
 .container_16 .prefix_4 {padding-left: 192px; }
 .container_16 .prefix_5 {padding-left: 240 пикселей; }
 .container_16 .prefix_6 {padding-left: 288px; }
 .container_16 .prefix_7 {padding-left: 336px; }
 .container_16 .prefix_8 {padding-left: 384px; }
 .container_16 .prefix_9 {padding-left: 432px; }
 .container_16 .prefix_10 {отступ слева: 480 пикселей; }
 .container_16 .prefix_11 {padding-left: 528px; }
 .container_16 .prefix_12 {padding-left: 576px; }
 .container_16 .prefix_13 {padding-left: 624px; }
 .container_16 .prefix_14 {padding-left: 672px; }
 .container_16 .prefix_15 {padding-left: 720 пикселей; }  .container_12 .suffix_1 {padding-right: 64px; }
 .container_12 .suffix_2 {правый отступ: 128 пикселей; }
 .container_12 .suffix_3 {padding-right: 192px; }
 .container_12 .suffix_4 {правый отступ: 256 пикселей; }
 .container_12 .suffix_5 {padding-right: 320px; }
 .container_12 .suffix_6 {padding-right: 384px; }
 .container_12 .suffix_7 {padding-right: 448px; }
 .container_12 .suffix_8 {правый отступ: 512 пикселей; }
 .container_12 .suffix_9 {padding-right: 576px; }
 .container_12 .suffix_10 {padding-right: 640 пикселей; }
 .container_12 .suffix_11 {padding-right: 704px; }  .container_16 .suffix_1 {padding-right: 48px; }
 .container_16 .suffix_2 {правый отступ: 96 пикселей; }
 .container_16 .suffix_3 {padding-right: 144px; }
 .container_16 .suffix_4 {padding-right: 192px; }
 .container_16 .suffix_5 {padding-right: 240 пикселей; }
 .container_16 .suffix_6 {padding-right: 288px; }
 .container_16 .suffix_7 {padding-right: 336px; }
 .container_16 .suffix_8 {padding-right: 384px; }
 .container_16 .suffix_9 {padding-right: 432px; }
 .container_16 .suffix_10 {padding-right: 480 пикселей; }
 .container_16 .suffix_11 {padding-right: 528px; }
 .container_16 .suffix_12 {padding-right: 576px; }
 .container_16 .suffix_13 {padding-right: 624px; }
 .container_16 .suffix_14 {padding-right: 672px; }
 .container_16 .suffix_15 {padding-right: 720 пикселей; }  .container_12 .push_1 {left: 64px; }
 .container_12 .push_2 {слева: 128 пикселей; }
 .container_12 .push_3 {left: 192px; }
 .container_12 .push_4 {слева: 256 пикселей; }
 .container_12 .push_5 {left: 320px; }
 .container_12 .push_6 {left: 384px; }
 .container_12 .push_7 {left: 448px; }
 .container_12 .push_8 {слева: 512 пикселей; }
 .container_12 .push_9 {left: 576px; }
 .container_12 .push_10 {слева: 640 пикселей; }
 .container_12 .push_11 {слева: 704px; }  .container_16 .push_1 {осталось: 48 пикселей; }
 .container_16 .push_2 {слева: 96 пикселей; }
 .container_16 .push_3 {left: 144px; }
 .container_16 .push_4 {left: 192px; }
 .container_16 .push_5 {слева: 240 пикселей; }
 .container_16 .push_6 {left: 288px; }
 .container_16 .push_7 {left: 336px; }
 .container_16 .push_8 {left: 384px; }
 .container_16 .push_9 {слева: 432px; }
 .container_16 .push_10 {слева: 480 пикселей; }
 .container_16 .push_11 {left: 528px; }
 .container_16 .push_12 {left: 576px; }
 .container_16 .push_13 {слева: 624px; }
 .container_16 .push_14 {left: 672px; }
 .container_16 .push_15 {слева: 720 пикселей; }  .container_12 .pull_1 {left: -64px; }
 .container_12 .pull_2 {слева: -128px; }
 .container_12 .pull_3 {слева: -192px; }
 .container_12 .pull_4 {слева: -256px; }
 .container_12 .pull_5 {слева: -320px; }
 .container_12 .pull_6 ​​{слева: -384px; }
 .container_12 .pull_7 {left: -448px; }
 .container_12 .pull_8 {слева: -512px; }
 .container_12 .pull_9 {слева: -576px; }
 .container_12 .pull_10 {слева: -640px; }
 .container_12 .pull_11 {слева: -704px; }  .container_16 .pull_1 {left: -48px; }
 .container_16 .pull_2 {слева: -96 пикселей; }
 .container_16 .pull_3 {left: -144px; }
 .container_16 .pull_4 {слева: -192px; }
 .container_16 .pull_5 {left: -240px; }
 .container_16 .pull_6 ​​{left: -288px; }
 .container_16 .pull_7 {слева: -336px; }
 .container_16 .pull_8 {слева: -384px; }
 .container_16 .pull_9 {слева: -432px; }
 .container_16 .pull_10 {слева: -480 пикселей; }
 .container_16 .pull_11 {слева: -528px; }
 .container_16 .pull_12 {слева: -576px; }
 .container_16 .pull_13 {слева: -624px; }
 .container_16 .pull_14 {слева: -672px; }
 .container_16 .pull_15 {слева: -720 пикселей; }  }  / * Все мобильные ширины * /
@media only screen и (max-width: 767px) {  тело {
 минимальная ширина: 300 пикселей;
 }  .container_12,
 .container_16 {
 ширина: 300 пикселей;
 }  .container_12 .grid_1,
 .container_16 .grid_1,
 .container_12 .grid_2,
 .container_16 .grid_2,
 .container_12 .grid_3,
 .container_16 .grid_3,
 .container_12 .grid_4,
 .container_16 .grid_4,
 .container_12 .grid_5,
 .container_16 .grid_5,
 .container_12 .grid_6,
 .container_16 .grid_6,
 .container_12 .grid_7,
 .container_16 .grid_7,
 .container_12 .grid_8,
 .container_16 .grid_8,
 .container_12 .grid_9,
 .container_16 .grid_9,
 .container_12 .grid_10,
 .container_16 .grid_10,
 .container_12 .grid_11,
 .container_16 .grid_11,
 .container_12 .grid_12,
 .container_16 .grid_12,
 .container_12 .grid_13,
 .container_16 .grid_13,
 .container_12 .grid_14,
 .container_16 .grid_14,
 .container_12 .grid_15,
 .container_16 .grid_15,
 .container_12 .grid_16,
 .container_16 .grid_16 {
 маржа: 0;
 ширина: 300 пикселей;
 }  .container_12 .prefix_1,
 .container_16 .prefix_1,
 .container_12 .prefix_2,
 .container_16 .prefix_2,
 .container_12 .prefix_3,
 .container_16 .prefix_3,
 .container_12 .prefix_4,
 .container_16 .prefix_4,
 .container_12 .prefix_5,
 .container_16 .prefix_5,
 .container_12.prefix_6,
 .container_16 .prefix_6,
 .container_12 .prefix_7,
 .container_16 .prefix_7,
 .container_12 .prefix_8,
 .container_16 .prefix_8,
 .container_12 .prefix_9,
 .container_16 .prefix_9,
 .container_12 .prefix_10,
 .container_16 .prefix_10,
 .container_12 .prefix_11,
 .container_16 .prefix_11,
 .container_12 .prefix_12,
 .container_16 .prefix_12,
 .container_12 .prefix_13,
 .container_16 .prefix_13,
 .container_12 .prefix_14,
 .container_16 .prefix_14,
 .container_12 .prefix_15,
 .container_16 .prefix_15 {
 отступ слева: 0;
 }  .container_12 .suffix_1,
 .container_16 .suffix_1,
 .container_12 .suffix_2,
 .container_16 .suffix_2,
 .container_12 .suffix_3,
 .container_16 .suffix_3,
 .container_12 .suffix_4,
 .container_16 .suffix_4,
 .container_12 .suffix_5,
 .container_16 .suffix_5,
 .container_12 .suffix_6,
 .container_16 .suffix_6,
 .container_12 .suffix_7,
 .container_16 .suffix_7,
 .container_12 .suffix_8,
 .container_16 .suffix_8,
 .container_12.суффикс_9,
 .container_16 .suffix_9,
 .container_12 .suffix_10,
 .container_16 .suffix_10,
 .container_12 .suffix_11,
 .container_16 .suffix_11,
 .container_12 .suffix_12,
 .container_16 .suffix_12,
 .container_12 .suffix_13,
 .container_16 .suffix_13,
 .container_12 .suffix_14,
 .container_16 .suffix_14,
 .container_12 .suffix_15,
 .container_16 .suffix_15 {
 отступ справа: 0;
 }  .container_12 .push_1,
 .container_16 .push_1,
 .container_12 .push_2,
 .container_16 .push_2,
 .container_12 .push_3,
 .container_16 .push_3,
 .container_12 .push_4,
 .container_16 .push_4,
 .container_12 .push_5,
 .container_16 .push_5,
 .container_12 .push_6,
 .container_16 .push_6,
 .container_12 .push_7,
 .container_16 .push_7,
 .container_12 .push_8,
 .container_16 .push_8,
 .container_12 .push_9,
 .container_16 .push_9,
 .container_12 .push_10,
 .container_16 .push_10,
 .container_12 .push_11,
 .container_16 .push_11,
 .container_12 .push_12,
 .container_16 .push_12,
 .container_12 .push_13,
 .container_16 .push_13,
 .container_12 .push_14,
 .container_16 .push_14,
 .container_12 .push_15,
 .container_16 .push_15,
 .container_12 .pull_1,
 .container_16 .pull_1,
 .container_12 .pull_2,
 .container_16 .pull_2,
 .container_12 .pull_3,
 .container_16 .pull_3,
 .container_12 .pull_4,
 .container_16 .pull_4,
 .container_12 .pull_5,
 .container_16 .pull_5,
 .container_12 .pull_6,
 .container_16 .pull_6,
 .container_12 .pull_7,
 .container_16 .pull_7,
 .container_12 .pull_8,
 .container_16 .pull_8,
 .container_12 .pull_9,
 .container_16 .pull_9,
 .container_12 .pull_10,
 .container_16 .pull_10,
 .container_12 .pull_11,
 .container_16 .pull_11,
 .container_12 .pull_12,
 .container_16 .pull_12,
 .container_12 .pull_13,
 .container_16 .pull_13,
 .container_12 .pull_14,
 .container_16 .pull_14,
 .container_12 .pull_15,
 .container_16 .pull_15 {
 слева: 0;
 }  }  / * От ширины мобильной альбомной ориентации до вертикальной ширины планшета * /
@media only screen и (min-width: 480px) и (max-width: 767px) {  тело {
 минимальная ширина: 480 пикселей;
 }  .container_12,
 .container_16 {
 ширина: 420 пикселей;
 }  .container_12 .grid_1,
 .container_16 .grid_1,
 .container_12 .grid_2,
 .container_16 .grid_2,
 .container_12 .grid_3,
 .container_16 .grid_3,
 .container_12 .grid_4,
 .container_16 .grid_4,
 .container_12 .grid_5,
 .container_16 .grid_5,
 .container_12 .grid_6,
 .container_16 .grid_6,
 .container_12 .grid_7,
 .container_16 .grid_7,
 .container_12 .grid_8,
 .container_16 .grid_8,
 .container_12 .grid_9,
 .container_16 .grid_9,
 .container_12 .grid_10,
 .container_16 .grid_10,
 .container_12 .grid_11,
 .container_16 .grid_11,
 .container_12 .grid_12,
 .container_16 .grid_12,
 .
No related posts.