Atomic design & PatternLab

Transcript

1. Атомарный дизайн и Patternlab Max Kovalev, EPAM Systems

2. None
3. None

4. Интерфейсы

5. getbootstrap.com

6. None

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/

13. 13

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

20. None

21. Атом label input button color font

22. Молекула navigation forms text social messages

23. Организм header footer article comments latest posts

24. None
25. None
26. None

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. Паттерны

34. None
35. None
36. None
37. None
38. None
39. None

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