webcamp2016:front-end_Юрий Артюх_Современные подходы в верстке
TRANSCRIPT
![Page 1: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/1.jpg)
пам-пам
![Page 2: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/2.jpg)
Must-have в вёрстке
Юрий Артюх
![Page 3: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/3.jpg)
Чем я занимаюсь
• 12 лет верстаю
• 18 человек в команде
• Больше 2 тысяч сайтов
• Сплю
• Лентяй
![Page 4: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/4.jpg)
Чем я не занимаюсь
• Соблюдаю дедлайны
• Перфекционист
• Пишу много javascript
![Page 5: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/5.jpg)
![Page 6: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/6.jpg)
Slow, but clever
![Page 7: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/7.jpg)
Slow, but open source
![Page 8: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/8.jpg)
Photoshop
![Page 9: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/9.jpg)
![Page 10: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/10.jpg)
![Page 11: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/11.jpg)
Avocode
Sketch
Photoshop
Mac OS Windows
Linux
![Page 12: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/12.jpg)
![Page 13: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/13.jpg)
![Page 14: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/14.jpg)
![Page 15: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/15.jpg)
![Page 16: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/16.jpg)
Zeplin скорее для команд
![Page 17: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/17.jpg)
Адаптивность
![Page 18: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/18.jpg)
not a big deal
![Page 19: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/19.jpg)
CSS Media Queries Level 4 PostCSS
![Page 20: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/20.jpg)
респонсификация сайтов
![Page 21: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/21.jpg)
Как это делать
![Page 22: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/22.jpg)
например
![Page 23: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/23.jpg)
Сохранять пропорции блока
![Page 24: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/24.jpg)
порядок элементов
![Page 25: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/25.jpg)
no media query!
Работает в email!
![Page 26: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/26.jpg)
![Page 27: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/27.jpg)
![Page 28: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/28.jpg)
Cool!
![Page 29: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/29.jpg)
![Page 30: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/30.jpg)
![Page 31: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/31.jpg)
Element query!
![Page 32: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/32.jpg)
Flex!
![Page 33: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/33.jpg)
Footer к низу body: flex-direction: column
![Page 34: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/34.jpg)
Еще
• 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
![Page 35: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/35.jpg)
![Page 36: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/36.jpg)
![Page 37: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/37.jpg)
Сборка• Gulp
• Webpack
• NPM
• bower
![Page 38: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/38.jpg)
• Gulp
• Webpack
• NPM
![Page 39: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/39.jpg)
PostCSS autoprefixer
![Page 40: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/40.jpg)
PostCSS mqpacker
![Page 41: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/41.jpg)
PostCSS postcss-svg
![Page 42: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/42.jpg)
PostCSS RTL
![Page 43: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/43.jpg)
PostCSS SugarSS
![Page 44: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/44.jpg)
PostCSS postcss-bem
![Page 45: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/45.jpg)
У каждого своя задача
SASS PostCSS CSS CSS → → →
![Page 46: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/46.jpg)
Pug (ex-jade)
![Page 47: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/47.jpg)
Nunjucks + front-matterlayout.htmlmy-page.html
![Page 48: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/48.jpg)
front-matter
![Page 49: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/49.jpg)
![Page 50: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/50.jpg)
Premailer
![Page 51: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/51.jpg)
Lint-staged
• Валидирует файлы в перед коммитом
• Только файлы в коммите
• Отличная защита от начинающих верстальщиков
![Page 52: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/52.jpg)
Yeomanдля тех у кого много проектов
https://www.npmjs.com/package/generator-man
![Page 53: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/53.jpg)
Компонентностьметодологии
![Page 54: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/54.jpg)
БЭМ
![Page 55: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/55.jpg)
![Page 56: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/56.jpg)
![Page 57: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/57.jpg)
http://nicothin.github.io/idiomatic-pre-CSS/
![Page 58: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/58.jpg)
webcomponentsanother way to build it all
![Page 59: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/59.jpg)
polymer
![Page 60: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/60.jpg)
![Page 61: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/61.jpg)
![Page 62: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/62.jpg)
![Page 63: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/63.jpg)
react+webpack
![Page 64: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/64.jpg)
![Page 65: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/65.jpg)
![Page 66: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/66.jpg)
Результат
![Page 67: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/67.jpg)
React
Webpack
CSS Modules
![Page 68: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/68.jpg)
Polymer vs React
Реализация одной идеи
![Page 70: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/70.jpg)
придется учить js чтобы верстать в 2017
![Page 71: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/71.jpg)
![Page 72: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/72.jpg)
![Page 73: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/73.jpg)
![Page 74: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/74.jpg)
Дякую!
Юрий Артюх cssing.org.ua
twitter.com/akella
facebook.com/akella
skype: akella_
![Page 75: WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке](https://reader034.vdocuments.mx/reader034/viewer/2022051708/58a3ff941a28ab64528b5f03/html5/thumbnails/75.jpg)