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
45
A verdade sobre Frameworks
Avatar for DevTalks Bauru devtalksbauru
0
48
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
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
180
An Early Spring | Storyboard | Scenes 1-18
Avatar for Gio Fortunato giofortuna_story
0
260
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
130
AIで加速するアクセシビリティのこれから
Avatar for Rikiya Ihara / magi magi1125
3
530
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
940
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
430
線で考える画面構成
Avatar for natsuume natsuume
1
880
CIRCULAR ECONOMY + SERVICES
Avatar for John Manoochehri jmanooch
0
110
デフォルトの16:9（960*540px）のケース / Google Slide Size Test
Avatar for Arthur arthur1
0
2.9k
Generating Momentum | Yasuhiro Yokota
Avatar for Yasuhiro Yokota | 横田泰広 yasuhiroyokota
1
370
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
160
NAHO SHIMONO_Portfolio2025
Avatar for Naho nahohphp
0
840

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k

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 "