loading...
Cover image for Announcing Style Stage: A Community CSS Showcase

Announcing Style Stage: A Community CSS Showcase

5t3ph profile image Stephanie Eckles ・4 min read

Modern CSS Solutions to Old CSS Problems (20 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 18 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout 18) Announcing Style Stage: A Community CSS Showcase 19) Pure CSS Custom Styled Radio Buttons 20) Pure CSS Custom Checkbox Style

This special episode is about a new project that will give you a chance to flex your modern 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 and the project launched July 10.
  • 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:

Modern CSS Solutions to Old CSS Problems (20 Part Series)

1) Keep the Footer at the Bottom: Flexbox vs. Grid 2) Equal Height Elements: Flexbox vs. Grid 3 ... 18 3) CSS-Only Full-Width Responsive Images 2 Ways 4) Pure CSS Smooth-Scroll "Back to Top" 5) Totally Custom List Styles 6) Animated Image Gallery Captions with Bonus Ken Burns Effect 7) CSS-Only Accessible Dropdown Navigation Menu 8) ✨ Announcing ModernCSS.dev 9) Solutions to Replace the 12-Column Grid 10) CSS Button Styling Guide 11) Icon Button CSS Styling Guide 12) Resource: The Complete Guide to Centering in CSS 13) Generating `font-size` CSS Rules and Creating a Fluid Type Scale 14) Container Query Solutions with CSS Grid and Flexbox 15) Expanded Use of `box-shadow` and `border-radius` 16) 3 CSS Grid Techniques to Make You a Grid Convert 17) 3 Popular Website Heroes Created With CSS Grid Layout 18) Announcing Style Stage: A Community CSS Showcase 19) Pure CSS Custom Styled Radio Buttons 20) Pure CSS Custom Checkbox Style

Posted on by:

5t3ph profile

Stephanie Eckles

@5t3ph

(she/her) ✍️ ModernCSS.dev, πŸ‘©πŸΌβ€πŸŽ¨ StyleStage.dev, πŸ‘©β€πŸ’» Lead design system dev, πŸ‘©β€πŸ« @eggheadio instructor, πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘§ mom

Discussion

markdown guide
 

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.

 

That sounds amazing, please share your stream link!

 

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!

 

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. 😊

 

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

 

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

 
 
 

πŸ™Œ Thanks, Ben! I'd certainly welcome submissions from you and your team πŸ˜‰

 

I’ll most certainly give it a spin. Can’t guarantee beauty πŸ˜„.

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

 

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 😁

 

Whoohooo, can't wait! πŸ’«

 

This is interesting. Expect my submission.