🎨 Vanilla CSS Design System

A lightweight, modular, and highly customizable design system built with vanilla CSS. Perfect for creating consistent and responsive web applications.

---

🌟 Features

• ✅ Lightweight: No unnecessary dependencies, just pure CSS.
• 📦 Modular: Easily include only what you need.
• 🎨 Customizable: Designed with CSS variables for easy theming.
• 📐 Responsive: Built with mobile-first principles.
• ✨ Accessible: Follows accessibility standards and best practices.

---

📚 Documentation

Explore the full documentation and examples here: ➡️ Design System Documentation

---

🚀 Quick Start

1. Clone the repository:

   git clone https://github.com/pattespatte/vanilla-css-design-system.git
   

2. Install dependencies (optional):

   npm install
   

3. Include the generated CSS in your project:

   <link rel="stylesheet" href="styles/vanilla-combined.min.css">
   

Build CSS

Combine, purge, and minify CSS:

npm run build:css

Convert Between Formats

CSS ↔ Tokens:

npm run css2tokens
npm run tokens2css

Watch for Changes

Automatically rebuild and convert files on changes:

npm run watch

Lint CSS

Check and fix CSS styles:

npm run lint:css
npm run lint:css:fix

Scripts Overview

Script	Description
build:css	Combine, purge, and minify CSS.
css2tokens	Convert CSS to design tokens.
tokens2css	Convert design tokens to CSS.
watch	Watch for changes and rebuild/convert files.
lint:css	Lint CSS files.
lint:css:fix	Lint and fix CSS files.

CDN Link

https://rawcdn.githack.com/pattespatte/vanilla-css-design-system/refs/tags/v1.0.2/styles/vanilla-combined.min.css

---

📂 Folder Structure

vanilla-css-design-system/
├── styles/             # CSS files (variables, components, utilities, etc.)
├── scripts/            # Helper scripts for combining, purging, and converting CSS
├── examples/           # Demo examples showcasing the design system
├── tokens/             # Design tokens for easy customization
├── README.md           # Project documentation
└── package.json        # Project dependencies and scripts

---

🛠️ Tools & Technologies

• CSS: Vanilla CSS with a modular architecture.
• Stylelint: Linting for consistent coding standards.
• PurgeCSS: Removes unused CSS for optimized builds.
• CleanCSS: Minifies the CSS for production.
• Nodemon: Watches for changes and automates tasks.

---

👀 Examples

Check out examples showcasing the design system in action: ➡️ View Examples

---

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

📬 Contact & Contributions

• 👤 Author: pattespatte
• 💬 Feedback: Found an issue or have a suggestion? Open an issue or submit a pull request.
• ➡️ Contribute

---

❤️ Support

If you find this project helpful, please consider giving it a ⭐ on GitHub!