Coding Design Systems | ep 02 | Stitches - Part 1
Every Tuesday at 5:3PM CEST, join Georges Gomes and m4dz in a new live coding session about Design Systems on Backlight.dev!
⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
0:00 - Intro 3:15 - Stitches CSS-in-JS 5:59 - Creating a new Tech Sample for Stitches 7:46 - Using Stitches Tokens 12:43 - Documenting tokens using Dockit-react 37:12 - Styling a Button component with Stitches 53:42 - Adding variants to a component 1:01:00 - Outro
⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
This week, we start a new Tech Sample to demo Stitches by Modulz. We start implementing Stitches tokens: colors, spaces, fonts… We still use Dockit-react, the documentation framework made by ‹div›RIOTS, to power the documentation. Then we style a simple Button component with its variants by using the internal features of Stitches.
⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
- Stitches: https://stitches.dev/
- Dockit-react Documentation Framework: https://github.com/divriots/dockit-react
- Stitches Tech Sample in Backlight: https://backlight.dev/review/oDcLTC4uuKc9dEF5lbrz/?utm_campaign=sessions%3Acds
- Stitches Open Source Design System Tech Sample: https://github.com/divriots/starter-stitches
- Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds
- 🐥 Stitches: https://twitter.com/stitchesjs
- 🐥 Georges Gomes: https://twitter.com/georges_gomes
- 🐥 m4dz: https://twitter.com/m4d_z