DEV Community

Cover image for Announcing Style Stage: A Community CSS Showcase
Stephanie Eckles
Stephanie Eckles

Posted on • Updated on • Originally published at moderncss.dev

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.

Style Stage: A modern CSS showcase styled by community contributions

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:

Top comments (15)

Collapse
 
stephanie profile image
Stephanie Handsteiner

Nice, I love CSS Zen Garden kind of things. 🧡

I'm definitely going to make at least one design around this markup. Maybe I'll even stream while doing it.

Collapse
 
5t3ph profile image
Stephanie Eckles

That sounds amazing, please share your stream link!

Collapse
 
stephanie profile image
Stephanie Handsteiner • Edited

Haven't streamed yet, I'm in the process of setting it all up, last (and kind of important part) is still being delivered to me: A (half) decent microphone.

I've so far only been watching live coding streams, and that gave me an urge to try it myself.

However, I will definitely share, once I've done the setup part!

Collapse
 
jeantiston profile image
Jean Tiston

Thank you for putting this project together @5t3ph ! I really enjoyed creating my stylesheet.

I also wrote about my experience doing it and some of the things I have learned along the way. 😊

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

This is an incredible project and I look forward to contributing and seeing all the creative ideas everyone has!

Collapse
 
5t3ph profile image
Stephanie Eckles

Thank you so much, I'm excited to see your contribution!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow Gif

I love thisss!!

Collapse
 
5t3ph profile image
Stephanie Eckles

🙌

Collapse
 
ben profile image
Ben Halpern

Wow this is sooooooooo cool!

Collapse
 
5t3ph profile image
Stephanie Eckles

🙌 Thanks, Ben! I'd certainly welcome submissions from you and your team 😉

Collapse
 
ben profile image
Ben Halpern

I’ll most certainly give it a spin. Can’t guarantee beauty 😄.

I bet @lisasy and @pp could do something pretty cool.

Collapse
 
s_aitchison profile image
Suzanne Aitchison

This is really cool and I love the themes so far! Definitely going to put a contribution to this on my to-do list - it'll be so much fun 😁

Collapse
 
5t3ph profile image
Stephanie Eckles

Whoohooo, can't wait! 💫

Collapse
 
ziizium profile image
Habdul Hazeez

This is interesting. Expect my submission.

Collapse
 
latobibor profile image
András Tóth

Ah, it's so great you keep the spirit alive! We need again great showcases of what CSS can do and to convince people to crawl out of the very strict subset of CSS and JS.