Use Eleventy templating to include static code demos
Here’s a great tutorial from Eleventy guru Stephanie Eckles in which she explains how to create a page that displays multiple code demos, similar to SmolCSS.dev.
Fuzzy Logic
Hi – I’m Laurence Hughes, a Glaswegian web developer creating responsive websites which balance design, technology and accessibility. I also make music, play records and ping pongs. This is my online home; a playground for coding fun and place to share thoughts on the web, music and more.
Latest Posts
Reusable code snippets and components in Eleventy
There are (at least) three cunning ways in Eleventy to get “reusable snippet” or “reusable component” functionality.
Crafting Component API, Together (by Nathan Curtis, on Medium)
Nathan (of EightShapes) discusses how to unify anatomy and props across code and design tools.
Manage Design Tokens in Eleventy
One interesting aspect of the Duet Design System is that they use Eleventy to not only generate their reference website but also to generate their Design Tokens.
Duet Design System
Here’s a lovely Design System that interestingly uses Eleventy for its reference website and other generated artefacts:
We use Eleventy for both the static documentation and the dynamically generated parts like component playgrounds and design tokens. We don’t currently use a JavaScript framework on the website, except Duet’s own components.