stylestage.dev

To browse every community-contributed design on Style Stage, open the "All Styles" directory page on stylestage.dev and select any style from the list. Each selection loads the same base HTML content you see on the homepage, but rendered with that contributor's alternate stylesheet — so you can compare how different CSS approaches transform identical markup.

What the All Styles directory shows you

Style Stage is a modern revival of the CSS Zen Garden idea: one fixed, semantic HTML page that contributors restyle by submitting their own stylesheet. The directory is the index of those submissions.

• Every entry is a separate alternate stylesheet applied to the same base HTML.
• Selecting a style presents content identical to the main page, with a new design layered on top.
• The collection is entirely community-driven, so the range of techniques and visual approaches varies widely.

Because the HTML never changes, the directory is effectively a controlled comparison — any difference you see between two styles comes from CSS alone.

How to view a style

1. Go to the "All Styles" directory page.
2. Pick a style from the listing.
3. The page reloads with that contributed stylesheet applied; the content stays the same.

There is no build step or setup required to browse — you are just viewing published stylesheets in the browser.

Why browse the directory

The site frames itself as a way to see modern CSS "under the spotlight." Browsing is useful if you want to:

• Study how other practitioners handle layout, color, and typography on a fixed HTML structure.
• Refresh your own CSS skills by seeing techniques applied in context.
• Learn from others before deciding whether to contribute your own stylesheet.

If you want to contribute next

Browsing often leads to submitting. The site invites CSS practitioners of any skill level to contribute a stylesheet. Before you do, note the key conditions stated in the guidelines:

• Submissions are autoprefixed and prepended with a CC BY-NC-SA license plus attribution using the metadata you provide.
• You may use any build setup, but the final submission must be compiled, unminified CSS.
• You keep copyright to original graphics and must ensure all graphics are appropriately licensed.
• All asset links, including fonts, must be absolute to external resources.
• Stylesheets are saved into the GitHub repo, and detected changes that violate the guidelines can cause removal.
• Designs must be responsive and pass accessible contrast (verified with aXe).

The base HTML is intentionally semantic, accessible, and free of most opinions, with .container sectioning elements, IDs for nav anchors and accessibility, a few extra classes for key elements, and a .skip-link. You cannot alter the base HTML, so your stylesheet works within those hooks.

For updates about the project, the site offers a "Subscribe to Updates" page.

Style Stage showcases a deliberately broad set of modern CSS capabilities, from layout systems like Flexbox and Grid to newer functions such as clamp() and :focus-within. The base HTML is written to be semantic, accessible, and free of nearly all other opinions, so contributors can restyle it without fighting pre-existing design decisions. The project is maintained by Stephanie Eckles (@5t3ph) of ModernCSS.dev and is described as a modern CSS showcase styled by community contributions.

The base HTML you're working with

Because contributors cannot alter the base HTML, the markup is built to give you styling hooks without imposing visual choices. According to the site, the HTML was created to be:

• Semantic and accessible — structure carries meaning, and accessibility is treated as a baseline requirement rather than an add-on.
• Free of nearly all other opinions — minimal presentational assumptions, so your stylesheet drives the design.
• Nested sectioning elements with the .container class — these serve as additional style aids.
• IDs where needed — included for navigation anchors or accessibility purposes.
• A small number of extra classes — provided for key elements that lack IDs.
• A .skip-link — the site explicitly reminds contributors not to forget it.

This matters because your stylesheet is the only layer you control. If you want a layout that depends on a wrapper you don't have, you need to work with the existing sectioning and .container structure instead.

Modern CSS features in the spotlight

The site lists the following as examples of modern CSS it highlights. Browser support for most high-touch features is described as nearly in sync.

A few of these are worth calling out for how they change what a stylesheet can do:

• clamp() and min() / max() let you express fluid sizing in a single declaration instead of stacking media query overrides.
• :focus-within lets a parent react when a child receives focus, which is useful for accessible interactive components.
• scroll-(margin/padding/snap) supports scroll-based layouts and snapping behavior without JavaScript.
• Two-value display and expanded media query values reflect newer syntax that reduces workarounds.
• Variable fonts and custom variables make typography and theming more flexible within a single stylesheet.

Accessibility is part of the showcase

Style Stage pairs its CSS focus with an explicit accessibility expectation. The site states that the community has "an improved understanding of what it takes to make accessible experiences," and the guidelines require that your design passes accessible contrast, verified using aXe. Responsive design is also required.

So the features above aren't just a list to demonstrate — they're tools you're expected to apply in a design that remains usable and readable. For example, using :focus-within or position: sticky is fine, but the result still has to meet contrast and responsiveness checks.

Why this matters if you're contributing

If you plan to submit a stylesheet, the practical takeaways are:

1. You can't change the HTML, so design around the existing semantic structure, .container nesting, IDs, and .skip-link.
2. You have a wide feature set available, but the final submission must be compiled, unminified CSS, and it will be autoprefixed and prepended with the CC BY-NC-SA license plus attribution from your metadata.
3. Your design must be responsive and pass accessible contrast — aXe is used for verification.
4. Asset links, including fonts, must be absolute to external resources, and you retain copyright to original graphics while ensuring all graphics are appropriately licensed.

In short, Style Stage is both a gallery and a constraint exercise: the base HTML stays fixed and accessible, and the modern CSS feature list is the palette you use to restyle it.

Style Stage is a community-driven CSS showcase where contributors submit alternate stylesheets to restyle one shared base HTML page. Maintained by Stephanie Eckles (@5t3ph) of ModernCSS.dev, it revives the spirit of Dave Shea's CSS Zen Garden (2003–2013) by giving CSS practitioners of any skill level a single, fixed HTML document to design against. If you want to practice modern CSS, compare how different designers solve the same layout problem, or publish a stylesheet without touching markup, Style Stage is built for exactly that.

How it works

The core constraint is the point: you cannot alter the base HTML. Every submission styles the same semantic, accessible document, so the only variable is your CSS.

• Visit the All Styles directory page and select a style to view.
• The same content is then presented with a new design provided by that contributed stylesheet.
• To contribute, you submit an alternate stylesheet rather than a new page.

The base HTML was written to be semantic, accessible, and "free of nearly all other opinions." Nested sectioning elements with the class .container serve as style aids, IDs are included where needed for nav anchors or accessibility, and a small number of additional classes are provided for key elements without IDs. There is also a .skip-link you should account for.

What "modern CSS" means here

Style Stage highlights properties and layout behaviors that have matured to broad browser support. Examples listed on the site include:

The site frames this as a two-sided opportunity: refresh your own CSS skills and learn from others' approaches to the same markup.

Guidelines at a glance

Contributing means agreeing to the full guidelines. The stated summary:

• All submissions are autoprefixed and prepended with the CC BY-NC-SA license plus attribution using the metadata you provide.
• You may use any build setup you prefer, but the final submission must be the compiled, unminified CSS.
• You retain copyright to original graphics and must ensure all graphics used are appropriately licensed.
• All asset links, including fonts, must be absolute to external resources.
• Stylesheets are saved into the GitHub repo, and detected changes that violate the guidelines are cause for removal.
• Your design must be responsive and pass accessible contrast, verified with aXe.
• Animations are subject to additional requirements (the excerpt cuts off here, so check the full guidelines before submitting).

Who it's for

• CSS learners who want a real, constrained project instead of another isolated demo.
• Experienced practitioners comparing techniques against other designers working from identical HTML.
• Anyone curious about how far pure CSS can push a single document — browse the directory without contributing.

If you only want to look at designs, no submission is needed; the directory is the entry point. If you want to contribute, read the full guidelines first, since licensing, asset hosting, and accessibility checks are enforced rather than optional.

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.

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

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.