Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic design & PatternLab

5df91cfe1d96b8565f4fc0331f3204d9?s=47 Max Kovalev
December 05, 2014

Atomic design & PatternLab

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

5df91cfe1d96b8565f4fc0331f3204d9?s=128

Max Kovalev

December 05, 2014
Tweet

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