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
   &
   

   View Slide

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

   View Slide

3. DESIGN
   OI?
   ATOMIC
   metodologia
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. átomos
   BOTÃO
   Parágrafo
   Título LINK
   #8ABE5E
   

   View Slide

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

    View Slide

11. organismos
    Alerta
    AÇÃO 2
    Mensagem de confirmação
    AÇÃO 1
    LOGO Link Ativo
    Link
    Link
    Link Link Texto de rodapé
    Link
    

    View Slide

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

    View Slide

13. páginas
    Dev
    T
    alks Contact
    About
    Blog
    Home Sitemap copyright © 2017
    Terms
    

    View Slide

14. View Slide

15. View Slide

16. Bootstraps
    tiny
    

    View Slide

17. organizando
    química
    toda a
    

    View Slide

18. View Slide

19. http://patternlab.io/
    

    View Slide

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

    View Slide

21. MAS…
    

    View Slide

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

    View Slide

23. case fintechdev
    

    View Slide

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

    View Slide

25. View Slide

26. demo time
    

    View Slide

27. atomic design
    CSS?
    no
    

    View Slide

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
    

    View Slide

29. arquitetura
    CSS
    

    View Slide

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

    View Slide

31. View Slide

32. metodologia
    CSS
    

    View Slide

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

    View Slide

34. View Slide

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

    View Slide