Stylestage

screenshot of Stylestage
eleventy
scss

Stylestage

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

Overview

Style Stage is a modern CSS showcase that is styled by community contributions. It was created by Stephanie Eckles (@5t3ph). Users can visit Style Stage to view the available styles and learn more about the project. The index of stylesheets available in the repository can also be accessed. Users are also encouraged to contribute their own stylesheet by following the guidelines provided.

Features

  • CSS Showcase: Style Stage serves as a showcase for modern CSS styles.
  • Community Contributions: The styles in Style Stage are created by the community, allowing users to contribute their own styles.
  • Multiple Options: Users have four ready-to-go options to get started with creating their own styles, including downloading source files, using the Sass template, forking the full source CodePen, or starting with the Style Stage Skeleton Starter CodePen.
  • Guidelines: Users are provided with guidelines on creating their own version of the stylesheet, including restrictions on modifying the HTML.
  • Build Setup: Users can use any build setup they prefer, but the final submission should be the compiled CSS unminified.
  • Autoprefixing and Attribution: Style Stage processing automatically autoprefixes the styles and includes the CC BY-NC-SA license and attribution using the metadata provided by the user.

Installation

To install Style Stage, follow the steps below:

  1. Visit the Style Stage website to view the available styles and learn more about the project.
  2. To contribute your own stylesheet:
    • Download the source files from the files section.
    • Get the Sass template for the original Main Stage, which includes BrowerSync for hot-reload as you create your styles.
    • Fork the full source CodePen to jump right in.
    • Alternatively, use the Style Stage Skeleton Starter CodePen for a minimal boost.
  3. Create your own version of the stylesheet following the guidelines provided. You may not modify the HTML, including adding classes.
  4. Use any build setup you prefer, but make sure the final submission is the compiled CSS unminified.
  5. Submit your stylesheet by creating a pull request containing a unique .json file added to src/_data/styles/ following the specified schema.

Summary

Style Stage is a modern CSS showcase that allows users to contribute their own styles. It provides multiple options for getting started and includes guidelines for creating stylesheets. The project also offers autoprefixing and includes the necessary license and attribution in the stylesheet. Users can contribute their styles by creating a pull request with the required .json file. Feedback on the project is also welcome.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.