https://github.com/stylescape/example-npm

Stylescape Example | NPM
https://github.com/stylescape/example-npm

npm stylescape

Last synced: about 1 month ago
JSON representation

Stylescape Example | NPM

• Host: GitHub
• URL: https://github.com/stylescape/example-npm
• Owner: stylescape
• License: mit
• Created: 2024-08-16T06:45:13.000Z (almost 2 years ago)
• Default Branch: dev
• Last Pushed: 2026-05-24T06:09:41.000Z (about 2 months ago)
• Last Synced: 2026-05-24T08:10:10.831Z (about 2 months ago)
• Topics: npm, stylescape
• Language: HTML
• Homepage: https://scape.style
• Size: 860 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.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
  • Codemeta: codemeta.json

Awesome Lists containing this project

README

          


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

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

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





    



Stylescape + NPM

Example Project


[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/stylescape/example-npm)

---

This example demonstrates how to use [Stylescape](https://scape.style) with npm and Sass compilation.

## Features

- **Sass Compilation**: Import Stylescape's source Sass files for customization

- **Auto-initialization**: Components with `data-ss` attributes initialize automatically

- **Live Reload**: Development server with automatic CSS recompilation

## Installation

```sh

git clone https://github.com/stylescape/example-npm.git

cd example-npm

npm install

```

## Usage

### Development

Start the development server with live reload:

```sh

npm start

```

This runs the server at `http://localhost:3000` and watches for Sass changes.

### Build

Compile Sass to CSS:

```sh

npm run build

```

## Project Structure

```

├── src/

│   ├── index.html      # Main HTML file

│   ├── js/

│   │   └── main.js     # JavaScript entry point

│   └── scss/

│       └── main.scss   # Sass entry point (imports Stylescape)

├── css/                # Compiled CSS output

└── package.json

```

## Stylescape Components

Use `data-ss` attributes for auto-initialization:

```html

...

...


...

```

---

## Colophon

Made with ❤️ by **[Scape Agency](https://www.scape.agency)**

### Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes.

### License

This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for details.

---