Announcing Style Stage: A Community CSS Showcase

This special Modern CSS Solutions episode is about a new project that will give you a chance to flex your CSS skills.

Dear CSS community:

I invite you to participate in a new project where you have the opportunity to challenge both your CSS and web design skills while learning in public.

About Style Stage

StyleStage.dev is not just an informational landing page about the project - it is the foundational HTML which is intended to be restyled by contributors - like you!

Style Stage started as a wild idea to reanimate the spirit of
CSS Zen Garden which was created by Dave Shea and that provided a demonstration of "what can be accomplished through CSS-based design" until submissions stopped in 2013.

Things in CSS-land have improved a lot since then, including the available properties, the tools we have available to build with, our greater understanding of addressing accessibility concerns, and increased awareness of performance impacts.

If you missed the launch live stream, here's the lightly edited full recorded Twitch broadcast, or by topic in the Twitch highlight collection. We covered a lot of the things in this article plus more about CSS, and concluded by building a new 11ty feature ✨.

Why Do We Need This?

There's a growing tendency to choose a framework when what would best serve a project is using CSS in its natural state and becoming one with the cascade.

Creating your Style Stage stylesheet will challenge you to explore techniques like flexbox and grid to arrange the page, and pseudo elements to add extra content and flair. Take the opportunity to design something crazy! So far, gradients and transform: skew() are popular with contributors ✨ Check out the list of other modern features for inspiration of what you may like to try.

By prohibiting access to the HTML (which is already semantic and accessible on its own), Style Stage encourages you to get creative while re-familiarizing yourself with the basics. And in this otherwise fast-paced industry, I see that as a major positive.

Play is a powerful teacher! How far can you push the boundaries while staying accessible and performant? These are skills worth practicing that will equip you to choose the right tool for the job in future projects. Even if the right tool is a framework, you will have a deeper understanding of how styles you apply are working and improve your ability to customize them.

Trust me - it feels good to say: "I can do that in CSS!"

For a growing list of tips, ideas, and inspiration, view the resources.

Subscribe to the newsletter for periodic updates related to new styles and release of new features. You can also pick up the RSS feed.

How Do I Contribute a Stylesheet?

Review StyleStage.dev for expanded details, as well as the source HTML and CSS.

By participating as a contributor, your work will be shared with your provided attribution as long as Style Stage is online, your stylesheet link and any asset links remain valid, and all contributor guidelines are adhered to.

Review the steps to contribute >

Guidelines TL;DR

All submissions will be minified, autoprefixed, and prepended with the CC BY-NC-SA license as well as attribution using the metadata you provide. You may use any build setup you prefer, but the final submission should be the compiled, unminified CSS. You retain the 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 will be saved into the Github repo, and detected changes that violate the guidelines are cause for removal.

Ensure your design is responsive, and that it passes accessible contrast (we'll be using aXe to verify). Animations should be removed via prefers-reduced-motion. Cutting-edge techniques should come with a fallback if needed to not severely impact the user experience. No content may be permanently hidden, and hidden items must come with an accessible viewing technique. Page load time should not exceed 3 seconds.

Review the full guidelines >

(Possible) Future Features

• dark mode toggle - optionally opt into a toggle to improve the user experience by allowing them to choose which theme to display rather than relying on prefers-color-scheme values alone
• style index preview images - to improve the experience of browsing available styles

Credits

Big thanks to Andy Bell (@hankchizljaw) for his extra time reviewing the foundations of the project, and being an early promotor! 💫

Thanks also to Miriam Suzanne (@MiriSuzanne) for some great feedback and ideas about how to evolve the project 🚀

The project description and guidelines were made more clear by suggestions from Katie Langerman (@KatieLangerman) 🙌

And of course the original six contributors - thanks so much for helping bring this project to life by spending time within a short deadline to create your awesome stylesheets!

Some Stats

• The idea for Style Stage arose July 2, 2020 and the project launched July 10, 2020.
• Built on my favorite static site generator, 11ty beginning from a starter I developed
• Hosted on Netlify
• The Main Stage theme receives a 100 lighthouse and PageSpeed score, as well as a speed index of 0.502s 🙌

Here are the original 6 contributors:

• Retroish by Jean Louise Tiston
• Skewten by Donnie D'Amato
• Purplify & Pastel by Dominic Duffin
• Vaporwave by Shannon Crabill
• Center Stageby Katie Langerman
• Queer Modes by Miriam Suzanne