Advanced utility-first CSS framework with JIT generation and modern components
npm install @howssatoshi/quantumcss!Quantum CSS
!License
!Bundle Size
A modern, performance-optimized utility-first CSS framework with semantic naming, recursive component presets, and advanced cosmic effects.
prefers-color-scheme detection and dynamic live-switching.prefers-contrast and forced-colors.dark: prefix.``bash`
npm install @howssatoshi/quantumcss
bash
npx @howssatoshi/quantumcss scaffold gaming index.html
`
Available templates: gaming, blog, news, shopping, travel, starlight$3
`html
`⚙️ 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.We welcome contributions! Please see our Contributing Guide for details.
MIT License - see LICENSE file for details.