Модульная сетка<br />Практика применения<br />
Часть 1: CSS Frameworks<br />Готовые решения на службе у разработчика<br />Модульная сетка. Практика применения<br />
Что такое CSS Framework?<br />это заранее подготовленная css-библиотека, созданная для упрощения работы верстальщика, быст...
Вёрстка на базе слоёв, а не таблиц
Более быстрая разработка
Кроссбраузерность
Возможность использования генераторов кода и визуальных редакторов
Встроенные средства для расположения элементов по модульной сетке</li></ul>Модульная сетка. Практика применения<br />
Популярные CSS фреймворки<br />Elements CSS Frameworks<br />YAML CSS Framework <br />Yahoo YUI Grids CSS<br />Boilerplate ...
960 grid system <br />Базовая ширина сайта - 960px<br />Число колонок - 12 или 16<br />Стандартный просвет между колонками...
Модульная сетка от 960gs<br />Модульная сетка. Практика применения<br />
Элемент Container<br />HTML<br /><div class="container_12" /><br />Модульная сетка. Практика применения<br />
Элемент Grid<br />HTML<br /><div class="container_12"><br />    <div class="grid_1"><p>Мама мыла раму</p></div><br />    <...
Элемент Grid<br />HTML<br /><div class="container_12"><br />    <div class="grid_3"><p>Мама мыла раму</p></div><br />    <...
Элемент Clear<br />HTML<br /><div class="clear" /><br />Завершение блока и перевод на новую строку<br />Выравнивание разме...
Элементы Alphaи Omega<br />HTML<br /><div class="grid_1">…<div><br /><div class="grid_6"><br />        <div class="grid_6 ...
Элементы Prefix, Suffix, Push и Pull<br />HTML<br /><div class="grid_1">…</div><br />    <div class="grid_3 suffix_1"><br ...
12 колонок<br />Модульная сетка. Практика применения<br />
16 колонок<br />Модульная сетка. Практика применения<br />
Хотите больше?<br />Официальный сайт<br />http://960.gs/<br />«Резиновая» версия<br />http://www.designinfluences.com/flui...
Часть 2: Математика<br />Математические приёмы в дизайне<br />Модульная сетка. Практика применения<br />
Золотой прямоугольник<br />Золотое сечение – деление непрерывной величины на две части в таком отношении, при котором мень...
Числа Фибоначчи<br />Ряд чисел выглядит следующим образом: 0,   1,   1,   2,   3,   5,   8,   13,   21,   34,   55,   89, ...
Правило Третéй<br />это принцип построения композиции, основанный на упрощенном правиле золотого сечения. <br />При опреде...
Kundliдизайн<br />Основой является квадрат, внутри которого две диагонали пересекают линии, соединяющие середины соседних ...
Колебания синусоиды<br />Подходит для отражения хронологии и горизонтальной навигации на сайте<br />Модульная сетка. Практ...
Часть 3: Нестандарты<br />Обойдёмся без модульной сетки<br />Модульная сетка. Практика применения<br />
Модульная сетка. Практика применения<br />
Модульная сетка. Практика применения<br />
Модульная сетка. Практика применения<br />
Модульная сетка. Практика применения<br />
Upcoming SlideShare
Loading in …5
×

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

2,527 views

Published on

3 июня Павел Михайлов и Егор Стремоусов устроили показ слайдов на тему модульных сеток в жизни проектировщиков, дизайнеров и верстальщиков.

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,527
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
42
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Модульная сетка<br />Практика применения<br />
  2. 2. Часть 1: CSS Frameworks<br />Готовые решения на службе у разработчика<br />Модульная сетка. Практика применения<br />
  3. 3. Что такое CSS Framework?<br />это заранее подготовленная css-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки.<br />Преимущества:<br /><ul><li>Позволяет правильно создать XHTML-макет
  4. 4. Вёрстка на базе слоёв, а не таблиц
  5. 5. Более быстрая разработка
  6. 6. Кроссбраузерность
  7. 7. Возможность использования генераторов кода и визуальных редакторов
  8. 8. Встроенные средства для расположения элементов по модульной сетке</li></ul>Модульная сетка. Практика применения<br />
  9. 9. Популярные CSS фреймворки<br />Elements CSS Frameworks<br />YAML CSS Framework <br />Yahoo YUI Grids CSS<br />Boilerplate CSS Framework<br />Schema Web Design Framework<br />CleverCSS<br />Elastic CSS Framework<br />Blueprint CSS<br />The jQuery UI CSS Framework<br />960gs CSS Framework<br />Модульная сетка. Практика применения<br />
  10. 10. 960 grid system <br />Базовая ширина сайта - 960px<br />Число колонок - 12 или 16<br />Стандартный просвет между колонками - 20px<br />Вёрстка колонками или регионами<br />Кроссбраузерность<br />Быстрый переход на резиновый макет<br />Разделение CSS-файлов по функциям<br />Шаблоны для популярных графредакторов<br />Простота использования<br />Модульная сетка. Практика применения<br />
  11. 11. Модульная сетка от 960gs<br />Модульная сетка. Практика применения<br />
  12. 12. Элемент Container<br />HTML<br /><div class="container_12" /><br />Модульная сетка. Практика применения<br />
  13. 13. Элемент Grid<br />HTML<br /><div class="container_12"><br /> <div class="grid_1"><p>Мама мыла раму</p></div><br /> <div class="clear"></div><br /> <div class="grid_6"><p>Мама мыла раму</p></div><br /> <div class="clear"></div><br /> <div class="grid_12"><p>Мама мыла раму</p></div><br /> <div class="clear"></div><br /></div><br />Модульная сетка. Практика применения<br />
  14. 14. Элемент Grid<br />HTML<br /><div class="container_12"><br /> <div class="grid_3"><p>Мама мыла раму</p></div><br /> <div class="grid_6"><p>Мама мыла раму</p></div><br /> <div class="clear"></div><br /> <div class="grid_4"><p>Мама мыла раму</p></div><br /> <div class="grid_4"><p>Мама мыла раму</p></div><br /> <div class="grid_4"><p>Мама мыла раму</p></div><br /> <div class="clear"></div><br /></div><br />Модульная сетка. Практика применения<br />
  15. 15. Элемент Clear<br />HTML<br /><div class="clear" /><br />Завершение блока и перевод на новую строку<br />Выравнивание размера блока по высоте<br />Модульная сетка. Практика применения<br />
  16. 16. Элементы Alphaи Omega<br />HTML<br /><div class="grid_1">…<div><br /><div class="grid_6"><br /> <div class="grid_6 alpha">…</div><div class="clear" /><br /> <div class="grid_6 omega">…</div><div class="clear " /><br /> </div><br /><div class="grid_1">…</div><br /><div class="clear" /><br />Модульная сетка. Практика применения<br />
  17. 17. Элементы Prefix, Suffix, Push и Pull<br />HTML<br /><div class="grid_1">…</div><br /> <div class="grid_3 suffix_1"><br /> <p><br />Бегемот разинул рот - <br>Булку просит бегемот.<br /> </p></div><br /><div class="grid_1">...</div><br /><div class="clear"/><br />Модульная сетка. Практика применения<br />
  18. 18. 12 колонок<br />Модульная сетка. Практика применения<br />
  19. 19. 16 колонок<br />Модульная сетка. Практика применения<br />
  20. 20. Хотите больше?<br />Официальный сайт<br />http://960.gs/<br />«Резиновая» версия<br />http://www.designinfluences.com/fluid960gs<br />Google It!<br />http://www.google.ru/search?q=960gs<br />Модульная сетка. Практика применения<br />
  21. 21. Часть 2: Математика<br />Математические приёмы в дизайне<br />Модульная сетка. Практика применения<br />
  22. 22. Золотой прямоугольник<br />Золотое сечение – деление непрерывной величины на две части в таком отношении, при котором меньшая часть так относится к большей, как большая ко всей величине.<br />6 золотых прямоугольников, размером 299х185 пикселей, <br />по 3 прямоугольника в ряд. Стороны прямоугольников соотносятся по правилу <br />золотого сечения 299/185=1,616.<br />Модульная сетка. Практика применения<br />
  23. 23. Числа Фибоначчи<br />Ряд чисел выглядит следующим образом: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…<br />Страница разделена на три колонки. Базовая ширина контейнера 90 пикселей. <br />Тогда первая колонка имеет ширну 180px(90 х 2), вторая колонка имеет ширину <br />270px(90 х 3) и третья колонка имеет ширину <br />720px(90 х 8). <br />Размер шрифта также соответствут ряду Фибоначчи. Размер шрифта в заголовке 55px, шрифт в разделе – 34pxи шрифт для текста 21px.<br />Модульная сетка. Практика применения<br />
  24. 24. Правило Третéй<br />это принцип построения композиции, основанный на упрощенном правиле золотого сечения. <br />При определении зрительных центров кадр, как правило, делится линиями, параллельными его сторонам,<br /> в пропорциях 3:5, 2:3 или 1:2 (берутся последовательно идущие числа Фибоначчи).<br />Последний вариант дает деление кадра на три равные части (трети) вдоль каждой из сторон.<br />Пересечения линий сетки образуют четыре точки. <br />Именно на них должны располагаться самые интересные объекты в кадре.<br />Модульная сетка. Практика применения<br />
  25. 25. Kundliдизайн<br />Основой является квадрат, внутри которого две диагонали пересекают линии, соединяющие середины соседних сторон.<br />Модульная сетка. Практика применения<br />
  26. 26. Колебания синусоиды<br />Подходит для отражения хронологии и горизонтальной навигации на сайте<br />Модульная сетка. Практика применения<br />
  27. 27. Часть 3: Нестандарты<br />Обойдёмся без модульной сетки<br />Модульная сетка. Практика применения<br />
  28. 28. Модульная сетка. Практика применения<br />
  29. 29. Модульная сетка. Практика применения<br />
  30. 30. Модульная сетка. Практика применения<br />
  31. 31. Модульная сетка. Практика применения<br />
  32. 32. Модульная сетка. Практика применения<br />
  33. 33. Модульная сетка. Практика применения<br />
  34. 34. Модульная сетка. Практика применения<br />
  35. 35. Модульная сетка. Практика применения<br />
  36. 36. Спасибо!<br />Модульная сетка. Практика применения<br />за внимание<br />за терпение<br />за труд<br />за компанию<br /> за предоставленное помещение отдельное спасибо коллективу компании «Синерго»<br />Это тоже модульная сетка! <br />

×