Style Stage Contribution Guidelines: What to Know Before You Submit

Updated

Style Stage accepts stylesheet contributions from CSS practitioners of any skill level, but your submission must follow a specific set of rules. The short version: you submit a compiled, unminified CSS file that restyles the existing base HTML, all asset links must be absolute, your design must be responsive and pass accessible contrast checks, and your work is published under CC BY-NC-SA with attribution. If any of that doesn't fit how you want to share your design, Style Stage isn't the right venue.

The core constraint: you don't touch the HTML

Style Stage provides one fixed base page. You cannot alter it. Your entire contribution is a stylesheet.

The base HTML was built to be semantic, accessible, and "free of nearly all other opinions." To make styling possible without editing markup, it includes:

  • Nested sectioning elements with the class .container as additional style aids
  • IDs where needed for nav anchors or accessibility
  • A small number of extra classes for key elements that lack IDs
  • A .skip-link element

Plan your design around these hooks rather than around markup changes you can't make.

Submission requirements

Requirement What it means for you
Agree to full guidelines Contributing means you accept the complete guidelines, not just the summary
Compiled, unminified CSS Use any build setup you like, but the final file must be compiled and not minified
Autoprefixing Submissions are autoprefixed for you
License and attribution Your CSS is prepended with the CC BY-NC-SA license and attribution using the metadata you provide
Absolute asset links Every asset link, including fonts, must point to external resources with absolute URLs
Graphics licensing You keep copyright to original graphics, but you must ensure all graphics you use are appropriately licensed
Responsive design Your design must work across screen sizes
Accessible contrast Submissions are verified with aXe; failing contrast is a problem
Animation limits Animations should be handled with care (the guidelines excerpt cuts off mid-sentence here, so check the full guidelines for the exact rule)

Where submissions live and what gets them removed

Stylesheets are saved into the GitHub repository. Changes detected in that repo that violate the guidelines are cause for removal. In practice, that means your submission isn't a one-time upload — it stays in a public repo where it can be reviewed and pulled if it breaks the rules.

How the showcase works

  1. Visit the "All Styles" directory page.
  2. Select a style to view.
  3. You'll see a page with identical content to the base page, presented with a new design from a contributed stylesheet.

That directory is also the best way to understand what's possible before you write your own CSS.

What "modern CSS" means here

Style Stage exists to spotlight modern CSS, and the project lists the features it has in mind:

  • Flexbox and Grid
  • Custom variables
  • @supports()
  • Gradients, animation, 3D transforms
  • object-fit
  • :focus-within
  • calc(), min() / max() / clamp()
  • Viewport units
  • Scroll margin, padding, and snap
  • position: sticky
  • Two-value display
  • Expanded media query values
  • Variable fonts

Browser support is described as nearly in sync for most high-touch features, so leaning on these is the point rather than a risk.

Practical checklist before you submit

  • Confirm your CSS is compiled and unminified.
  • Convert every font and asset URL to an absolute external link.
  • Verify you have appropriate licensing for all graphics.
  • Test responsiveness at multiple widths.
  • Run your design against aXe for contrast and accessibility issues.
  • Review the full guidelines, since the summary above is explicitly a TL;DR.

Is Style Stage right for your design?

It fits if you want to demonstrate CSS skill against a fixed, accessible HTML base and are comfortable publishing under CC BY-NC-SA with attribution in a public GitHub repo. It doesn't fit if you need to control the markup, want to keep your CSS under a different license, or prefer to host assets locally rather than linking to external absolute URLs.