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

Back-end & Front-end em Harmonia com Atomic Design

Back-end & Front-end em Harmonia com Atomic Design

Como uma metodologia tão simples pode resolver problemas na organização dos componentes de um produto?

Matheus Costa

July 10, 2017
Tweet

More Decks by Matheus Costa

Other Decks in Design

Transcript

  1. FRONT END BACK harmonia Atomic Design em com &

  2. SOU @matheusagcosta EU? QUEM @fintechdev #comunidade <3

  3. DESIGN OI? ATOMIC metodologia

  4. None
  5. None
  6. None
  7. None
  8. None
  9. átomos BOTÃO Parágrafo Título LINK #8ABE5E

  10. moléculas Título Estilizado AÇÃO 2 AÇÃO 1 Item 1 Item

    2 Item 3 Item 4
  11. organismos Alerta AÇÃO 2 Mensagem de confirmação AÇÃO 1 LOGO

    Link Ativo Link Link Link Link Texto de rodapé Link
  12. Modelos LOGO Link Ativo Link Link Link Link texto de

    rodapé Link IMAGEM
  13. páginas Dev T alks Contact About Blog Home Sitemap copyright

    © 2017 Terms
  14. None
  15. None
  16. Bootstraps tiny

  17. organizando química toda a

  18. None
  19. http://patternlab.io/

  20. http://demo.patternlab.io/

  21. MAS…

  22. https://www.sitepoint.com/setting-up-a-living-styleguide-in-jekyll/

  23. case fintechdev

  24. navegação detalhes código demonstração

  25. None
  26. demo time

  27. atomic design CSS? no

  28. “…atomic design has nothing to do with CSS or JavaScript

    architecture.” http://bradfrost.com/blog/post/atomic-design-is-for-user-interfaces/ - Brad Frost
  29. arquitetura CSS

  30. http://www.creativebloq.com/web-design/manage-large-css- projects-itcss-101517528

  31. None
  32. metodologia CSS

  33. BLOCK ELEMENT MODIFIER - .header - .header__title - .header__title--dark

  34. None
  35. ! atomicdesign.bradfrost.com tableless.com.br/o-que-é- design-atomic "