Design framework for concise and high-quality web development

Stylescape is a modular, scalable, and customizable design framework dedicated to streamlining style and layout design for both web and print media. Written in SCSS and TypeScript, it aimes to bridge the gap between visual design and code. Whether you’re a designer or developer, Stylescape provides a robust toolkit that empowers you to create harmonious, scalable, and accessible designs efficiently.

Quickstart

Installation

You can install Stylescape using npm:

npm i stylescape

Or directly import via unpkg:

<link
    rel="stylesheet"
    href="https://unpkg.com/stylescape@latest/css/stylescape.css"
/>

Getting Started

After installing, you can include Stylescape's SCSS and TypeScript files into your project:

import "stylescape/css/stylescape.css";
import "stylescape/js/stylescape.js";

Documentation

For detailed setup and usage instructions, refer to our official website: scape.style.

Project Family

StyleScape ships as a three-repo system:

| Repo | Role | | -------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | ssx | The specification — naming, layers, component blueprint, variants. The authoritative spec. | | stylescape | This repo — the SCSS implementation that emits .ss-c-*, .ss-u-*, .ss-a-*, etc. | | semiosys | A Django consumer that models the data side (components, modifiers, cascade layers). |

Spec authority is ssx; implementation authority is stylescape; consumer authority is semiosys. All three release in lockstep — see ROADMAP.md Phase F.

Contribution

Contributions are always welcome! See CONTRIBUTING.md for ways to get started.