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

• ✅ 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.

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

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">

Combine, purge, and minify CSS:

npm run build:css

CSS ↔ Tokens:

npm run css2tokens
npm run tokens2css

Automatically rebuild and convert files on changes:

npm run watch

Check and fix CSS styles:

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

Simple usage – skip the installation steps and just include the ready-to-use combined CSS file with a CDN link to you own site:

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

Example:

<link rel="stylesheet" href="https://rawcdn.githack.com/pattespatte/vanilla-css-design-system/refs/tags/v1.0.2/styles/vanilla-combined.min.css">

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

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

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

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

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

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