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

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

2. Часть 1: CSS Frameworks Готовые решения на службе у разработчика Модульная сетка. Практика применения

4. Вёрстка на базе слоёв, а не таблиц

5. Более быстрая разработка

6. Кроссбраузерность

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

8. Встроенные средства для расположения элементов по модульной сеткеМодульная сетка. Практика применения

9. Популярные 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 Модульная сетка. Практика применения

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

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

12. Элемент Container HTML <div class="container_12" /> Модульная сетка. Практика применения

13. Элемент Grid HTML <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> Модульная сетка. Практика применения

14. Элемент Grid HTML <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> Модульная сетка. Практика применения

15. Элемент Clear HTML <div class="clear" /> Завершение блока и перевод на новую строку Выравнивание размера блока по высоте Модульная сетка. Практика применения

16. Элементы Alphaи Omega HTML <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" /> Модульная сетка. Практика применения

17. Элементы Prefix, Suffix, Push и Pull HTML <div class="grid_1">…</div> <div class="grid_3 suffix_1"> <p> Бегемот разинул рот - <br>Булку просит бегемот. </p></div> <div class="grid_1">...</div> <div class="clear"/> Модульная сетка. Практика применения

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

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

20. Хотите больше? Официальный сайт http://960.gs/ «Резиновая» версия http://www.designinfluences.com/fluid960gs Google It! http://www.google.ru/search?q=960gs Модульная сетка. Практика применения

21. Часть 2: Математика Математические приёмы в дизайне Модульная сетка. Практика применения

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

23. Числа Фибоначчи Ряд чисел выглядит следующим образом: 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. Модульная сетка. Практика применения

24. Правило Третéй это принцип построения композиции, основанный на упрощенном правиле золотого сечения. При определении зрительных центров кадр, как правило, делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2 (берутся последовательно идущие числа Фибоначчи). Последний вариант дает деление кадра на три равные части (трети) вдоль каждой из сторон. Пересечения линий сетки образуют четыре точки. Именно на них должны располагаться самые интересные объекты в кадре. Модульная сетка. Практика применения

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

26. Колебания синусоиды Подходит для отражения хронологии и горизонтальной навигации на сайте Модульная сетка. Практика применения

27. Часть 3: Нестандарты Обойдёмся без модульной сетки Модульная сетка. Практика применения

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

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

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

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

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

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

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

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

36. Спасибо! Модульная сетка. Практика применения за внимание за терпение за труд за компанию за предоставленное помещение отдельное спасибо коллективу компании «Синерго» Это тоже модульная сетка!