O documento apresenta a metodologia de design atômico para organizar componentes de interface de usuário de forma modular, começando por átomos individuais, moléculas, organismos e templates. A metodologia ajuda a manter o código limpo e reutilizável através de uma estrutura hierárquica de componentes.

1. FRONT ENDBACK
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ítuloEstilizado
AÇÃO 2AÇÃ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 AtivoLinkLink
Link Link Texto de rodapéLink

12. Modelos
LOGO Link AtivoLinkLink
Link Link texto de rodapéLink
IMAGEM

13. páginas
DevTalks ContactAboutBlog
Home Sitemap copyright © 2017Terms

16. Bootstrapstiny

17. organizando
químicatoda 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
"