Setting the Stage
In 2003, Dave Shea began a legendary project called CSS Zen Garden that provided a demonstration of "what can be accomplished through CSS-based design" until submissions stopped in 2013.
Style Stage seeks to rekindle that spirit by providing this page as the base HTML for contributors - like you! - to re-style by submitting an alternate stylesheet.
How it works: Visit the "All Styles" directory page and select a style to view. A page with identical content to this one will be presented with a new design provided from a contributed stylesheet. CSS practitioners of any skill level are invited to submit a stylesheet!
The HTML for this page was created to be semantic, accessible, and free of nearly all other opinions. Nested sectioning elements with the class `.container` serve as additional style aids since you do not have access to alter the base HTML. IDs are included where needed for nav anchors or accessibility, and a small number of additional classes are provided for key elements without IDs. Don't forget the `.skip-link`!
Modern CSS Under the Spotlight
Modern CSS has increased and improved the available CSS properties and layout behaviors, and browser support is nearly in sync for most high-touch features.
Some examples of modern CSS include:
- Flexbox
- Grid
- custom variables
- @supports()
- gradients
- animation
- 3D transforms
- object-fit
- :focus-within
- calc()
- min() / max() / clamp()
- viewport units
- scroll-(margin/padding/snap)
- position: sticky
- two-value display
- expanded media query values
- variable fonts
We also collectively have an improved understanding of what it takes to make accessible experiences.
Join Style Stage as a contributor to refresh your CSS skills, and learn from others!