SlideShare a Scribd company logo
пам-пам
Must-have
в вёрстке
Юрий Артюх
Чем я занимаюсь
• 12 лет верстаю
• 18 человек в команде
• Больше 2 тысяч сайтов
• Сплю
• Лентяй
Чем я не занимаюсь
• Соблюдаю дедлайны
• Перфекционист
• Пишу много javascript
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Slow, but clever
Slow, but open source
Photoshop
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Avocode
Sketch
Photoshop
Mac OS
Windows
Linux
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Zeplin
скорее для команд
Адаптивность
not a big deal
CSS Media Queries Level 4
PostCSS
респонсификация сайтов
Как это делать
например
Сохранять пропорции
блока
порядок элементов
no media query!
Работает в email!
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Cool!
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
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
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Сборка
• 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
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Premailer
Lint-staged
• Валидирует файлы в перед
коммитом
• Только файлы в коммите
• Отличная защита от
начинающих верстальщиков
Yeoman
для тех у кого много проектов
https://www.npmjs.com/package/generator-man
Компонентность
методологии
БЭМ
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
http://nicothin.github.io/idiomatic-pre-CSS/
webcomponents
another way to build it all
polymer
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
react+webpack
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Результат
React
Webpack
CSS Modules
Polymer vs React
Реализация одной идеи
http://codepen.io/
morgun/pen/pyzZra
придется учить js
чтобы верстать в 2017
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке
Дякую!
Юрий Артюх
cssing.org.ua
twitter.com/akella
facebook.com/akella
skype: akella_
WebCamp2016:Front-End_Юрий Артюх_Современные подходы в верстке

More Related Content

PPTX
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
Ontico
 
PDF
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
GeeksLab Odessa
 
PDF
FrontDays #1. Илья Кучмин, Оптимизация загрузки тяжелых страниц
FrontDays
 
PDF
Доклад Виталия Котова на конференции LoveQA. "Selenium тесты. От RC и одного ...
Badoo Development
 
PPT
633942
Vasya Petrov
 
PDF
Алексей Иванкин: Highload + PHP
Oleg Poludnenko
 
PPT
Самые частые проблемы и пути решения при росте нагрузки и масштабировании про...
Andrew Minkin
 
PDF
Макс Волошин: Php + shell = ♥
Oleg Poludnenko
 
Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap...
Ontico
 
JSLab. Дмитрий Смолин, Дмитрий Филипенко. "React и Webpack с помощью кирки, л...
GeeksLab Odessa
 
FrontDays #1. Илья Кучмин, Оптимизация загрузки тяжелых страниц
FrontDays
 
Доклад Виталия Котова на конференции LoveQA. "Selenium тесты. От RC и одного ...
Badoo Development
 
633942
Vasya Petrov
 
Алексей Иванкин: Highload + PHP
Oleg Poludnenko
 
Самые частые проблемы и пути решения при росте нагрузки и масштабировании про...
Andrew Minkin
 
Макс Волошин: Php + shell = ♥
Oleg Poludnenko
 

What's hot (19)

PPTX
Организация надежного резервного копирования веб-проекта. Практика и подводны...
Anton Baranov
 
PDF
Alex baumgertner bem_in_small_projects
Alexander Baumgertner
 
PDF
Самые частые проблемы и пути решения при росте нагрузки и масштабировании про...
Колёса Крыша Маркет
 
PPT
WepPerfomance,
Dmitriy Polisadov
 
PPTX
Миф об очень сложном Highload / Александр Горный (Mail.Ru Group)
Ontico
 
PDF
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Yandex
 
PDF
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
DataArt
 
PDF
Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...
Pavel Dovbush
 
PPT
Презентация: 1С-Bitrix — как начать
Dmitriy Polisadov
 
PDF
Javascript-фреймворки:
 должен остаться только один
Sergey Xek
 
PDF
Александр Кашеверов — Обзор React.js
DataArt
 
PDF
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...
Ontico
 
PDF
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...
Ontico
 
PPT
Drupal and NodeJS.
DrupalForumZP2012
 
PPTX
Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)
Ontico
 
PDF
Mobile web apps
Pavlo Iuriichuk
 
PPTX
Синяя Борода. История одного проекта.
Andrew Mayorov
 
PPTX
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
Ontico
 
PDF
139 - Spring. Добавление JavaScript
Roman Brovko
 
Организация надежного резервного копирования веб-проекта. Практика и подводны...
Anton Baranov
 
Alex baumgertner bem_in_small_projects
Alexander Baumgertner
 
Самые частые проблемы и пути решения при росте нагрузки и масштабировании про...
Колёса Крыша Маркет
 
WepPerfomance,
Dmitriy Polisadov
 
Миф об очень сложном Highload / Александр Горный (Mail.Ru Group)
Ontico
 
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Yandex
 
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
DataArt
 
Эволюция клиентской разработки: от веба ко "всеобщей мобилизации” или mobile-...
Pavel Dovbush
 
Презентация: 1С-Bitrix — как начать
Dmitriy Polisadov
 
Javascript-фреймворки:
 должен остаться только один
Sergey Xek
 
Александр Кашеверов — Обзор React.js
DataArt
 
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рах...
Ontico
 
HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в прида...
Ontico
 
Drupal and NodeJS.
DrupalForumZP2012
 
Редактор Mail.ru, или скорочтение за полчаса, Павел Зиновкин (Mail.Ru)
Ontico
 
Mobile web apps
Pavlo Iuriichuk
 
Синяя Борода. История одного проекта.
Andrew Mayorov
 
Ошибки проектирования высоконагруженных проектов / Максим Ехлаков (OneTwoRent)
Ontico
 
139 - Spring. Добавление JavaScript
Roman Brovko
 
Ad

Viewers also liked (20)

PDF
WebCamp 2016: BizDev. Андрей Моспан: Правда ли, что продукт стоит ровно столь...
WebCamp
 
PDF
WebCamp 2016: DevOps. Егор Лопатин и Юрий Железко: How we build and deploy ou...
WebCamp
 
ODP
WebCamp2016:Front-End_Андрей Копёнкин_Оптимизируем мобильный веб полностью
WebCamp
 
PDF
WebCamp 2016: PM. Дмитрий Пискарев: Способы мотивации и продления LTV сотрудн...
WebCamp
 
PDF
WebCamp 2016: PHP.Денис Потапов.Рефакторим код не задумываясь
WebCamp
 
PDF
WebCamp 2016: DevOps. Ярослав Погребняк: Gobetween - новый лоад балансер для ...
WebCamp
 
PDF
WebCamp 2016: BizDev. Кейт Голдберг: Agile business development: как применят...
WebCamp
 
PDF
WebCamp 2016: DevOps. Николай Дойков: Опыт создания клауда для потокового вид...
WebCamp
 
PDF
WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.
WebCamp
 
PDF
WebCamp 2016: PHP.Алексей Петров.PHP at Scale: System Architect Toolbox
WebCamp
 
PDF
WebCamp 2016: PM. Яна Пролис: "Вредные" советы по конфликтам в команде и комп...
WebCamp
 
PDF
WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости соврем...
WebCamp
 
PDF
WebCamp 2016: PM. Роман Кравченко: Разработка требований и управление рисками...
WebCamp
 
PDF
WebCamp2016:Front-End.Катерина Поршнева.Эволюция CSS: от темных времен до CSS...
WebCamp
 
PDF
WebCamp 2016: Python_Кирилл Перевозчиков _Рецепты приготовления uWSGI
WebCamp
 
PDF
WebCamp 2016: PHP. Александр Шкарбалюк: SSO: Кому оно нужно и как его готовить?
WebCamp
 
PDF
WebCamp2016:Front-End.Максим Климишин.Теоретические и практические концепции ...
WebCamp
 
PDF
WebCamp 2016: PHP.Сергей Яковлев.Phalcon 3
WebCamp
 
PDF
WebCamp 2016: PHP. Дмитрий Науменко: Рецепты для Yii2.
WebCamp
 
PDF
WebCamp 2016.PHP.Боднарчук Михаил.BDD на практике с Codeception
WebCamp
 
WebCamp 2016: BizDev. Андрей Моспан: Правда ли, что продукт стоит ровно столь...
WebCamp
 
WebCamp 2016: DevOps. Егор Лопатин и Юрий Железко: How we build and deploy ou...
WebCamp
 
WebCamp2016:Front-End_Андрей Копёнкин_Оптимизируем мобильный веб полностью
WebCamp
 
WebCamp 2016: PM. Дмитрий Пискарев: Способы мотивации и продления LTV сотрудн...
WebCamp
 
WebCamp 2016: PHP.Денис Потапов.Рефакторим код не задумываясь
WebCamp
 
WebCamp 2016: DevOps. Ярослав Погребняк: Gobetween - новый лоад балансер для ...
WebCamp
 
WebCamp 2016: BizDev. Кейт Голдберг: Agile business development: как применят...
WebCamp
 
WebCamp 2016: DevOps. Николай Дойков: Опыт создания клауда для потокового вид...
WebCamp
 
WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.
WebCamp
 
WebCamp 2016: PHP.Алексей Петров.PHP at Scale: System Architect Toolbox
WebCamp
 
WebCamp 2016: PM. Яна Пролис: "Вредные" советы по конфликтам в команде и комп...
WebCamp
 
WebCamp2016:Front-End_Роман Якобчук_Relay, GraphQL и остальные радости соврем...
WebCamp
 
WebCamp 2016: PM. Роман Кравченко: Разработка требований и управление рисками...
WebCamp
 
WebCamp2016:Front-End.Катерина Поршнева.Эволюция CSS: от темных времен до CSS...
WebCamp
 
WebCamp 2016: Python_Кирилл Перевозчиков _Рецепты приготовления uWSGI
WebCamp
 
WebCamp 2016: PHP. Александр Шкарбалюк: SSO: Кому оно нужно и как его готовить?
WebCamp
 
WebCamp2016:Front-End.Максим Климишин.Теоретические и практические концепции ...
WebCamp
 
WebCamp 2016: PHP.Сергей Яковлев.Phalcon 3
WebCamp
 
WebCamp 2016: PHP. Дмитрий Науменко: Рецепты для Yii2.
WebCamp
 
WebCamp 2016.PHP.Боднарчук Михаил.BDD на практике с Codeception
WebCamp
 
Ad

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

PDF
Что такое Highload? Секреты высокой нагрузки
Tech Talks @NSU
 
PDF
Tech Talks @NSU: Что такое Highload? Секреты высокой нагрузки.
Tech Talks @NSU
 
PDF
Иван Карев — Клиентская оптимизация
Yandex
 
PDF
PG Day'14 Russia, PostgreSQL в avito.ru, Михаил Тюрин
pgdayrussia
 
PPTX
NoBigData - потоковая система аналитики clientside производительности, Сергей...
Ontico
 
PDF
Распространенные ошибки применения баз данных (Сергей Аверин)
Ontico
 
PDF
«Разработка и оптимизация высоконагруженного проекта»
Гузель Рахимова
 
PDF
webpack: 7 бед - один ответ
Denis Izmaylov
 
PPTX
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Ontico
 
PDF
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
Evgeny Kaziak
 
PDF
Распространенные ошибки применения баз данных
Sergey Xek
 
PDF
Распространенные ошибки применения баз данных (Сергей Аверин)
Ontico
 
PPTX
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)
Ontico
 
PDF
TК°Conf. Организация разработки Frontend. Виталий Слободин.
TKConf
 
PPTX
Little Service in 2h
Alexei Yuzhakov
 
PPTX
Игры с виртуализацией в JavaScript, или как я переписал эмулятор, Евгений Пот...
Ontico
 
PDF
Фронтенд разработка без боли
Anton Piskunov
 
PDF
Иван Карев — Клиентская оптимизация
Yandex
 
PDF
Выступление Сергея Аверина, Badoo, на High Performance Conference
EYevseyeva
 
PDF
Не все базы данных одинаково полезны
Sergey Xek
 
Что такое Highload? Секреты высокой нагрузки
Tech Talks @NSU
 
Tech Talks @NSU: Что такое Highload? Секреты высокой нагрузки.
Tech Talks @NSU
 
Иван Карев — Клиентская оптимизация
Yandex
 
PG Day'14 Russia, PostgreSQL в avito.ru, Михаил Тюрин
pgdayrussia
 
NoBigData - потоковая система аналитики clientside производительности, Сергей...
Ontico
 
Распространенные ошибки применения баз данных (Сергей Аверин)
Ontico
 
«Разработка и оптимизация высоконагруженного проекта»
Гузель Рахимова
 
webpack: 7 бед - один ответ
Denis Izmaylov
 
Разгоняем ASP.NET Core / Илья Вербицкий (WebStoating s.r.o.)
Ontico
 
[JAM 1.0] CMS. Обзор. (Alexei Yanochkin)
Evgeny Kaziak
 
Распространенные ошибки применения баз данных
Sergey Xek
 
Распространенные ошибки применения баз данных (Сергей Аверин)
Ontico
 
Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)
Ontico
 
TК°Conf. Организация разработки Frontend. Виталий Слободин.
TKConf
 
Little Service in 2h
Alexei Yuzhakov
 
Игры с виртуализацией в JavaScript, или как я переписал эмулятор, Евгений Пот...
Ontico
 
Фронтенд разработка без боли
Anton Piskunov
 
Иван Карев — Клиентская оптимизация
Yandex
 
Выступление Сергея Аверина, Badoo, на High Performance Conference
EYevseyeva
 
Не все базы данных одинаково полезны
Sergey Xek
 

More from WebCamp (10)

PDF
WebCamp 2016: Python.Максим Климишин.Типизированный Python
WebCamp
 
PDF
WebCamp 2016: Python.Павел Коломиец.Использование микросервисов при написании...
WebCamp
 
PDF
WebCamp2016:BizDev_Алексей Иваница_Как построить и монетизировать мобильный п...
WebCamp
 
PDF
WebCamp 2016: BizDev. Марина Никитчук : Искусство продажи мечты, а не сервиса.
WebCamp
 
PDF
WebCamp 2016: BizDev. Александр Борняков: Маркетинг в США: как привлечь к себ...
WebCamp
 
PDF
WebCamp 2016: Front-end. Андрей Ситник: Stylelint — как и зачем линтить CSS
WebCamp
 
PPTX
WebCamp 2016: PHP. Николай Паламарчук: PHP и микросервисы
WebCamp
 
PDF
WebCamp 2016: PM. Александр Демура: Откуда берутся тупые заказчики, и что с н...
WebCamp
 
PDF
WebCamp 2016: PM. Евгений Лабунский: Командная безответственность
WebCamp
 
PDF
WebCamp 2016: Python. Михаил Бегерский: Использование asyncio-стека для разра...
WebCamp
 
WebCamp 2016: Python.Максим Климишин.Типизированный Python
WebCamp
 
WebCamp 2016: Python.Павел Коломиец.Использование микросервисов при написании...
WebCamp
 
WebCamp2016:BizDev_Алексей Иваница_Как построить и монетизировать мобильный п...
WebCamp
 
WebCamp 2016: BizDev. Марина Никитчук : Искусство продажи мечты, а не сервиса.
WebCamp
 
WebCamp 2016: BizDev. Александр Борняков: Маркетинг в США: как привлечь к себ...
WebCamp
 
WebCamp 2016: Front-end. Андрей Ситник: Stylelint — как и зачем линтить CSS
WebCamp
 
WebCamp 2016: PHP. Николай Паламарчук: PHP и микросервисы
WebCamp
 
WebCamp 2016: PM. Александр Демура: Откуда берутся тупые заказчики, и что с н...
WebCamp
 
WebCamp 2016: PM. Евгений Лабунский: Командная безответственность
WebCamp
 
WebCamp 2016: Python. Михаил Бегерский: Использование asyncio-стека для разра...
WebCamp
 

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