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

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

DevTalks Bauru
July 06, 2017
Design
0
41

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

Talk do Matheus Costa

DevTalks Bauru

July 06, 2017
Tweet

More Decks by DevTalks Bauru

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

Other Decks in Design

See All in Design
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
550
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
我做了一個詐騙網站...嗎？
crboy
1
150
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
200
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
270
root COMPANY DECK / We are hiring！
root_recruit
1
15k
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
260
ito aya|Portfolio2409
itoaya116
0
260
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
なぜデフォルトが青色！？ Tint Colorの理由に迫る
akidon0000
0
460

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Adopting Sorbet at Scale
ufuk
73
9.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Automating Front-end Workflow
addyosmani
1366
200k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Site-Speed That Sticks
csswizardry
0
23
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k

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 "