пам-пам
Must-have
в вёрстке
Юрий Артюх
Чем я занимаюсь
• 12 лет верстаю
• 18 человек в команде
• Больше 2 тысяч сайтов
• Сплю
• Лентяй
Чем я не занимаюсь
• Соблюдаю дедлайны
• Перфекционист
• Пишу много javascript
Slow, but clever
Slow, but open source
Photoshop
Avocode
Sketch
Photoshop
Mac OS
Windows
Linux
Zeplin
скорее для команд
Адаптивность
not a big deal
CSS Media Queries Level 4
PostCSS
респонсификация сайтов
Как это делать
например
Сохранять пропорции
блока
порядок элементов
no media query!
Работает в email!
Cool!
Element query!
Flex!
Footer к низу
body: flex-direction: column
Еще
• CSS Grid Layout http://gridbyexample.com/
examples/
• Flex, http://www.flexboxdefense.com/, flex-basis
• nth-child - quantity селектор, http://alistapart.com/
article/quantity-queries-for-css
Сборка
• Gulp
• Webpack
• NPM
• bower
• Gulp
• Webpack
• NPM
PostCSS
autoprefixer
PostCSS
mqpacker
PostCSS
postcss-svg
PostCSS
RTL
PostCSS
SugarSS
PostCSS
postcss-bem
У каждого своя задача
SASS PostCSSCSS CSS→ → →
Pug (ex-jade)
Nunjucks + front-matter
layout.htmlmy-page.html
front-matter
Premailer
Lint-staged
• Валидирует файлы в перед
коммитом
• Только файлы в коммите
• Отличная защита от
начинающих верстальщиков
Yeoman
для тех у кого много проектов
https://www.npmjs.com/package/generator-man
Компонентность
методологии
БЭМ
http://nicothin.github.io/idiomatic-pre-CSS/
webcomponents
another way to build it all
polymer
react+webpack
Результат
React
Webpack
CSS Modules
Polymer vs React
Реализация одной идеи
http://codepen.io/
morgun/pen/pyzZra
придется учить js
чтобы верстать в 2017
Дякую!
Юрий Артюх
cssing.org.ua
twitter.com/akella
facebook.com/akella
skype: akella_
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке

WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке