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?

Transcript

1. FRONT END BACK harmonia Atomic Design em com &
2. SOU @matheusagcosta EU? QUEM @fintechdev #comunidade <3
3. DESIGN OI? ATOMIC metodologia
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
16. Bootstraps tiny
17. organizando química toda a
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
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
32. metodologia CSS
33. BLOCK ELEMENT MODIFIER - .header - .header__title - .header__title--dark
35. ! atomicdesign.bradfrost.com tableless.com.br/o-que-é- design-atomic "