Coding Design Systems - ep21 - ModernCSS.dev and Nunjucks components for a static Web content

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 Stephanie Eckles 07:53 - Upcoming CSS new features for design systems 14:20 - Distributing tokens to components in a design system 23:49 - CSS @layer feature to separate concerns in a design system 30:44 - All the ways to build components in Nunjucks 54:42 - Outro: upcoming Stephanie’s workshop and next episode on multi-brands design systems

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

In this episode, let’s cover upcoming CSS features like container queries or @layer to organize and architect the way you distribute your design system. We also cover different ways to define a component with Nunjucks so you can distribute and reuse them in your static website, allowing to create a design system for your static web content as well!

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

• CSS Container Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
• a11y color tokens tools: https://github.com/5t3ph/a11y-color-tokens/
• Design tokens format W3C draft: https://design-tokens.github.io/community-group/format/#design-token
• The Future of CSS: Cascade Layers (CSS @layer): https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/
• Can I Use @alayer: https://caniuse.com/?search=layer
• Getting Started With CSS Cascade Layers: https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/
• Using Nunjucks shortcodes to define components: https://github.com/5t3ph/11ty-design-system-example/blob/main/.eleventy.js
• Place Corgi: http://placecorgi.com/
• Cupcake Ipsum: http://www.cupcakeipsum.com

• 🐥 @5t3ph: https://twitter.com/5t3ph
• Stephanie Eckles Website: https://thinkdobecreate.com/
• ModernCSS.dev: https://moderncss.dev/
• Style Stage: https://stylestage.dev/

Previous episodes you might be interested in:

• Design Systems with 11ty with Zach Leatherman: https://backlight.dev/sessions/coding-design-systems-design-systems-with-11ty-with-zach-leatherman?utm_campaign=sessions%3Acds

• Accessibility (A11Y) for your Design Systems with Ben Myers: http://backlight.dev/sessions/coding-design-systems-accessibility-(a11y)-for-your-design-systems-with-ben-myers?utm_campaign=sessions%3Acds

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

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