Asserting Fashion Stage: A Neighborhood CSS Showcase

Pricey CSS neighborhood:

I invite you to take part in a brand new venture the place you’ve gotten the chance to problem each your CSS and internet design expertise whereas studying in public.

StyleStage.dev isn’t just an informational touchdown web page in regards to the venture – it’s the foundational HTML which is meant to be restyled by contributors – such as you!

Fashion Stage began as a wild concept to reanimate the spirit of
CSS Zen Backyard which was created by Dave Shea and that supplied an indication of “what will be completed by CSS-based design” till submissions stopped in 2013.

Issues in CSS-land have improved loads since then, together with the obtainable properties, the instruments we’ve obtainable to construct with, our larger understanding of addressing accessibility considerations, and elevated consciousness of efficiency impacts.

Should you missed the launch dwell stream, here is the evenly edited full recorded Twitch broadcast, or by matter in the Twitch spotlight assortment. We coated plenty of the issues on this article plus extra about CSS, and concluded by constructing a brand new 11ty characteristic ✨.

There is a rising tendency to decide on a framework when what would finest serve a venture is utilizing CSS in its pure state and turning into one with the cascade.

Creating your Fashion Stage stylesheet will problem you to discover strategies like flexbox and grid to rearrange the web page, and pseudo parts so as to add further content material and aptitude. Take the chance to design one thing loopy! To date, gradients and rework: skew() are well-liked with contributors ✨ Take a look at the listing of different trendy options for inspiration of what it’s possible you’ll prefer to attempt.

By prohibiting entry to the HTML (which is already semantic and accessible by itself), Fashion Stage encourages you to get artistic whereas re-familiarizing your self with the fundamentals. And on this in any other case fast-paced business, I see that as a significant optimistic.

Play is a strong trainer! How far are you able to push the boundaries whereas staying accessible and performant? These are expertise value practising that may equip you to decide on the proper instrument for the job in future initiatives. Even when the proper instrument is a framework, you should have a deeper understanding of how types you apply are working and enhance your capability to customise them.

Belief me – it feels good to say: “I can try this in CSS!”

For a rising listing of ideas, concepts, and inspiration, view the sources.

Subscribe to the publication for periodic updates associated to new types and launch of latest options. You may also choose up the RSS feed.

Assessment StyleStage.dev for expanded particulars, in addition to the supply HTML and CSS.

By taking part as a contributor, your work can be shared along with your supplied attribution so long as Fashion Stage is on-line, your stylesheet hyperlink and any asset hyperlinks stay legitimate, and all contributor tips are adhered to.

Assessment the steps to contribute >

All submissions can be minified, autoprefixed, and prepended with the CC BY-NC-SA license in addition to attribution utilizing the metadata you present. You could use any construct setup you like, however the remaining submission needs to be the compiled, unminified CSS. You keep the copyright to authentic graphics and should guarantee all graphics used are appropriately licensed. All asset hyperlinks, together with fonts, have to be absolute to exterior sources. Stylesheets can be saved into the Github repo, and detected adjustments that violate the rules are trigger for elimination.

Guarantee your design is responsive, and that it passes accessible distinction (we’ll be utilizing aXe to confirm). Animations needs to be eliminated by way of prefers-reduced-motion. Slicing-edge strategies ought to include a fallback if wanted to not severely impression the consumer expertise. No content material could also be completely hidden, and hidden gadgets should include an accessible viewing method. Web page load time shouldn’t exceed 3 seconds.

Assessment the total tips >

• darkish mode toggle – optionally decide right into a toggle to enhance the consumer expertise by permitting them to decide on which theme to show moderately than counting on prefers-color-scheme values alone
• fashion index preview photographs – to enhance the expertise of looking obtainable types

Huge due to Andy Bell (@hankchizljaw) for his further time reviewing the foundations of the venture, and being an early promotor! 💫

Thanks additionally to Miriam Suzanne (@MiriSuzanne) for some nice suggestions and concepts about the best way to evolve the venture 🚀

The venture description and tips had been made extra clear by solutions from Katie Langerman (@KatieLangerman) 🙌

And naturally the unique six contributors – thanks a lot for serving to carry this venture to life by spending time inside a brief deadline to create your superior stylesheets!

• The thought for Fashion Stage arose July 2, 2020 and the venture launched July 10, 2020.
• Constructed on my favourite static web site generator, 11ty starting from a starter I developed
• Hosted on Netlify
• The Major Stage theme receives a 100 lighthouse and PageSpeed rating, in addition to a velocity index of 0.502s 🙌

Listed here are the unique 6 contributors: