Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Pedro Duarte @PEDUARTE

Slide 3

Slide 3 text

UI Modulz

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Stitches

Slide 6

Slide 6 text

Radix UI

Slide 7

Slide 7 text

Table of contents Introducing Stitches Philosophy Tokens Variants Utils Overrides Live Demo Install Set up Use Design System Background

Slide 8

Slide 8 text

Design System Background

Slide 9

Slide 9 text

Consistent UI

Slide 10

Slide 10 text

Source of truth

Slide 11

Slide 11 text

Common language

Slide 12

Slide 12 text

Introducing Stitches

Slide 13

Slide 13 text

PHILOSOPHY

Slide 14

Slide 14 text

Lightweight PHILOSOPHY

Slide 15

Slide 15 text

Performant PHILOSOPHY

Slide 16

Slide 16 text

Modern PHILOSOPHY

Slide 17

Slide 17 text

Developer Experience PHILOSOPHY

Slide 18

Slide 18 text

VARIANTS

Slide 19

Slide 19 text

1st class API VARIANTS

Slide 20

Slide 20 text

Typed VARIANTS

Slide 21

Slide 21 text

Responsive VARIANTS

Slide 22

Slide 22 text

Conditional VARIANTS

Slide 23

Slide 23 text

VARIANTS

Slide 24

Slide 24 text

TOKENS

Slide 25

Slide 25 text

Consistency TOKENS

Slide 26

Slide 26 text

Interoperable TOKENS

Slide 27

Slide 27 text

Property-aware TOKENS

Slide 28

Slide 28 text

TOKENS

Slide 29

Slide 29 text

UTILS

Slide 30

Slide 30 text

Common Language UTILS

Slide 31

Slide 31 text

OVERRIDES

Slide 32

Slide 32 text

Escape Hatch OVERRIDES

Slide 33

Slide 33 text

Live Demo

Slide 34

Slide 34 text

What’s next?

Slide 35

Slide 35 text

Stable Version WHAT’S NEXT

Slide 36

Slide 36 text

Benchmark Tool WRAPPING UP

Slide 37

Slide 37 text

Vue, Svelte, DOM, etc WHAT’S NEXT

Slide 38

Slide 38 text

stitches.dev

Slide 39

Slide 39 text

Thank you PEDRO DUARTE @PEDUARTE