пам-пам

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 PostCSS CSS CSS → → →

Pug (ex-jade)

Nunjucks + front-matterlayout.htmlmy-page.html

front-matter

Premailer

Lint-staged

• Валидирует файлы в перед коммитом

• Только файлы в коммите

• Отличная защита от начинающих верстальщиков

Yeomanдля тех у кого много проектов

https://www.npmjs.com/package/generator-man

Компонентностьметодологии

БЭМ

http://nicothin.github.io/idiomatic-pre-CSS/

webcomponentsanother 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_