Павел Михайлов. Модульная сетка: практика применения

Модульная сетка

Практика применения

Модульная сетка. Практика применения

Часть 1: CSS Frameworks

Готовые решения на службе у разработчика

Модульная сетка. Практика применения

Что такое CSS Framework? это заранее подготовленная css-библиотека,

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

Преимущества: Позволяет правильно создать XHTML-макет Вёрстка на базе слоёв, а не таблиц Более быстрая разработка Кроссбраузерность Возможность использования генераторов кода и визуальных редакторов Встроенные средства для расположения элементов по модульной сетке

Модульная сетка. Практика применения

Популярные CSS фреймворки

Elements CSS Frameworks YAML CSS Framework Yahoo YUI Grids CSS Boilerplate CSS Framework Schema Web Design Framework CleverCSS Elastic CSS Framework Blueprint CSS The jQuery UI CSS Framework 960gs CSS Framework

Модульная сетка. Практика применения

960 grid system

Базовая ширина сайта - 960px Число колонок - 12 или 16 Стандартный просвет между колонками - 20px Вёрстка колонками или регионами Кроссбраузерность Быстрый переход на резиновый макет Разделение CSS-файлов по функциям Шаблоны для популярных графредакторов Простота использования

Модульная сетка. Практика применения

Модульная сетка от 960gs

Модульная сетка. Практика применения

Элемент Container

<div class="container_12" />

HTML

Модульная сетка. Практика применения

Элемент Grid

<div class="container_12"> <div class="grid_1"><p>Мама мыла раму</p></div> <div class="clear"></div>

<div class="grid_6"><p>Мама мыла раму</p></div> <div class="clear"></div>

<div class="grid_12"><p>Мама мыла раму</p></div> <div class="clear"></div></div>

HTML

Модульная сетка. Практика применения

Элемент Grid

<div class="container_12"> <div class="grid_3"><p>Мама мыла раму</p></div> <div class="grid_6"><p>Мама мыла раму</p></div> <div class="clear"></div>

<div class="grid_4"><p>Мама мыла раму</p></div> <div class="grid_4"><p>Мама мыла раму</p></div> <div class="grid_4"><p>Мама мыла раму</p></div> <div class="clear"></div></div>

HTML

Модульная сетка. Практика применения

Элемент Clear

Завершение блока и перевод на новую строку Выравнивание размера блока по высоте

<div class="clear" />

HTML

Модульная сетка. Практика применения

Элементы Alpha и Omega

<div class="grid_1">…<div> <div class="grid_6"> <div class="grid_6 alpha">…</div><div class="clear" /> <div class="grid_6 omega">…</div><div class="clear " /> </div>

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

HTML

Модульная сетка. Практика применения

Элементы Prefix, Suffix, Push и Pull

<div class="grid_1">…</div> <div class="grid_3 suffix_1"> <p> Бегемот разинул рот - <br>Булку просит бегемот. </p></div><div class="grid_1">...</div><div class="clear" />

HTML

Модульная сетка. Практика применения

12 колонок

Модульная сетка. Практика применения

16 колонок

Модульная сетка. Практика применения

Хотите больше?

Официальный сайтhttp://960.gs/

«Резиновая» версияhttp://www.designinfluences.com/fluid960gs

Google It!http://www.google.ru/search?q=960gs

Модульная сетка. Практика применения

Часть 2: Математика

Математические приёмы в дизайне

Модульная сетка. Практика применения

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

6 золотых прямоугольников, размером 299х185 пикселей, по 3 прямоугольника в ряд. Стороны прямоугольников соотносятся по правилу золотого сечения 299/185=1,616.

Модульная сетка. Практика применения

Числа ФибоначчиРяд чисел выглядит следующим образом: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

Страница разделена на три колонки. Базовая ширина контейнера 90 пикселей. Тогда первая колонка имеет ширну 180px (90 х 2), вторая колонка имеет ширину 270px (90 х 3) и третья колонка имеет ширину 720px (90 х 8).

Размер шрифта также соответствут ряду Фибоначчи. Размер шрифта в заголовке 55px, шрифт в разделе – 34px и шрифт для текста 21px.

Модульная сетка. Практика применения

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

При определении зрительных центров кадр, как правило, делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2 (берутся последовательно идущие числа Фибоначчи).

Последний вариант дает деление кадра на три равные части (трети) вдоль каждой из сторон.

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

Модульная сетка. Практика применения

Kundli дизайнОсновой является квадрат, внутри которого две диагонали пересекают линии, соединяющие середины соседних сторон.

Модульная сетка. Практика применения

Колебания синусоиды

Подходит для отражения хронологии и горизонтальной навигации на сайте

Модульная сетка. Практика применения

Часть 3: Нестандарты

Обойдёмся без модульной сетки

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Модульная сетка. Практика применения

Спасибо!

за внимание за терпение за труд за компанию

за предоставленное помещение отдельное спасибо коллективу компании «Синерго»

Это тоже модульная сетка!