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

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

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

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

Часть 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: Нестандарты

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


Спасибо!

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

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

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