fluxgrid-css 1.0.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 +347 -0
- package/package.json +21 -0
- package/src/assets/fonts/Neco-Variable.woff2 +0 -0
- package/src/css/animation.css +392 -0
- package/src/css/colors.css +329 -0
- package/src/css/display.css +413 -0
- package/src/css/effects.css +726 -0
- package/src/css/forms.css +411 -0
- package/src/css/grid.css +723 -0
- package/src/css/index.css +13 -0
- package/src/css/print.css +106 -0
- package/src/css/reset.css +99 -0
- package/src/css/scroll.css +188 -0
- package/src/css/sizing.css +352 -0
- package/src/css/spacing.css +530 -0
- package/src/css/tokens.css +180 -0
- package/src/css/typography.css +310 -0
- package/src/js/headfoot.js +13 -0
package/README.md
ADDED
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
# @vimalkrml/dev-template
|
|
2
|
+
|
|
3
|
+
A utility-first CSS framework that works without any build step, config, or CLI. Drop one `<link>` tag and start building — with dark mode, animations, form components, and a full design token system built right in.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@vimalkrml/dev-template)
|
|
6
|
+
[](https://www.npmjs.com/package/@vimalkrml/dev-template)
|
|
7
|
+
[](https://github.com/vimalkrml/Dev-Template/blob/main/LICENSE)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## ⚡ Why This Package?
|
|
12
|
+
|
|
13
|
+
| Feature | Tailwind | Bootstrap | **@vimalkrml/dev-template** |
|
|
14
|
+
| --------------------------- | ---------------- | ---------- | --------------------------- |
|
|
15
|
+
| Zero build step | ❌ Requires CLI | ✅ | ✅ |
|
|
16
|
+
| CDN ready | ⚠️ Partial | ✅ | ✅ |
|
|
17
|
+
| Dark mode built-in | ⚠️ Config needed | ❌ | ✅ |
|
|
18
|
+
| CSS Variable theming | ❌ | ❌ | ✅ |
|
|
19
|
+
| Form components included | ❌ Plugin needed | ✅ | ✅ |
|
|
20
|
+
| Animation library | ❌ | ❌ | ✅ |
|
|
21
|
+
| Modular file imports | ❌ | ❌ | ✅ |
|
|
22
|
+
| Conflict-free prefix (`c-`) | ❌ | ❌ | ✅ |
|
|
23
|
+
| Reduced motion support | ❌ | ❌ | ✅ |
|
|
24
|
+
| Print utilities | ❌ | ⚠️ Partial | ✅ |
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## 🚀 Features
|
|
29
|
+
|
|
30
|
+
- ✅ **Zero build step** — no CLI, no config, no purge, no PostCSS
|
|
31
|
+
- ✅ **Dark mode built-in** — via `data-theme="dark"` or `prefers-color-scheme`
|
|
32
|
+
- ✅ **CSS Variables theming** — override any token with one line of CSS
|
|
33
|
+
- ✅ **Modular imports** — use the full bundle or import only what you need
|
|
34
|
+
- ✅ **Full CSS reset** — consistent cross-browser baseline
|
|
35
|
+
- ✅ **Flexbox + CSS Grid** — 12-column responsive grid with `sm/md/lg/xl/2xl` breakpoints
|
|
36
|
+
- ✅ **Spacing system** — complete `margin` and `padding` scale
|
|
37
|
+
- ✅ **Typography utilities** — font size, weight, line height, tracking, transform
|
|
38
|
+
- ✅ **Color system** — full palette for text, background, border with semantic tokens
|
|
39
|
+
- ✅ **Effects** — shadows, borders, opacity, transforms, filters, backdrop-blur
|
|
40
|
+
- ✅ **16 animations** — fade, slide, scale, spin, pulse, skeleton loader, float, and more
|
|
41
|
+
- ✅ **Form components** — inputs, textarea, select, checkbox, radio, buttons (no JS)
|
|
42
|
+
- ✅ **Scroll & snap** — scroll behavior, snap, custom scrollbar, touch-action
|
|
43
|
+
- ✅ **Print utilities** — show/hide, page breaks, print-only elements
|
|
44
|
+
- ✅ **Conflict-free** — `c-` prefix never clashes with existing CSS
|
|
45
|
+
- ✅ **Reduced motion** — animations auto-disabled for accessibility
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 📦 Installation
|
|
50
|
+
|
|
51
|
+
### via npm
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npm install @vimalkrml/dev-template
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### via CDN (jsDelivr) — no install needed
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<!-- Full bundle -->
|
|
61
|
+
<link
|
|
62
|
+
rel="stylesheet"
|
|
63
|
+
href="https://cdn.jsdelivr.net/npm/@vimalkrml/dev-template/src/index.css"
|
|
64
|
+
/>
|
|
65
|
+
|
|
66
|
+
<!-- Or individual modules -->
|
|
67
|
+
<link
|
|
68
|
+
rel="stylesheet"
|
|
69
|
+
href="https://cdn.jsdelivr.net/npm/@vimalkrml/dev-template/src/tokens.css"
|
|
70
|
+
/>
|
|
71
|
+
<link
|
|
72
|
+
rel="stylesheet"
|
|
73
|
+
href="https://cdn.jsdelivr.net/npm/@vimalkrml/dev-template/src/grid.css"
|
|
74
|
+
/>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### via Clone
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
git clone https://github.com/vimalkrml/Dev-Template.git
|
|
81
|
+
cd Dev-Template
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## 🛠️ Usage
|
|
87
|
+
|
|
88
|
+
### In HTML
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!DOCTYPE html>
|
|
92
|
+
<html lang="en">
|
|
93
|
+
<head>
|
|
94
|
+
<meta charset="UTF-8" />
|
|
95
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
96
|
+
<title>My Project</title>
|
|
97
|
+
<link
|
|
98
|
+
rel="stylesheet"
|
|
99
|
+
href="node_modules/@vimalkrml/dev-template/src/index.css"
|
|
100
|
+
/>
|
|
101
|
+
</head>
|
|
102
|
+
<body>
|
|
103
|
+
<div class="c-container">
|
|
104
|
+
<div class="c-row">
|
|
105
|
+
<div class="c-col-6">Left Column</div>
|
|
106
|
+
<div class="c-col-6">Right Column</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</body>
|
|
110
|
+
</html>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### In React / Next.js / Vite
|
|
114
|
+
|
|
115
|
+
```js
|
|
116
|
+
// main.jsx or _app.jsx — applies globally
|
|
117
|
+
import "@vimalkrml/dev-template/src/index.css";
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Modular imports — only load what you use
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
import "@vimalkrml/dev-template/src/tokens.css";
|
|
124
|
+
import "@vimalkrml/dev-template/src/grid.css";
|
|
125
|
+
import "@vimalkrml/dev-template/src/spacing.css";
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## 🗂️ File Structure
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
src/
|
|
134
|
+
├── index.css ← imports everything (start here)
|
|
135
|
+
├── tokens.css ← CSS variables: colors, spacing, shadows, easing
|
|
136
|
+
├── reset.css ← full browser reset
|
|
137
|
+
├── grid.css ← flexbox + CSS grid + responsive columns
|
|
138
|
+
├── spacing.css ← margin + padding utilities
|
|
139
|
+
├── sizing.css ← width, height, min/max, viewport units
|
|
140
|
+
├── display.css ← display, position, overflow, z-index
|
|
141
|
+
├── typography.css ← font, text, line-height, tracking
|
|
142
|
+
├── colors.css ← text, background, border, gradient colors
|
|
143
|
+
├── effects.css ← shadows, borders, opacity, transforms, filters
|
|
144
|
+
├── animation.css ← 16 keyframes + animation control utilities
|
|
145
|
+
├── forms.css ← input, button, select, checkbox components
|
|
146
|
+
├── scroll.css ← scroll snap, custom scrollbar, touch-action
|
|
147
|
+
└── print.css ← print show/hide, page breaks
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
## 🌗 Dark Mode
|
|
153
|
+
|
|
154
|
+
No JavaScript required. Two ways to activate:
|
|
155
|
+
|
|
156
|
+
### Manual toggle
|
|
157
|
+
|
|
158
|
+
```html
|
|
159
|
+
<html data-theme="dark"></html>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Auto — respects system preference
|
|
163
|
+
|
|
164
|
+
```html
|
|
165
|
+
<!-- No setup needed — works automatically via prefers-color-scheme -->
|
|
166
|
+
<html></html>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### Override any token
|
|
170
|
+
|
|
171
|
+
```css
|
|
172
|
+
:root {
|
|
173
|
+
--c-primary-500: #your-brand-color;
|
|
174
|
+
--c-bg: #0f172a;
|
|
175
|
+
--c-fg: #f8fafc;
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## 📐 Grid System
|
|
182
|
+
|
|
183
|
+
12-column responsive flexbox grid with breakpoints at `md` (768px), `lg` (1024px), `xl` (1280px), and `2xl` (1536px).
|
|
184
|
+
|
|
185
|
+
```html
|
|
186
|
+
<!-- Two equal columns -->
|
|
187
|
+
<div class="c-row">
|
|
188
|
+
<div class="c-col-6">Left</div>
|
|
189
|
+
<div class="c-col-6">Right</div>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<!-- Responsive: full → half → third -->
|
|
193
|
+
<div class="c-row">
|
|
194
|
+
<div class="c-col-12 c-col-md-6 c-col-lg-4">Card</div>
|
|
195
|
+
<div class="c-col-12 c-col-md-6 c-col-lg-4">Card</div>
|
|
196
|
+
<div class="c-col-12 c-col-md-6 c-col-lg-4">Card</div>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<!-- CSS Grid -->
|
|
200
|
+
<div class="c-grid c-grid-cols-3 c-gap-6">
|
|
201
|
+
<div>One</div>
|
|
202
|
+
<div>Two</div>
|
|
203
|
+
<div>Three</div>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<!-- Centered content -->
|
|
207
|
+
<div class="c-container c-flex c-items-center c-justify-center">
|
|
208
|
+
<div class="c-col-md-8 c-col-lg-6">Centered</div>
|
|
209
|
+
</div>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
## 🎨 Design Tokens
|
|
215
|
+
|
|
216
|
+
Override any token globally:
|
|
217
|
+
|
|
218
|
+
```css
|
|
219
|
+
:root {
|
|
220
|
+
--c-primary-500: #6c63ff;
|
|
221
|
+
--c-font-sans: "Inter", sans-serif;
|
|
222
|
+
--c-radius-md: 10px;
|
|
223
|
+
--c-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## 🖊️ Form Components
|
|
230
|
+
|
|
231
|
+
Production-ready form elements with no JavaScript:
|
|
232
|
+
|
|
233
|
+
```html
|
|
234
|
+
<!-- Input -->
|
|
235
|
+
<div class="c-form-group">
|
|
236
|
+
<label class="c-label c-label-required">Email</label>
|
|
237
|
+
<input type="email" class="c-input" placeholder="you@example.com" />
|
|
238
|
+
<span class="c-form-hint">We'll never share your email.</span>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<!-- Select -->
|
|
242
|
+
<select class="c-select">
|
|
243
|
+
<option>Option 1</option>
|
|
244
|
+
<option>Option 2</option>
|
|
245
|
+
</select>
|
|
246
|
+
|
|
247
|
+
<!-- Textarea -->
|
|
248
|
+
<textarea class="c-textarea" rows="4" placeholder="Your message..."></textarea>
|
|
249
|
+
|
|
250
|
+
<!-- Buttons -->
|
|
251
|
+
<button class="c-btn c-btn-primary">Primary</button>
|
|
252
|
+
<button class="c-btn c-btn-secondary">Secondary</button>
|
|
253
|
+
<button class="c-btn c-btn-outline">Outline</button>
|
|
254
|
+
<button class="c-btn c-btn-ghost">Ghost</button>
|
|
255
|
+
<button class="c-btn c-btn-danger">Danger</button>
|
|
256
|
+
|
|
257
|
+
<!-- Button sizes -->
|
|
258
|
+
<button class="c-btn c-btn-primary c-btn-sm">Small</button>
|
|
259
|
+
<button class="c-btn c-btn-primary c-btn-lg">Large</button>
|
|
260
|
+
<button class="c-btn c-btn-primary c-btn-full">Full Width</button>
|
|
261
|
+
|
|
262
|
+
<!-- Loading state -->
|
|
263
|
+
<button class="c-btn c-btn-primary c-btn-loading">Saving...</button>
|
|
264
|
+
|
|
265
|
+
<!-- Input group -->
|
|
266
|
+
<div class="c-input-group">
|
|
267
|
+
<span class="c-input-addon">https://</span>
|
|
268
|
+
<input type="text" class="c-input" placeholder="yoursite.com" />
|
|
269
|
+
</div>
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
|
|
274
|
+
## 🎞️ Animations
|
|
275
|
+
|
|
276
|
+
16 built-in keyframe animations with full duration, delay, and iteration control:
|
|
277
|
+
|
|
278
|
+
```html
|
|
279
|
+
<div class="c-animate-fade-in">Fade in</div>
|
|
280
|
+
<div class="c-animate-slide-up">Slide up</div>
|
|
281
|
+
<div class="c-animate-skeleton c-rounded c-h-4 c-mb-2"></div>
|
|
282
|
+
<svg class="c-animate-spin c-size-5">...</svg>
|
|
283
|
+
<img class="c-animate-float" src="hero.png" />
|
|
284
|
+
|
|
285
|
+
<!-- Delay and duration control -->
|
|
286
|
+
<div class="c-animate-slide-up c-animate-delay-300 c-animate-duration-500">
|
|
287
|
+
Delayed entrance
|
|
288
|
+
</div>
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
Available: `fade-in` `fade-out` `slide-up` `slide-down` `slide-left` `slide-right` `scale-in` `scale-out` `spin` `ping` `pulse` `bounce` `shake` `wiggle` `float` `heartbeat` `skeleton` `blink`
|
|
292
|
+
|
|
293
|
+
---
|
|
294
|
+
|
|
295
|
+
## ✨ Effects & Hover Utilities
|
|
296
|
+
|
|
297
|
+
```html
|
|
298
|
+
<div class="c-rounded-lg c-shadow c-hover-lift c-transition">Card</div>
|
|
299
|
+
<img class="c-hover-scale c-transition" src="image.jpg" />
|
|
300
|
+
<div class="c-backdrop-blur-md c-bg-white c-opacity-80">Glass effect</div>
|
|
301
|
+
<img class="c-grayscale c-hover-brightness" src="photo.jpg" />
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
---
|
|
305
|
+
|
|
306
|
+
## 📜 Scroll Utilities
|
|
307
|
+
|
|
308
|
+
```html
|
|
309
|
+
<!-- Horizontal scroll snap -->
|
|
310
|
+
<div class="c-flex c-snap-x c-overflow-x-auto c-scrollbar-none">
|
|
311
|
+
<div class="c-snap-start c-flex-shrink-0 c-w-80">Slide 1</div>
|
|
312
|
+
<div class="c-snap-start c-flex-shrink-0 c-w-80">Slide 2</div>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<!-- Custom thin scrollbar -->
|
|
316
|
+
<div class="c-overflow-y-auto c-scrollbar-thin c-max-h-64">Long content...</div>
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
---
|
|
320
|
+
|
|
321
|
+
## 🖨️ Print Utilities
|
|
322
|
+
|
|
323
|
+
```html
|
|
324
|
+
<nav class="c-print-hidden">Navigation</nav>
|
|
325
|
+
<footer class="c-print-only">Printed by MyApp</footer>
|
|
326
|
+
<div class="c-print-break-inside-avoid">Keep this block together</div>
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
---
|
|
330
|
+
|
|
331
|
+
## 🤝 Contributing
|
|
332
|
+
|
|
333
|
+
Contributions are welcome!
|
|
334
|
+
|
|
335
|
+
1. Fork the repository
|
|
336
|
+
2. Create your feature branch: `git checkout -b feature/my-feature`
|
|
337
|
+
3. Commit your changes: `git commit -m 'Add my feature'`
|
|
338
|
+
4. Push to the branch: `git push origin feature/my-feature`
|
|
339
|
+
5. Open a Pull Request against the `dev` branch
|
|
340
|
+
|
|
341
|
+
> ⚠️ Direct pushes to `main` are not accepted. All contributions go through Pull Requests and are reviewed before merging.
|
|
342
|
+
|
|
343
|
+
---
|
|
344
|
+
|
|
345
|
+
## 📄 License
|
|
346
|
+
|
|
347
|
+
MIT © [Vimal K R](https://github.com/vimalkrml)
|
package/package.json
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "fluxgrid-css",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A utility-first CSS framework with zero build step — dark mode, animations, forms, and a full design token system built in.",
|
|
5
|
+
"main": "src/index.css",
|
|
6
|
+
"files": [
|
|
7
|
+
"src"
|
|
8
|
+
],
|
|
9
|
+
"keywords": [
|
|
10
|
+
"css",
|
|
11
|
+
"utility",
|
|
12
|
+
"framework",
|
|
13
|
+
"dark-mode",
|
|
14
|
+
"grid",
|
|
15
|
+
"animations",
|
|
16
|
+
"forms",
|
|
17
|
+
"fluxgrid",
|
|
18
|
+
"datafluxgrid"
|
|
19
|
+
],
|
|
20
|
+
"license": "MIT"
|
|
21
|
+
}
|
|
Binary file
|