How do I contribute a stylesheet to Style Stage?

Updated

To contribute, you submit an alternate stylesheet that restyles Style Stage's fixed base HTML, following the site's guidelines: your final CSS must be compiled and unminified, all asset links (including fonts) must be absolute to external resources, and your design must be responsive and pass accessible contrast checks (the site says it verifies with aXe). Submissions are autoprefixed and prepended with a CC BY-NC-SA license plus attribution built from the metadata you provide. You keep copyright to original graphics, but every graphic you use must be appropriately licensed. Anyone at any CSS skill level can submit.

What you're actually styling

Style Stage exists to revive the spirit of CSS Zen Garden, which ran from 2003 until submissions stopped in 2013. The idea is the same: everyone styles one identical HTML document, so the only variable is your CSS.

Because you can't alter the base HTML, the page was built to be semantic, accessible, and "free of nearly all other opinions." Hooks you can target:

  • Nested sectioning elements with the class .container, provided as extra style aids
  • IDs where needed for nav anchors or accessibility
  • A small number of additional classes for key elements that don't have IDs
  • The .skip-link, which the site explicitly reminds contributors not to forget

Step-by-step contribution

  1. Read the full guidelines. The site's Contribute section links to them, and the TL;DR above is a summary — the full version governs.
  2. Build your stylesheet against the base HTML. Use any build setup you prefer (preprocessors, bundlers, etc.).
  3. Compile and unminify before submitting. The final submission must be the compiled, unminified CSS — not your source files and not a minified bundle.
  4. Make all asset links absolute. This applies to fonts too; relative paths to external resources won't work.
  5. Check responsiveness and contrast. The site states aXe is used to verify accessible contrast, so test before submitting rather than after.
  6. Prepare your metadata. Attribution is generated from the metadata you provide, so supply it accurately.
  7. Submit. Accepted stylesheets are saved into the GitHub repo.

Verify before you submit

  • Compiled and unminified — confirm the file you're sending is the built output, readable, not minified.
  • Absolute asset URLs — every font, image, and external resource link points to a full external URL.
  • Responsive — the design holds up across viewport sizes.
  • Contrast passes aXe — run an accessibility check; the maintainers will.
  • Graphics licensed — you retain copyright on original graphics, and anything you didn't create must be appropriately licensed.
  • Animations — the guidelines excerpt cuts off mid-sentence on animations, so read the full guidelines for the exact animation rules before relying on motion in your design.

What happens after submission

Your stylesheet is autoprefixed and prepended with the CC BY-NC-SA license and attribution based on your metadata, then saved into the GitHub repo. The site notes that detected changes violating the guidelines are cause for removal — so if you later edit assets or dependencies in a way that breaks the rules, the style can be taken down.

Where to see it live

Visit the "All Styles" directory page and pick any style. You'll get a page with identical content to the base, presented with that contributor's design — the fastest way to understand what's achievable within the constraints before you start your own.

Common sticking points

  • Submitting source instead of compiled CSS. The rule is compiled and unminified — both conditions.
  • Relative font or asset paths. These must be absolute to external resources, which trips up people used to bundling assets locally.
  • Skipping the .skip-link. It's called out specifically because it's easy to overlook when you're focused on visuals.
  • Assuming you can touch the HTML. You can't; work only with the provided classes, IDs, and structure.
  • Treating the TL;DR as complete. The animation guidance and other details live in the full guidelines.

If you want to refresh your CSS skills and learn from other contributors' approaches, the site frames contribution as exactly that — a way to practice modern CSS (Flexbox, Grid, custom properties, clamp(), :focus-within, container-style layout behaviors, and more) against a real, shared constraint set.