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
48

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
82
Como Garantir a Qualidade da Sua Aplicação
Avatar for DevTalks Bauru devtalksbauru
0
98
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
50
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
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
310
高卒公務員から Webデザイナーになるまで
Avatar for kinomi kinomidesign
0
110
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
510
Portfolio 齋藤明敏 Hiroyuki Saito
Avatar for HIROYUKI SAITO crearedesign
0
110
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
2
270
Yumika Yamada Portfolio
Avatar for Yumii yumii
0
1.9k
Ana Cortes Visual Development Portfolio 2025
Avatar for Ana Belen Cortes Diaz haruanleb
0
120
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
920
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
100
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
1
460
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
730
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
440

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k

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 "