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
0
49

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
240
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
88
Como Garantir a Qualidade da Sua Aplicação
Avatar for DevTalks Bauru devtalksbauru
0
100
BDD - Além da Automação
Avatar for DevTalks Bauru devtalksbauru
0
93
PHP7 - Not for kids
Avatar for DevTalks Bauru devtalksbauru
0
49
A verdade sobre Frameworks
Avatar for DevTalks Bauru devtalksbauru
0
55
Home Office: Você e a sua empresa estão preparados?
Avatar for DevTalks Bauru devtalksbauru
0
140

Other Decks in Design

See All in Design
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
200
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
PRO
0
260
Liquid GlassとApp Intents
Avatar for touyou touyou
0
810
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
300
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
840
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
240
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
26k
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
200
hicard_credential_202601
Avatar for hicard hicard
0
160
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
140

Featured

See All Featured
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
640
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
54
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
110
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k

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 "