Atomic design & PatternLab

Web Not Bombs: Frontend #5 (Minsk);
WildCardConf'15 (Riga);

Transcript

1. Атомарный дизайн и Patternlab Max Kovalev, EPAM Systems
4. Интерфейсы
5. getbootstrap.com
7. foundation.zurb.com
8. Типичные проблемы • Много лишнего или чего-то не хватает • Следование код-стилю, наименованиям, структуре • Несовместимость с текущей версией проекта • Проблема с коллаборацией • Понимают только разработчики • ... 8
9. Style Guides / Pattern Libraries
10. google.com/design/spec/material-design
11. pea.rs
12. starbucks.com/static/reference/styleguide/
14. Плюсы • multi-device Web • Сокращение времени разработки • Удобное тестирование UI • Один "язык" • Простая поддержка в будущем 14
15. А что клиент? • Время на создание • Рассматривается как дополнительный проект • Не полные кейсы • ... 15
16. sourcejs.com
17. We’re not designing pages, we’re designing systems of components Stephen Hay “
18. Atomic web design
19. Brad Frost
21. Атом label input button color font
22. Молекула navigation forms text social messages
23. Организм header footer article comments latest posts
27. Особенности • Mustache • JSON • Apache* • PHP 5.3.6+ 27
28. Создание проекта git clone * php core/builder.php -g php core/builder.php -w, -wr, -gc, ... * https://github.com/pattern-lab/patternlab-php.git 01. 02. 03. 28
29. Создание проекта (with node) git clone * npm install npm install -g grunt-cli grunt serve * https://github.com/pattern-lab/patternlab-node.git 01. 02. 03. 04. 29
30. Структура • source/ • _data/ • _patterns/ • css/ • fonts/ • images/ • js/ 30
31. Структура • .. /_patterns/ • atoms/ • molecules/ • organisms/ • teplates/ • pages/ 31
32. Структура • .. /atoms/ • meta/ • head.mustache • footer.mustache 32
33. Паттерны
40. Особенности • Watcher, auto-reload • In-browser responsive tool • Page Follow • Keyboard Shortcuts • ... 40
41. demo.patternlab.io
42. Почитать • Сборник ресурсов - styleguides.io • Книга "Atomic Design" - atomicdesign.bradfrost.com • Improving Code Readability With CSS Styleguides - smashingmagazine • Designing Products That Scale - medium.com/@bradhaynes • Design Systems: Building for the Future - css-tricks.com 42
43. Спасибо • @maxkovalev_ • fb.me/kovalev.max • speakerdeck.com/maxkovalev 43