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

Design Systems with Stitches - FEVR 16/12/20

Pedro Duarte
December 16, 2020
Programming
0
130

Design Systems with Stitches - FEVR 16/12/20

A live coding session on how to get up and running with Stitches.

Stitches - https://stitches.dev
Modulz - https://modulz.app
Radix Primitives - https://radix-ui.com

Pedro Duarte

December 16, 2020
Tweet

More Decks by Pedro Duarte

See All by Pedro Duarte
JAMstack Cheatsheet
peduarte
4
1.4k

Other Decks in Programming

See All in Programming
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
Honoの来た道とこれから
yusukebe
19
3k
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
420
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
240
組織に自動テストを書く文化を根付かせる戦略（2024秋版） / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
10
4.5k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
7
430
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.3k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
980
Synchronizationを支える技術
s_shimotori
1
150
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
Piniaの現状と今後
waka292
5
1.4k

Featured

See All Featured
Unsuck your backbone
ammeep
668
57k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Modern Web Designer's Workflow
chriscoyier
692
190k
For a Future-Friendly Web
brad_frost
175
9.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Invisible Side of Design
smashingmag
297
50k
Being A Developer After 40
akosma
86
590k
GraphQLとの向き合い方2022年版
quramy
43
13k
A Philosophy of Restraint
colly
203
16k
4 Signs Your Business is Dying
shpigford
180
21k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k

Transcript

  1. Design Systems 
 Stitches 16/12/20 — FEVR BY @PEDUARTE

  2. Pedro Duarte @PEDUARTE

  3. UI Modulz

  4. None

  5. Stitches

  6. Radix UI

  7. Table of contents Introducing Stitches Philosophy Tokens Variants Utils Overrides

    Live Demo Install Set up Use Design System Background

  8. Design System Background

  9. Consistent UI

  10. Source of truth

  11. Common language

  12. Introducing Stitches

  13. PHILOSOPHY

  14. Lightweight PHILOSOPHY

  15. Performant PHILOSOPHY

  16. Modern PHILOSOPHY

  17. Developer Experience PHILOSOPHY

  18. VARIANTS

  19. 1st class API VARIANTS

  20. Typed VARIANTS

  21. Responsive VARIANTS

  22. Conditional VARIANTS

  23. VARIANTS

  24. TOKENS

  25. Consistency TOKENS

  26. Interoperable TOKENS

  27. Property-aware TOKENS

  28. TOKENS

  29. UTILS

  30. Common Language UTILS

  31. OVERRIDES

  32. Escape Hatch OVERRIDES

  33. Live Demo

  34. What’s next?

  35. Stable Version WHAT’S NEXT

  36. Benchmark Tool WRAPPING UP

  37. Vue, Svelte, DOM, etc WHAT’S NEXT

  38. stitches.dev

  39. Thank you PEDRO DUARTE @PEDUARTE