$30 off During Our Annual Pro Sale. View Details »

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
    &

    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