Coding Design Systems | ep06 | Svelte & Sveltekit with Brittney Postma
Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about Design Systems, on Backlight.dev!
⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
00:00 - Intro 00:10 - Svelte Sirens 01:49 - Building Design Systems in Svelte 04:44 - UI Libraries for Svelte to create Design Systems from 08:22 - Styling components in your Components library 17:18 - Using a Backlight made Design System in Sveltekit 33:45 - Adding documentation and supporting MDX in Svelte with mdsvex 40:50 - Outro
⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
This week we’re welcoming Brittney Postma (@BrittneyPostma) on the show! We’re going through the Svelte Ecosystem and the Sveltekit project, integrating a Backlight made Design System in it!
We discuss about the compiler and the logics behind Svelte Components. We also do styling improvements, to finally use the simple components coming from the Design System in a live Sveltekit app.
The show is also the occasion to cover the support of MDX in Svelte with the mdsvex project, and to introduce the Svelte Sirens community!
⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
-
Svelte: https://svelte.dev/
-
Sveltekit: https://kit.svelte.dev/
-
Svelte Sirens: https://sveltesirens.dev/
-
mdsvex: https://mdsvex.com/
-
Backlight Mastery - Svelte UI Libraries: https://backlight.dev/mastery/best-svelte-component-libraries-for-design-systems?utm_campaign=sessions%3Acds
-
Svelte Open Source Design System Starter Kit: https://github.com/divriots/starter-svelte
-
Svelte Starter Kit in Backlight: https://backlight.dev/doc/elVBDiiiouYQjeQ9fReN/?utm_campaign=sessions%3Acds
-
Purrfect Podcast: https://purrfect.dev/
-
“Backlight in Sveltekit” Svelte Sirens episode: https://youtu.be/S9BxYHBwYvo
-
🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds
-
🐥 Brittney Postma: https://twitter.com/BrittneyPostma
-
🐥 Georges Gomes: https://twitter.com/georges_gomes
-
🐥 m4dz: https://twitter.com/m4d_z