@howssatoshi/quantumcss 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/dist/quantum.min.css +1 -4006
- package/package.json +1 -1
- package/src/defaults.js +36 -9
- package/src/generator.js +10 -10
- package/src/starlight.js +37 -0
- package/src/styles/starlight.css +283 -13
package/README.md
CHANGED
|
@@ -55,6 +55,26 @@ Define your own components in `quantum.config.json`:
|
|
|
55
55
|
}
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
+
### High-Level Component Presets (AI-Optimized)
|
|
59
|
+
|
|
60
|
+
Starlight UI provides "Organism-level" presets that compose multiple utilities into functional semantic blocks. Perfect for rapid prototyping and AI generation.
|
|
61
|
+
|
|
62
|
+
- `starlight-nav` - Complete sticky glassmorphic navigation bar
|
|
63
|
+
- `starlight-search` - Search container with integrated icon and padding
|
|
64
|
+
- `starlight-dashboard` - Responsive 3-column dashboard grid
|
|
65
|
+
- `starlight-gallery` - Optimized grid for image/media galleries
|
|
66
|
+
- `starlight-form` - Multi-column layout for advanced form controls
|
|
67
|
+
- `starlight-dialog` - Centered, animated glassmorphic modal
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<!-- Example: Create a full dashboard grid with one class -->
|
|
71
|
+
<div class="starlight-dashboard">
|
|
72
|
+
<div class="starlight-card">...</div>
|
|
73
|
+
<div class="starlight-card">...</div>
|
|
74
|
+
<div class="starlight-card">...</div>
|
|
75
|
+
</div>
|
|
76
|
+
```
|
|
77
|
+
|
|
58
78
|
## ✨ Cosmic Animations
|
|
59
79
|
|
|
60
80
|
Bring your UI to life with space-inspired effects:
|