Modern CSS + Design Systems with Stephanie Eckles
Coding Design Systems
Design systems as they relate to 11ty + modern CSS opportunities.
In this episode, let’s go covering upcoming CSS features like container queries or @layer to organize and architecture the way your distribute you 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!
About Stephanie
Stephanie Eckles is a front-end-focused SWE at Microsoft. She’s also the author of ModernCSS.dev which provides modern solutions to old CSS problems as in-depth tutorials and is the creator of StyleStage.dev, and author of SmolCSS.dev and 11ty.Rocks. Steph has well over a decade of webdev experience that she enjoys sharing as an author, egghead and workshop instructor, Twitch streamer, and conference speaker. She’s an advocate for accessibility, scalable CSS, and the Jamstack (especially Eleventy). Offline, she’s mom to two girls and a cowboy corgi and enjoys baking.
Resources
- CSS Container Queries
- a11y color tokens tools
- Design tokens format W3C draft
- The Future of CSS: Cascade Layers (CSS
@layer) - Can I Use
@alayer - Getting Started With CSS Cascade Layers
- Using Nunjucks shortcodes to define components
- Place Corgi
- Cupcake Ipsum