Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-25T07:53:06.000Z (8 days ago)
- Last Synced: 2024-09-26T01:38:24.404Z (8 days 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: SCSS
- Homepage: https://scape.style
- Size: 37.2 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
[
](https://www.scape.style)
[](https://www.npmjs.com/package/stylescape)
[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/stylescape)
[](https://stackblitz.com/github/stylescape/stylescape/tree/main?file=src%2Findex.html)
[](https://github.com/stylescape/stylescape/blob/main/LICENSE)
[](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=bug_report.yml)
[](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=feature_request.yml)
[](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=question.yml)
[](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=suggestion.yml)
[](https://github.com/stylescape/stylescape/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=discussion.yml)
---
## A powerful 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.
---
## Features
- **Visual Consistency**: A unified design language across all components for brand integrity.
- **Modular Architecture**: Import only what you need for lighter, faster websites.
- **Client Alignment**: Transform initial stylescapes into functional code easily.
- **Streamlined Workflow**: In-built responsiveness, themes, and accessibility features.
- **Scalable & Maintainable**: Built with SCSS and TypeScript for robustness and ease of use.
---
``` mermaid
graph TD
%% Styles for the diagram
classDef main fill:#041B26,stroke:#FFFFFF,stroke-width:2px,color:#FFFFFF,font-size:16px,font-weight:bold;
classDef module fill:#1e3d59,stroke:#FFFFFF,stroke-width:1px,color:#FFFFFF,font-size:14px,font-weight:normal;
classDef focus fill:#028090,stroke:#FFFFFF,stroke-width:1px,color:#FFFFFF,font-size:12px,font-style:italic;
%% Main node
A[Stylescape]:::main
%% Modules
A --> B[unit.gl]:::module
A --> C[hue.gl]:::module
A --> D[icon.gl]:::module
A --> E[font.gl]:::module
A --> F[move.gl]:::module
A --> G[page.gl]:::module
A --> H[pack.gl]:::module
%% Descriptions and focus areas for each module
B --> B1[Dynamic Layout Engine]:::focus
B1 --> B2[Fluid Typography]:::focus
B1 --> B3[Responsive Design]:::focus
C --> C1[Perceptual Color System]:::focus
C1 --> C2[Color Management Toolkit]:::focus
D --> D1[Modular Icon Library]:::focus
D1 --> D2[Various Integration Options]:::focus
E --> E1[Variable Font Collection]:::focus
E1 --> E2[Typography Base]:::focus
F --> F1[User Experience Toolkit]:::focus
F1 --> F2[Interactives and Immersives]:::focus
G --> G1[Page Layout Library]:::focus
G1 --> G2[Rapid Prototyping]:::focus
H --> H1[Package Pipeline Manager]:::focus
H1 --> H2[Asset and Code Bundling]:::focus
H1 --> H3[Streamlined Deployment]:::focus
```
---
## Quickstart
### Installation
You can install Stylescape using npm:
```bash
npm install stylescape
```
Or via unpkg:
```html
```
### Getting Started
After installing, you can include Stylescape's SCSS and TypeScript files into your project:
```javascript
import 'stylescape/dist/stylescape.css';
import 'stylescape/dist/stylescape.js';
```
---
## Documentation
For more 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