• Stars
    star
    2,077
  • Rank 21,490 (Top 0.5 %)
  • Language
    CSS
  • Created almost 4 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A modern CSS showcase styled by community contributions. Add your stylesheet!

Style Stage

Style Stage

A modern CSS showcase styled by community contributions

Created by Stephanie Eckles (@5t3ph)

Visit Style Stage to view the available styles, and learn more about this project!

View the index of stylesheets available in this repo.

Contribute a Stylesheet

There are 4 ready-to-go options to get started:

Then, create your own version of the stylesheet, being sure to adhere to the guidelines. Use the starters listed above, or begin from a blank file! Keep in mind you may not modify the HTML, including adding classes.

You may use any build setup you prefer, but the final submission should be the compiled CSS unminified. Style Stage processing will autoprefix your styles and prepend the stylesheet with the CC BY-NC-SA license as well as attribution using the metadata you provide.

To submit your stylesheet, create pull request containing a unique .json file added to src/_data/styles/ following the schema below.

{
  // Required
  "title": "Main Stage Test",
  "author": "Stephanie Eckles",
  "stylesheet": "https://moderncss.dev/css/style.css",
  // Optional
  "twitter": "5t3ph",
  "websiteTitle": "ModernCSS.dev",
  "websiteUrl": "https://moderncss.dev"
}

Feedback welcome!

You can file it as an issue.

Buy me a coffee

More Repositories

1

smolcss

Minimal snippets for modern CSS layouts and components
Nunjucks
755
star
2

SupportsCSS

Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and allows custom tests.
JavaScript
259
star
3

11ty-sass-skeleton

Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty.
Nunjucks
239
star
4

11ty-netlify-jumpstart

Quickly launch an 11ty-generated static site. Includes a minimal Sass framework, generated sitemap, and RSS feed.
SCSS
232
star
5

a11y-color-tokens

Generate accessible UI colors from your base color tokens.
JavaScript
158
star
6

moderncss-dot-dev

Posts from the series "Modern CSS Solutions to Old CSS Problems"
Nunjucks
133
star
7

htmlrecipes

A collection of quick copy HTML snippets for a variety of common scenarios.
Nunjucks
126
star
8

html-sass-jumpstart

Minimal Sass/HTML Template Site - dart sass powered, includes stylelint and prettier, and autoprefix upon build. develop script includes hot-reload via browsersync.
HTML
87
star
9

smol-11ty-starter

Extremely minimal Eleventy starter to kickstart a simple multi-page site / a nearly opinionless foundation to continue building on.
CSS
77
star
10

css-browser-support

Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.
JavaScript
67
star
11

11ty-email-generator

Generate simple, responsive email templates, with inlined CSS on build using 11ty.
HTML
63
star
12

eleventy-rss-reader

Create a personal RSS Reader using Eleventy. Review recordings to learn how it was built!
SCSS
63
star
13

buttonbuddy

Learn about accessible button contrast then generate your own accessible button color palette
SCSS
63
star
14

11ty-web-component-generator

Use the power of 11ty to generate web components (custom elements).
HTML
55
star
15

eleventy-plugin-template

A starter environment for creating plugins for Eleventy (11ty).
JavaScript
50
star
16

eleventy-plugin-social-images

Create dynamic images sized for social media tags for your Eleventy content.
JavaScript
45
star
17

11ty-twitch-scenes

A slim 11ty + Sass setup to get started creating custom Twitch scenes, including responding to chat commands with ComfyJS.
SCSS
40
star
18

eleventy-plugin-lightningcss

Process CSS in Eleventy (11ty) with LightningCSS to minify, prefix, and add future CSS support.
JavaScript
31
star
19

nojson

It's a move considered revolutionary by many...
HTML
31
star
20

stylestage-sass

A starter for Style Stage submissions with the source Sass from the base theme + BrowserSync.
SCSS
30
star
21

eleventy-plugin-sass-lightningcss

Compile Sass in Eleventy (11ty) and process it with LightningCSS to minify, prefix, and add future CSS support.
JavaScript
29
star
22

11ty-serverless-search

An example of using 11ty Serverless to. create site search using local and external data sources.
JavaScript
28
star
23

odb-generative-svg

A demonstration of returning a generative art SVG via Netlify On-Demand Builders
HTML
27
star
24

11ty-rocks

A collection of Eleventy (11ty) starters, projects, plugins, and resources created by Stephanie Eckles (@5t3ph)
SCSS
26
star
25

gravity-forms-snippets

Applies bootstrap classes to various fields.
PHP
23
star
26

objectfit-focalpoint

Generate the object-position value to capture an image's focal point given a custom aspect-ratio.
JavaScript
20
star
27

11ty-membership-site

An Eleventy theme for offering premium content to members. Requires Supabase and Netlify accounts.
SCSS
19
star
28

11ty-design-system-example

SCSS
19
star
29

howtowebdev

The source files repository for the video series for beginners to web development - "Learn How to Make a Website with Steph" - available on YouTube: https://www.youtube.com/channel/UC8qc2AyBbNmvgIky6236nHA
HTML
18
star
30

course-accessible-cross-browser-forms

Source code for the egghead course "Accessible Cross-Browser CSS Form Styling". Visit the link to take the course!
HTML
16
star
31

eleventy-plugin-collection-schemas

Enforce a typed frontmatter schema for templates within an Eleventy collection.
JavaScript
16
star
32

eleventy-plugin-emoji-readtime

Eleventy (11ty) plugin that provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator.
JavaScript
15
star
33

lwj-modern-css

Developed for Learn With Jason - a dashboard to showcase lots of modern CSS features!
SCSS
13
star
34

11ty-basics

A barebones demo of basic but essential 11ty features.
HTML
13
star
35

11ty-css-houdini

An Eleventy environment for creating CSS Houdini Paint worklets.
JavaScript
12
star
36

repos-wrapped

A yearly review of your public GitHub repository stats.
JavaScript
11
star
37

course-grid-flexbox-landing-page

CSS
11
star
38

11ty-egghead-collection

HTML
10
star
39

a11y-fails

Find the fails, submit a PR with fixes. See link for live demo.
CSS
10
star
40

howtowebdev-starter

Starter files for the video course "Learn How to Make a Website with Steph"
JavaScript
9
star
41

eleventy-plugin-css-browser-support

Eleventy filters for decorating inline-code with CSS broswer support data or rendering support tables. Data combined from caniuse and MDN, including version support started and global support percentages.
JavaScript
9
star
42

eleventy-plugin-objectfit-focalpoint

JavaScript
7
star
43

devto-netlify-starter

Template HTML/Sass site that retrieves DEV posts with a Netlify function. Uses node-sass and includes Browsersync for hot reloading. Build styles are minified and autoprefixed.
CSS
7
star
44

eleventy-plugin-open-in-codepen

An Eleventy shortcode to add "Open in CodePen" functionality for code demos.
JavaScript
7
star
45

twitch-scenes-gamified

An Eleventy-based Twitch scenes starter with a chat-controlled game! Includes ComfyJS with command responses, and 6 scenes including guest support.
SCSS
7
star
46

11ty-edge-demo

Tiny demo with starter concepts for 11ty Edge.
JavaScript
5
star
47

11ty-serverless-esbuild-test

JavaScript
4
star
48

tdbc

Stephanie Eckles' main site, built with Eleventy.
Nunjucks
4
star
49

pollmychat

A browser source Twitch poll widget created on-demand via the !poll chat command.
JavaScript
3
star
50

howtowebdev-capstone

HTML
3
star
51

meow-vs-bowwow

An Eleventy starter as built for the following CSS-Tricks tutorial: https://css-tricks.com/a-community-driven-site-with-eleventy-building-the-site/
HTML
3
star
52

egghead-twitch-scenes

Learn how to setup Twitch scenes built with Eleventy in 30 minutes! Includes embedded chat, and chat command responses.
CSS
3
star
53

course-structure

A template to manage lessons for a related course using yarn workspaces.
HTML
3
star
54

css-webring

A simple web component that retrieves a selection of CSS blog links with customization available via CSS variables.
JavaScript
3
star
55

cursed-horse

Features built on-stream for Frontend Horse
SCSS
2
star
56

houdini-decorative-barcharts

JavaScript
2
star
57

hydrate-me

Get hydrated by running this solo or appending to a watch type of command for reminders at your chosen minute interval.
JavaScript
2
star
58

11ty-demo-theme

Building live on Twitch! https://twitch.tv/5t3phDev
SCSS
1
star
59

popular-named-css-colors

A compilation of replies to a silly tweet asking about named CSS colors.
Nunjucks
1
star