Coding Design Systems - ep20 - Stencil Components based Design System

Every Tuesday at 4: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: Welcome Anthony Giuliano & Mike Hartington from Ionic 03:18 - Using Stencil as a foundation for your design system 06:24 - Stencil’s Origins 10:23 - Using design tokens in a Stencil-based application 13:04 - Improving Stencil-based app architecture 18:07 - Coding part: build Stencil component using design tokens 31:02 - Adding theming behaviors to your Stencil-based app 51:36 - Outro

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

When talking about reusability and extensibility, you would always bet on standards. Fortunately, this is what Web Components are committed to being! By building your low-level, design systems components with Web Components, you may ensure a wide range of compatibility with your final apps frameworks. That’s what we cover in this episode: empowering the DX using advanced standards.

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

• Ionic framework documentation: https://ionicframework.com/docs/ (built with Stencil)

• Liquid Oxygen: https://emdgroup-liquid.github.io/liquid/ (built with Stencil)

• Ionic blog: https://ionicframework.com/blog/?s=stencil

• Stencil slack group: https://join.slack.com/t/stencil-worldwide/shared_invite/zt-zplx1nie-VfR~dAsLMV6pqN0ORGsKFg

• 🐥 @stenciljs: https://twitter.com/stenciljs

• Stencil: https://stenciljs.com/

• 🐥 @a**giuliano: https://twitter.com/a**giuliano

• 🐥 @mhartington: https://twitter.com/mhartington

• mhartington.io: https://mhartington.io/

Previous episodes you might be interested in:

• Web Components design system, with Thomas Allmer: https://backlight.dev/sessions/coding-design-systems-web-components-design-system-with-thomas-allmer?utm_campaign=sessions%3Acds

• A11y in your design system with Ben Myers: https://backlight.dev/sessions/coding-design-systems-accessibility-(a11y)-for-your-design-systems-with-ben-myers?utm_campaign=sessions%3Acds

• Building content with Astro with Matthew Phillips: https://backlight.dev/sessions/coding-design-systems-building-content-with-astro-with-matthew-phillips?utm_campaign=sessions%3Acds

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 m4dz: https://twitter.com/m4d_z