Stylescape + NPM

Example Project

---

This example demonstrates how to use Stylescape 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

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

Usage

Development

Start the development server with live reload:

npm start

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

Build

Compile Sass to CSS:

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:

<!-- Sidebar --><asidedata-ss="aside">...</aside><!-- Accordion --><divdata-ss="accordion">...</div><!-- Theme Toggle --><buttondata-ss="theme-toggle">...</button>

---

Colophon

Made with ❤️ by 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 file for details.

---