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
45

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
360
Go, Goroutines, Concorrência e Outros Bichos
Avatar for DevTalks Bauru devtalksbauru
0
79
Como Garantir a Qualidade da Sua Aplicação
Avatar for DevTalks Bauru devtalksbauru
0
97
BDD - Além da Automação
Avatar for DevTalks Bauru devtalksbauru
0
91
PHP7 - Not for kids
Avatar for DevTalks Bauru devtalksbauru
0
47
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
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
320
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
120
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
610
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
Avatar for Andrew Shapiro ashapiro
0
130
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
2k
minpaku-community-scrum-patterns
Avatar for Noriaki Kawanishi norinity1103
1
250
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
Cyber Heart Online Book
Avatar for Hannah hjnasby
0
170
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
1.9k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
130

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
187
28k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
610
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
910
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Side Projects
Avatar for Sacha Greif sachag
455
43k

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 "