Tuesday, July 23, 2024
HomeCSSSaying Model Stage: A Group CSS Showcase

Saying Model Stage: A Group CSS Showcase

Expensive CSS neighborhood:

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

Style Stage: A modern CSS showcase styled by community contributions

StyleStage.dev is not only 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!

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

Issues in CSS-land have improved so much since then, together with the out there properties, the instruments we now have out there to construct with, our higher understanding of addressing accessibility considerations, and elevated consciousness of efficiency impacts.

In the event you missed the launch dwell stream, here is the evenly edited full recorded Twitch broadcast, or by matter in the Twitch spotlight assortment. We lined a number 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 changing into one with the cascade.

Creating your Model Stage stylesheet will problem you to discover strategies like flexbox and grid to rearrange the web page, and pseudo components so as to add further content material and aptitude. Take the chance to design one thing loopy! Up to now, gradients and remodel: skew() are common with contributors ✨ Try the listing of different trendy options for inspiration of what you could wish to strive.

By prohibiting entry to the HTML (which is already semantic and accessible by itself), Model 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 constructive.

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

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

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

Subscribe to the e-newsletter for periodic updates associated to new kinds and launch of latest options. You can even decide up the RSS feed.

How Do I Contribute a Stylesheet?

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

By taking part as a contributor, your work will likely be shared together with your offered attribution so long as Model Stage is on-line, your stylesheet hyperlink and any asset hyperlinks stay legitimate, and all contributor pointers are adhered to.

Evaluation the steps to contribute >

All submissions will likely be minified, autoprefixed, and prepended with the CC BY-NC-SA license in addition to attribution utilizing the metadata you present. It’s possible you’ll use any construct setup you like, however the ultimate submission must be the compiled, unminified CSS. You keep the copyright to unique graphics and should guarantee all graphics used are appropriately licensed. All asset hyperlinks, together with fonts, should be absolute to exterior sources. Stylesheets will likely be saved into the Github repo, and detected adjustments that violate the rules are trigger for removing.

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

Evaluation the total pointers >

(Attainable) Future Options

  • darkish mode toggle – optionally decide right into a toggle to enhance the person expertise by permitting them to decide on which theme to show relatively than counting on prefers-color-scheme values alone
  • type index preview pictures – to enhance the expertise of searching out there kinds

Huge because of 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 tips on how to evolve the venture 🚀

The venture description and pointers had been made extra clear by options 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 Model 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 Primary Stage theme receives a 100 lighthouse and PageSpeed rating, in addition to a velocity index of 0.502s 🙌

Listed below are the unique 6 contributors:



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments