@howssatoshi/quantumcss 1.10.1 → 1.11.0
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 +11 -10
- package/dist/quantum.min.css +2 -2
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +130 -288
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +11 -27
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/index.html +342 -232
- package/examples/kitchen-sink.html +284 -94
- package/examples/music-streaming.html +32 -91
- package/examples/{news-template.html → news.html} +35 -11
- package/examples/{portfolio-resume.html → portfolio.html} +56 -26
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +7 -6
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +303 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +18 -16
- package/src/starlight.js +20 -15
- package/src/styles/quantum-base.css +4 -0
- package/src/styles/quantum-components.css +1879 -134
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2606 -1186
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -288
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -471
- package/examples/gradient-test.html +0 -129
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -525
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -432
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
- /package/examples/{shopping/nova-shop.css → nova-shop.css} +0 -0
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Quantum CSS - Next-Generation Utility Framework
|
|
2
2
|
|
|
3
|
-

|
|
4
4
|

|
|
5
|
-
-brightgreen)
|
|
6
6
|
|
|
7
7
|
A modern, performance-optimized utility-first CSS framework with semantic naming, recursive component presets, and advanced cosmic effects.
|
|
8
8
|
|
|
@@ -21,7 +21,7 @@ A modern, performance-optimized utility-first CSS framework with semantic naming
|
|
|
21
21
|
- **Unified Naming Standard** - Consistent `--q-` prefix for all CSS variables (e.g., `--q-color-primary`).
|
|
22
22
|
- **Attribute-Driven Styling** - No more monolithic class strings! Use dedicated attributes for environment and interactivity.
|
|
23
23
|
- **Zero-Escape CSS** - 100% clean CSS output without risky backslash escapes.
|
|
24
|
-
- **TypeScript
|
|
24
|
+
- **TypeScript-Ready** - Developed with TypeScript for internal type safety
|
|
25
25
|
- **Zero Configuration** - Works out of the box
|
|
26
26
|
|
|
27
27
|
## 🎨 Advanced Utilities
|
|
@@ -62,6 +62,7 @@ QuantumCSS includes a powerful CLI for project orchestration:
|
|
|
62
62
|
- **`npx quantumcss build [output]`** - Generate the JIT CSS bundle (default: `dist/quantum.css`).
|
|
63
63
|
- **`npx quantumcss watch [output]`** - Automatically rebuild when your HTML or config changes.
|
|
64
64
|
- **`npx quantumcss scaffold <type>`** - Generate a starter template (`gaming`, `blog`, `travel`, etc.).
|
|
65
|
+
- **`npx quantumcss manifest [output]`** - Generate an AI-optimized design system manifest.
|
|
65
66
|
|
|
66
67
|
## ⚙️ Configuration
|
|
67
68
|
|
|
@@ -97,15 +98,15 @@ QuantumCSS separates structural logic from aesthetic themes for maximum reusabil
|
|
|
97
98
|
Starlight UI provides "Organism-level" presets that compose multiple utilities into functional semantic blocks. Perfect for rapid prototyping and AI generation.
|
|
98
99
|
|
|
99
100
|
- `starlight-nav` - Complete sticky glassmorphic navigation bar
|
|
100
|
-
- `
|
|
101
|
-
- `
|
|
102
|
-
- `
|
|
103
|
-
- `
|
|
104
|
-
- `
|
|
101
|
+
- `search` - Search container with integrated icon and padding
|
|
102
|
+
- `dashboard` - Responsive 3-column dashboard grid
|
|
103
|
+
- `gallery` - Optimized grid for image/media galleries
|
|
104
|
+
- `form` - Multi-column layout for advanced form controls
|
|
105
|
+
- `dialog` - Centered, animated glassmorphic modal
|
|
105
106
|
|
|
106
107
|
```html
|
|
107
108
|
<!-- Example: Create a full dashboard grid with one class -->
|
|
108
|
-
<div class="
|
|
109
|
+
<div class="dashboard">
|
|
109
110
|
<div class="starlight-card">...</div>
|
|
110
111
|
<div class="starlight-card">...</div>
|
|
111
112
|
<div class="starlight-card">...</div>
|
|
@@ -141,7 +142,7 @@ QuantumCSS automatically optimizes contrast for accessibility when the user enab
|
|
|
141
142
|
- **Motion Sensitivity**: Automatically scales down or disables complex animations when `prefers-reduced-motion` is detected.
|
|
142
143
|
|
|
143
144
|
### Optimized Payload
|
|
144
|
-
- **Gzipped Bundle**: ~
|
|
145
|
+
- **Gzipped Bundle**: ~29 KB (Full library + JIT utilities)
|
|
145
146
|
- **Zero Runtime**: No heavy JavaScript required for layout or styling.
|
|
146
147
|
- **JIT Tree-Shaking**: Only the utilities you actually use are included in your final production build.
|
|
147
148
|
|