Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for DevTalks Bauru DevTalks Bauru
July 06, 2017
Design
0
44

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

Talk do Matheus Costa

Avatar for DevTalks Bauru

DevTalks Bauru

July 06, 2017
Tweet

More Decks by DevTalks Bauru

See All by DevTalks Bauru
Construindo Microsserviços a partir de um Monolito
Avatar for DevTalks Bauru devtalksbauru
0
210
Robôs para Mercado Financeiro com MQL
Avatar for DevTalks Bauru devtalksbauru
1
200
Introdução ao Universo React Native
Avatar for DevTalks Bauru devtalksbauru
0
350
Go, Goroutines, Concorrência e Outros Bichos
Avatar for DevTalks Bauru devtalksbauru
0
78
Como Garantir a Qualidade da Sua Aplicação
Avatar for DevTalks Bauru devtalksbauru
0
96
BDD - Além da Automação
Avatar for DevTalks Bauru devtalksbauru
0
90
PHP7 - Not for kids
Avatar for DevTalks Bauru devtalksbauru
0
46
A verdade sobre Frameworks
Avatar for DevTalks Bauru devtalksbauru
0
49
Home Office: Você e a sua empresa estão preparados?
Avatar for DevTalks Bauru devtalksbauru
0
130

Other Decks in Design

See All in Design
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
200
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
480
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
740
FigmaのFigmaファイルから学ぶTips & Tricks
Avatar for Hiroki Tani hilokifigma
0
580
Liquid Iron
Avatar for Brynn McDucky P. mcduckyart
1
110
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
330
Selección de proyectos PORTFOLIO 16/25
Avatar for Álvaro alvaroromero
0
100
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
1
220
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
Avatar for マズロー安達 maslow_akkun
0
180
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
430
線で考える画面構成
Avatar for natsuume natsuume
1
890
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
190

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Side Projects
Avatar for Sacha Greif sachag
455
43k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
490
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Done Done
Avatar for chrislema chrislema
184
16k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
720
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k

Transcript

  1. FRONT END BACK harmonia Atomic Design em com &

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

  3. DESIGN OI? ATOMIC metodologia

  4. None
  5. None
  6. None
  7. None
  8. None

  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
  14. None
  15. None

  16. Bootstraps tiny

  17. organizando química toda a

  18. None

  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

  25. None

  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

  31. None

  32. metodologia CSS

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

  34. None

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