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 -->
<aside data-ss="aside">...</aside>

<!-- Accordion -->
<div data-ss="accordion">...</div>

<!-- Theme Toggle -->
<button data-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.

---