Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

66 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

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

  1. 1. FRONT ENDBACK harmonia Atomic Design em com &
  2. 2. SOU @matheusagcosta EU?QUEM @fintechdev #comunidade <3
  3. 3. DESIGN OI?ATOMIC metodologia
  4. 4. átomos BOTÃO Parágrafo Título LINK #8ABE5E
  5. 5. moléculas TítuloEstilizado AÇÃO 2AÇÃO 1 Item 1 Item 2 Item 3 Item 4
  6. 6. organismos Alerta AÇÃO 2 Mensagem de confirmação AÇÃO 1 LOGO Link AtivoLinkLink Link Link Texto de rodapéLink
  7. 7. Modelos LOGO Link AtivoLinkLink Link Link texto de rodapéLink IMAGEM
  8. 8. páginas DevTalks ContactAboutBlog Home Sitemap copyright © 2017Terms
  9. 9. Bootstrapstiny
  10. 10. organizando químicatoda a
  11. 11. http://patternlab.io/
  12. 12. http://demo.patternlab.io/
  13. 13. MAS…
  14. 14. https://www.sitepoint.com/setting-up-a-living-styleguide-in-jekyll/
  15. 15. case fintechdev
  16. 16. navegação detalhes código demonstração
  17. 17. demo time
  18. 18. atomic design CSS?no
  19. 19. “…atomic design has nothing to do with CSS or JavaScript architecture.” http://bradfrost.com/blog/post/atomic-design-is-for-user-interfaces/ - Brad Frost
  20. 20. arquitetura CSS
  21. 21. http://www.creativebloq.com/web-design/manage-large-css- projects-itcss-101517528
  22. 22. metodologia CSS
  23. 23. BLOCK ELEMENT MODIFIER - .header - .header__title - .header__title--dark
  24. 24. ! atomicdesign.bradfrost.com tableless.com.br/o-que-é- design-atomic "

×