Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, Интерлаб

308 views

Published on

Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, Интерлаб с19 апреля 20131 / 30

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, Интерлаб

  1. 1. Современная верстка садекватными трудозатратамиМаксим Тимохин, технолог, Интерлабс19 апреля 20131 / 30
  2. 2. ПроблемаТребования к верстке постоянно растут, а вместе с ними исебестоимость проекта:• адаптивность: был один дизайн, а стало N;• кроссбраузерный CSS3;• улучшенная типографика.На что обратить внимание в технологическомпроцессе, чтобы сократить издержки?2 / 30
  3. 3. Главная беда дизайна«Дизайн сайта — набор страниц»адаптивный дизайн только усугубляет проблему:• на уровнe CMS: единая контентная область, WYSIWYG.• на уровнe дизайнера: главная и рабочая страницы и т.д.• на уровне клиента: сделайте точно так, как я хочу.Дизайн сайта — система компонентовCMS — часто ограничивающий фактор3 / 30
  4. 4. Работа с дизайнерамиРеализация адаптивного дизайна будет проще, если:• мыслить в контексте всего сайта, а не отдельной страницы;• мыслить элементами, образующими визуальный язык;• понимать технологические ограничения;• использовать сетки и вертикальный ритм;• минимизировать количество и варианты блоков;• понимать, что pixel-perfect дизайн невозможен.Звучит банально, но менять стереотипы тяжело.4 / 30
  5. 5. Типографская сетка5 / 30
  6. 6. Типографская сеткаВ обычном дизайне полезна, в адаптивном — необходима:• различные виды сеток (%, px) для адаптивных вариантов;• различная размерность сеток для адаптивных вариантов;• не больше двух-трех сеток на медиа-вариант;• сетки для всего сайта, а не для отдельных страниц;• несложно реализуется CSS-препроцессором.Результат формализованное горизонтальноепозиционирование блоков в различныхадаптивных вариантах.6 / 30
  7. 7. Комбинирование сеток7 / 30
  8. 8. Сетка: % или px?• пиксельные сетки технологичнее и проще;• фиксированные адаптивные вариантыменее затратны в реализации;• процентные сетки универсальные, носложнее: размеры вложенных элементов,ошибки округления и и.д.• процентные сетки необходимы нанебольших мобильных разрешениях.8 / 30
  9. 9. Вертикальный ритм9 / 30
  10. 10. Вертикальный ритмЕдиный шаг для вертикальных размеров элементов:• вертикальные отступы;• вертикальный размер изображений и блоков;• элементы переменной высоты — в контейнер;• выбор шага определяет baseline для основного шрифта;• легко реализуется CSS-препроцессором.Результат улучшение внешнего вида страницы,системность в выборе размеров, возможностьварьирования на этапе разработки.10 / 30
  11. 11. Дизайн: антипаттерныОсновные проблемы адаптивной верстки — на этапе дизайна:• «над этим я не думал, разберемся при верстке»;• подгонка сетки к уже отрисованному дизайну;• единая сетка для всех блоков с массой исключений;• нарушение порядка блоков в различных вариантах;• расчет на ограниченный размер контента;• избыточный второстепенный контент в начале страницына мобильном устройстве;• избыточное использование таблиц и сложныхинтерактивных элементов.11 / 30
  12. 12. Роль верстальщикаВерстальщик необходим, но в новых условиях долженэволюционировать:• «страничная» CMS — неизбежная верстка контента;• верстка шаблонов страниц;• верстка компонентов, в т.ч. типовых контентных блоков;• клиентский JavaScript;• минимальное участие в клиентском контенте за счетиспользования типовых контентных блоков.Верстальщик → Развитие CMS → Frontend-developer12 / 30
  13. 13. Прототипирование версткиMaster page – минимальный статический прототип для простыхсайтов:• одна страница со всеми интерфейсными компонентами;• HTML с минимальной (php,node...)-шаблонизацией;• можно использовать как style guide;• упрощает выявление конфликтов между компонентами;• упрощает тестирование на мобильных устройствах.• поощряет минимализм (хотя иногда уже поздно)13 / 30
  14. 14. Структура CSS-классов• БЭМ1 — большие проекты, набор общих блоков;• у нас — небольшие проекты с сильно отличающимсядизайном, используем сильно упрощенный вариант.Главное: независимость блоков друг от друга и ихструктурирование внутри проекта.• префиксная система имен классов;• упрощенная концепция блок-элемент-модификатор.1http://ru.bem.info/method/14 / 30
  15. 15. Префиксная система именnamespace-...-block-element-subelement-...--modificator• модификатор всегда используется с основным классом• модификатор не разбивается на пару «свойство-значение»• разработчик может вводить промежуточные пространстваимен, отсутствие конфликтов между ними — на его совести;Результат стандартизируем имена классов, исключаемконфликты между своими и чужими классами.15 / 30
  16. 16. Структура блоков версткиИспользуем наиболее подходящую семантическую основу,большая часть стилизации с помощью классов стандартнойструктуры.<class="app-menu"><ul><li class="menu-item"><a href="#">...</a></li><li class="menu-item menu-item--sel"><a href="#">...</a></li></ul></div>Результат семантическая верстка, стандартная структураблоков.16 / 30
  17. 17. Генерируемый кодГенерация кода необходима при разработке клиентской части:• генерация CSS из более высокоуровневого кода;• минимизация количества и объема CSS-файлов;• структурирование и оптимизация JavaScript-кодасредствами AMD/RequireJS2 и т.д.Результат снижение затрат на поддержку и развитиестарых проектов, повышение качества новых.2http://requirejs.org17 / 30
  18. 18. Простейшая генерация кодаК любому проекту можно добавить генерацию кода, есть многомодных инструментов, но проще всего — make:www/css/%.css: src/less/%.lesslessc $< > >@Для существующего проекта просто переносим CSS-файлы вsrc/less/ и получаем преимущества в виде переменных,макросов и т.д.Результат сокращаем код, постепенно рефакторим CSS,если надо — приводим в чувство JavaScript18 / 30
  19. 19. Выбор CSS-препроцессора• основные претенденты: SASS, LESS, Stylus;• SASS — логично, если решение на Ruby;• Compass – полезно, даже если не использовать SASS;• Любой CSS-файл – валидный исходник на LESS;• LESS распространеннее, Stylus функциональнее изкоробки;Мы выбрали LESS, Stylus тоже хороший выбор.19 / 30
  20. 20. Особенности LESS• полная синтаксическая совместимость с CSS;• вложенные пространства имен, удобноj для библиотек;• нет условий и циклов, но есть pattern matching и рекурсия;• динамическое формирование имен классов, хотя издокументации это неочевидно.Главное не генерировать избыточный CSS, в клиентскомкоде максимально используем определениеклассов, а не макросов.20 / 30
  21. 21. LESS-фреймворк• тривиальная часть — CSS3, шрифты и т.д.• инициализация верстки: reset или normalize, чаще второе;• медиа-варианты и версии для браузеров без Media Query;• генерация сеток, средства отладки;• базовые настройки отображения элементов форм;• всевозможные костыли для IE.Результат типовые решения для всех проектов, упрощениеподдержки, снижение порога вхождения дляразработчиков.21 / 30
  22. 22. Файлы проекта• правила CSS группируются в файлы произвольно;• фреймворк подключается одним @import;• каждому результирующему CSS-файлу соответствуеткорневой less-файл, подключающий фреймворк и другиеless-файлы;• корневых файлов может быть несколько: под разныеразрешения, разные версии IE и т.дРезультат правила можно группировать покомпонентно,строить библиотеки компонент и т.д.22 / 30
  23. 23. Медиа-варианты@boot-media-variants: 9; // количество диапазонов;...@boot-media-3-name: tablet; // определение диапазона;@boot-media-3-min: no; // есть стандартные, но@boot-media-3-max: 767px; // можно переопределить@boot-media-3-ie: no; // если необходимо....#media { // стандартный namespace.for(all) {// общие правила}.for(tablet) {// правила для планшета}} // результат можно вывести в отдельные файлы или общий файлРезультат покомпонентное определение вариантов, генерациявариантов в оптимальном порядке и варианта без MQ.23 / 30
  24. 24. Элементы форм• в разных проектах выглядят совершенно по-разному;• при этом общие проблемы взаимного позиционирования,размеров и т.д;• проблема использования готовых решений типа Bootstrap– геометрия и внешний вид неразделимы.Решение: • базовыe классы – позиционирование;• стандартные макросы – геометрия;• оформление – свое в каждом проекте.• оформление и размеры – модификаторы.24 / 30
  25. 25. Поддержка IE// В файлах компонент.#ie {.for(7) { /* правила для IE7 */ }.for(lt9) { /* правила для IE8 */ }}// В результирующем файле#boot > .classes(ie, 7);Также с осторожностью используем некоторые полифиллы, вчастности PIE3 (CSS3) и boxsizing4 (border-box).3http://css3pie.com4http://github.com/Schepp/box-sizing-polyfill25 / 30
  26. 26. Сетки@grid-desktop-variant: fixed; // пиксельные и процентные@grid-desktop-class: g-d; // префикс CSS классов:@grid-desktop-size: 12; // g-d-r,g-d-s4, g-d-o2.@grid-desktop-column: 60px;@grid-desktop-gutter: 20px;#media {.for(desktop) {#boot > #grid > .classes(grid-desktop);}.for(wide) {#boot > #grid > .classes(grid-wide);}}Результат автоматическая генерация классов сеток,реализация адаптивных сеток, возможностьбыстрой корректировки геометрии сеток.26 / 30
  27. 27. Инициализация блокаГлобально используем normalize, внутри отдельного блокавыполняем по необходимости reset для семантической базыблока:.app-menu {#boot > .reset(ul, left); // локальный reset#boot > .rhythm(15px, margin, 1, 0); // baseline для 15px// margin-top в 1 шаг.app-menu-item {// padding в 1 шаг и корректировка для border#boot > .rhythm(padding,1,1,1px,1px);border: solid 1px #ccc;}}27 / 30
  28. 28. Инициализация верстки1 определяем основной размер шрифта и вертикальный шаг;2 переопределяем настройки типографики если нужно;3 определяем диапазоны медиа-вариантов;4 конфигурируем сетки в различных медиа-вариантах;5 верстаем нестилизованные блоки с классами блоков иячеек сетки;6 проверяем раскладку в различных разрешениях,контролируем границы блоков;7 дальше разбираемся со стилизацией каждого блока.28 / 30
  29. 29. ИтогоЧто необходимо сделать, чтобы технологический процесс быладекватен современным требованиям к верстке?• работать с дизайнерами: компонентный подход,стандартные паттерны, технологические ограничения;• стандартизировать структуру разметки и CSS-классов;• использовать адаптивные типографские сетки;• внедрить генерацию клиентского кода вообще иCSS-препроцессор в частности;• реализовать набор типовых решений с помощьюCSS-препроцессора.29 / 30
  30. 30. http://www.interlabs.ru

×