Design stripped down components catalogue to use in demos and code snippets

[matthiasrohmer]

Replacement for https://github.com/GoogleChrome/developer.chrome.com/issues/3962 to focus on the design/concept task first, implementation issue to follow.

Across both web.dev and developer.chrome.com the team publishes multiple demos, which are usually quickly thrown together. For examples see:

• https://window-placement.glitch.me/ (from https://developer.chrome.com/en/articles/multi-screen-window-placement/)
• https://spc-rp.glitch.me/ (from https://developer.chrome.com/en/articles/register-secure-payment-confirmation/)
• https://reports-endpoint.glitch.me/ (from https://developer.chrome.com/en/articles/reporting-api/)
• https://protocol-handler-link.glitch.me/ (from https://developer.chrome.com/en/articles/url-protocol-handler/)
• https://user-agent-client-hints.glitch.me (from https://developer.chrome.com/en/articles/user-agent-client-hints/)
• https://fetch-abort-demo.glitch.me/ (from https://developer.chrome.com/en/blog/abortable-fetch/)

Those demos often focus on a small, specific user-flow usually made up from bare HTML elements like headlines, paragraphs or input elements like buttons, dropdowns and textareas which are barely styled. This is due to time constraints, but also to not obfuscate what the demo is actually about.

The goal is to design and compile a set of CSS-only components for a web.dev/d.c.c drop-in stylesheet. Think Bootstrap, but really tiny.

[matthiasrohmer]

Blocked as of 02/2023 due to ongoing design discussion around developer.chrome.com