https://github.com/stylescape/stylescape

Stylescape Design Framework
https://github.com/stylescape/stylescape

css css-framework css3 design design-framework design-system framework graphic-language html html5 javascript sass scss scss-framework style stylescape typescipt typescript

Last synced: 16 days ago
JSON representation

Stylescape Design Framework

• Host: GitHub
• URL: https://github.com/stylescape/stylescape
• Owner: stylescape
• License: mit
• Created: 2023-01-13T17:24:18.000Z (about 3 years ago)
• Default Branch: dev
• Last Pushed: 2025-06-07T12:14:35.000Z (8 months ago)
• Last Synced: 2025-06-07T13:24:13.722Z (8 months ago)
• Topics: css, css-framework, css3, design, design-framework, design-system, framework, graphic-language, html, html5, javascript, sass, scss, scss-framework, style, stylescape, typescipt, typescript
• Language: HTML
• Homepage: https://scape.style
• Size: 62.5 MB
• Stars: 0
• Watchers: 2
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Citation: CITATION.cff
  • Codeowners: .github/CODEOWNERS
  • Security: .github/SECURITY.md
  • Authors: AUTHORS

Awesome Lists containing this project

README

          


    



stylescape

design framework







[![Website](https://img.shields.io/website?url=https%3A%2F%2Fwww.scape.style&up_message=Up&up_color=%23000000&down_message=Down&down_color=%23000000&style=flat-square&logo=Firefox&logoColor=FFFFFF&label=Website&labelColor=%23000000&color=%23000000) ](https://www.scape.style)

[![NPM Version](https://img.shields.io/npm/v/stylescape?style=flat-square&logo=npm&logoColor=FFFFFF&label=NPM&labelColor=%23000000&color=%23000000&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fstylescape)](https://www.npmjs.com/package/stylescape)

[![devContainer](https://img.shields.io/badge/devContainer-23354351?style=flat-square&logo=Docker&logoColor=%23FFFFFF&labelColor=%23000000&color=%23000000)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/stylescape)

[![StackBlitz](https://img.shields.io/badge/StackBlitz-23354351?style=flat-square&logo=StackBlitz&logoColor=%23FFFFFF&labelColor=%23000000&color=%23000000)](https://stackblitz.com/github/stylescape/stylescape/tree/main?file=src%2Findex.html)

[![GitHub License](https://img.shields.io/github/license/stylescape/stylescape?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23000000&color=%23000000&link=LICENSE)](https://github.com/stylescape/stylescape/blob/main/LICENSE)





[![Report a Bug](https://img.shields.io/badge/Report%20a%20Bug-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=bug_report.yml)

[![Request a Feature](https://img.shields.io/badge/Request%20a%20Feature-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=feature_request.yml)

[![Ask a Question](https://img.shields.io/badge/Ask%20a%20Question-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=question.yml)

[![Make a Suggestion](https://img.shields.io/badge/Make%20a%20Suggestion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=suggestion.yml)

[![Start a Discussion](https://img.shields.io/badge/Start%20a%20Discussion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23D2D9DF)](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=discussion.yml)



---




## 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:

```bash

npm i stylescape

```

> Or directly import via unpkg:

```html

```

### Getting Started

> After installing, you can include Stylescape's SCSS and TypeScript files into

> your project:

```javascript

import "stylescape/css/stylescape.css";

import "stylescape/js/stylescape.js";

```

---

## Documentation

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

[scape.style](https://scape.style).

---

## Contribution

Contributions are always welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for

ways to get started.

---



    Made with ❤️ by Scape Agency