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