Quantum CSS - Next-Generation Utility Framework

!Quantum CSS
!License
!Bundle Size

A modern, performance-optimized utility-first CSS framework with semantic naming, recursive component presets, and advanced cosmic effects.

🚀 Features

$3

- Robust Theme Engine - Seamlessly follow OS settings with automatic prefers-color-scheme detection and dynamic live-switching.
- Recursive Component Presets - Define custom components in config using existing utilities.
- Cosmic Animation Library - Advanced effects like parallax nebula drifts and orbit paths.
- High Contrast Mode - Native support for prefers-contrast and forced-colors.
- JIT Dark Mode - Dynamic generation of dark mode variants via dark: prefix.

$3

- Advanced CLI Scaffolding - Instantly generate pre-styled templates (Gaming, Blog, News, Shopping, Travel)
- Dynamic Documentation - Generate a "Kitchen Sink" overview of your unique design tokens
- TypeScript Support - Full type definitions
- Zero Configuration - Works out of the box

📦 Installation

``bash
npm install @howssatoshi/quantumcss
`

🎯 Quick Start

$3


Quickly jumpstart your project with a premium template:
`bash
npx @howssatoshi/quantumcss scaffold gaming index.html
`
Available templates: gaming, blog, news, shopping, travel, starlight

$3


`html

Launch Experience

`

⚙️ Configuration

$3

Define your own components in quantum.config.json:
`json
{
"componentPresets": {
"btn-action": "btn-starlight px-8 py-3 rounded-xl hover:scale-105 transition",
"card-glass": "glass p-6 rounded-2xl border border-white/10 dark:bg-white/5"
}
}
`

$3

Starlight UI provides "Organism-level" presets that compose multiple utilities into functional semantic blocks. Perfect for rapid prototyping and AI generation.

- starlight-nav - Complete sticky glassmorphic navigation bar
- starlight-search - Search container with integrated icon and padding
- starlight-dashboard - Responsive 3-column dashboard grid
- starlight-gallery - Optimized grid for image/media galleries
- starlight-form - Multi-column layout for advanced form controls
- starlight-dialog - Centered, animated glassmorphic modal

`html




`

✨ Cosmic Animations

Bring your UI to life with space-inspired effects:
- .ani-nebula - Ethereal drifting gradient backgrounds
- .ani-float - Floating vertical motion
- .ani-twinkle - Sparkling star effects
- .ani-orbit - Circular orbital paths
- .ani-svg-draw - Progressive path drawing for icons

🛠️ Build Tools

$3


Generate a live dashboard of your theme:
`bash
npm run docs
`
This creates examples/kitchen-sink.html` with all your colors, spacing, presets, and animations.

$3

QuantumCSS automatically optimizes contrast for accessibility when the user enables high contrast mode in their OS.

📊 Performance

$3

- QuantumCSS Core: ~19KB gzipped
- Optimized Selectors: Minimal specificity for maximum performance
- Tree Shaking: Only used utilities and presets are generated in JIT mode

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE file for details.