GoogleChrome / GoogleChrome/webdev-infra

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

Open
#48 1 comment 0 reactions 0 assignees View on GitHub
blocked design
Dominant language
JavaScript
Stars
39
Forks
29
PR merge metrics
No merged PRs in 30d

Description

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](https://getbootstrap.com/docs/5.3/getting-started/introduction/), but really tiny.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.