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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for DevTalks Bauru DevTalks Bauru
July 06, 2017
Design
100
0

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

Talk do Matheus Costa

Avatar for DevTalks Bauru

DevTalks Bauru

July 06, 2017

More Decks by DevTalks Bauru

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

Other Decks in Design

See All in Design
タイル紹介サイト「タイルだもんで」
Avatar for しま calpin
0
170
Frontier
Avatar for Renny Wang rwang05
0
200
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
3
2.1k
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
270
富山デザイン勉強会_デザイン思考.pdf
Avatar for keita keita_yoshikawa
2
120
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
720
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
210
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
870
個人理念（自分の言葉）の言語化ワークショップ
Avatar for 加来幸樹 SIGNCOSIGN kakukoki
1
180
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
Avatar for たと ottatto
3
1.8k
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
210
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
180

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
430
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
790
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
220
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
530
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
660
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k

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 "