While trying to improve the tokens-to-CSS-variables pipeline, I made a lot of big changes to the repo. I love build tooling. Can't be helped.
This is a big change. The overall goal is to get us on Design System footing in our tools, so we don't default to Template thinking in the way we work. Here's what that means in practice.
Put the Design System code front and center in the repo.
The parts folder contains all of the components.
The packs folder contains the bundle files that combine components into deliverables.
The demo folder contains all of the 11ty site files.
Test the components in isolation as needed.
One of the biggest problems in the previous Design System was unintended dependencies between different parts. This setup lets us test those dependencies. We can edit the link and script files in each component page, as needed, to test.
Test the whole system, all together, as needed.
The demo/pages folder can be used to test the whole system, especially with bundle files.
Hook all of the CSS/JS build activities into 11ty's watchers, for smooth dev.
Also didn't forget to fix up the CSS tokens problem. That code now lives in parts/tokens.
This is not intended to produce a useful production site for marketing or documentation purposes. The idea here is to have a workshop, not a showroom. I trust the Toolkit squad will have their own ideas about how to showcase these components to the public.
Additional tech notes:
We'll need to reconfigure any GitHub Pages setups. Lemme know if I can help with that.
This is using the version 3 beta of 11ty, which may require a recent version of Node.
While trying to improve the tokens-to-CSS-variables pipeline, I made a lot of big changes to the repo. I love build tooling. Can't be helped.
This is a big change. The overall goal is to get us on Design System footing in our tools, so we don't default to Template thinking in the way we work. Here's what that means in practice.
partsfolder contains all of the components.packsfolder contains the bundle files that combine components into deliverables.demofolder contains all of the 11ty site files.linkandscriptfiles in each component page, as needed, to test.demo/pagesfolder can be used to test the whole system, especially with bundle files.parts/tokens.This is not intended to produce a useful production site for marketing or documentation purposes. The idea here is to have a workshop, not a showroom. I trust the Toolkit squad will have their own ideas about how to showcase these components to the public.
Additional tech notes: