Coding Design Systems - ep14 - Design Systems and Islands Architecture built-in, with Ben Holmes

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:38 - Welcome Ben Holmes, creator of Slinkity and Astro core-member
05:34 - Slinkity: the islands architecture plugin for 11ty
10:09 - Developping for the 11ty plugins ecosystem
13:09 - Working with design systems in a SSG context
16:53 - Running a new Slinkity project
23:19 - Using partial hydration in your static site
26:52 - Creating a custom component ready to use with Slinkity
31:25 - Using hydration in components
38:01 - Mixin frontend frameworks for your design system components
45:06 - Styling with CSS Modules in Slinkity
52:30 - Importing components from your design system in your static site
53:56 - Picks: Atkinson hyperlegible font & ContrasteApp
56:31 - Outro

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Keep It Simply Simple: when working on a bunch of web pages, using complex tools may not be mandatory, and you can easily rely on Static Site Generators (SSG) like 11ty. And you may want to use a design system, and youd be right! Developing your components in your design system outside of your final project may be a tedious task when you only have access to templating languages. This is also true when you want to integrate partial hydration and islands architecture.

This is where Slinkity comes on stage. This is what we cover in this episode.

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

🐥 @slinkitydotdev:   / slinkitydotdev  
https://slinkity.dev/
🐥 @BHolmesDev:   / bholmesdev  
https://bholmes.dev/
`export default thing` is different to `export { thing as default }`: https://jakearchibald.com/2021/export...

Picks:
Atkinson hyperlegible font: https://brailleinstitute.org/freefont
Contraste app: https://contrasteapp.com/

Previous episodes you may be interested in:
Design Systems with 11ty - Zach Leatherman: https://backlight.dev/sessions/coding...
Building content with Astro - Matthew Phillips: https://backlight.dev/sessions/coding...

🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=s...
🐥 Georges Gomes:   / georges_gomes  
🐥 m4dz:   / m4d_z