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

58m Link to video
Tags Tools SSG Coding Design Systems
Speakers Georges Gomes m4dz Ben Holmes
Edit on GitHub

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 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Picks:

Previous episodes you may be interested in: