Coding Design Systems | ep 01 | Open Props - 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 0:51 - Open Props quick tour 2:30 - Creating a new Design System for Open Props 3:11 - Bootstrapping with Colors tokens 31:25 - Layout documentation with Dockit 35:36 - Tokens: Gradients 38:34 - Tokens: Shadows 42:46 - Tokens: Aspect-ratios 48:02 - Tokens: Sizes 55:36 - Outro
⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
This week, we start a new Starter Kit to demo Open props from Adam Argyle. We start by implementing a simple documentation for a bunch of tokens: colors, gradients, shadows, aspect-ratios and sizes. We still use Dockit, the documentation framework made by ‹div›RIOTS, to power this documentation, and we rely on the CSS Custom Properties exposed by the Open Props framework.
⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
- Open Props: https://open-props.style/
- Dockit Documentation Framework: https://github.com/divriots/dockit-core
- Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds
- Open Props Starter Kit in Backlight: https://backlight.dev/review/Tve1ObNsVqRX7NlkUnzD/readme?utm_campaign=sessions%3Acds/doc/index.md?p=doc
- Open Props Open Source Design System Starter Kit: https://github.com/divriots/starter-open-props
- Adam Argyle: https://twitter.com/argyleink
- Georges Gomes: https://twitter.com/georges_gomes
- m4dz: https://twitter.com/m4d_z