@lobergdesign/dot-grid 1.0.1 → 1.0.3
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/.purgecssrc.json +26 -0
- package/README.md +92 -39
- package/dist/grid.css +0 -75
- package/dist/grid.min.css +1 -71
- package/package.json +6 -3
- package/purgecss.config.js +77 -0
- package/src/grid.scss +0 -20
package/.purgecssrc.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"content": [
|
|
3
|
+
"./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}",
|
|
4
|
+
"./public/**/*.html"
|
|
5
|
+
],
|
|
6
|
+
"css": ["./node_modules/@lobergdesign/dot-grid/dist/grid.css"],
|
|
7
|
+
"safelist": {
|
|
8
|
+
"standard": ["grid-w", "grid-r", "no-gap", "hidden"],
|
|
9
|
+
"greedy": [
|
|
10
|
+
"/^grid-c-\\d{1,2}$/",
|
|
11
|
+
"/^grid-c-start-\\d{1,2}$/",
|
|
12
|
+
"/^grid-c-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
|
|
13
|
+
"/^grid-c-start-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
|
|
14
|
+
"/^grid-c-vp-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
|
|
15
|
+
"/^grid-c-start-vp-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
|
|
16
|
+
"/^grid-[rc]-subgrid$/",
|
|
17
|
+
"/^grid-r-(fluid-[234]|ram|intrinsic|even|dense|flexible)$/",
|
|
18
|
+
"/^grid-auto-(fit|fill)$/",
|
|
19
|
+
"/^place-[tcb]-[lcr]$/",
|
|
20
|
+
"/^justify-.*$/",
|
|
21
|
+
"/^grid-c-(min|max|fit|auto|fluid)$/",
|
|
22
|
+
"/^(hidden|block|grid|flex)-(sm|md|lg|xl|xxl)$/",
|
|
23
|
+
"/^(hidden|block|grid|flex)-vp-(sm|md|lg|xl|xxl)$/"
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
}
|
package/README.md
CHANGED
|
@@ -19,25 +19,31 @@ A modern, flexible 12-column CSS Grid system with container queries, fluid layou
|
|
|
19
19
|
### npm
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
npm install dot-grid
|
|
22
|
+
npm install @lobergdesign/dot-grid
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
Then import in your CSS/SCSS:
|
|
26
26
|
|
|
27
27
|
```css
|
|
28
|
-
@import 'dot-grid';
|
|
28
|
+
@import '@lobergdesign/dot-grid';
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
Or in your HTML:
|
|
32
32
|
|
|
33
33
|
```html
|
|
34
|
-
<link
|
|
34
|
+
<link
|
|
35
|
+
rel="stylesheet"
|
|
36
|
+
href="node_modules/@lobergdesign/dot-grid/dist/grid.min.css"
|
|
37
|
+
/>
|
|
35
38
|
```
|
|
36
39
|
|
|
37
40
|
### CDN
|
|
38
41
|
|
|
39
42
|
```html
|
|
40
|
-
<link
|
|
43
|
+
<link
|
|
44
|
+
rel="stylesheet"
|
|
45
|
+
href="https://unpkg.com/@lobergdesign/dot-grid@latest/dist/grid.min.css"
|
|
46
|
+
/>
|
|
41
47
|
```
|
|
42
48
|
|
|
43
49
|
## 🚀 Quick Start
|
|
@@ -84,9 +90,12 @@ Or in your HTML:
|
|
|
84
90
|
#### Basic Columns
|
|
85
91
|
|
|
86
92
|
```html
|
|
87
|
-
<div class="grid-c-1">...</div>
|
|
88
|
-
|
|
89
|
-
<div class="grid-c-
|
|
93
|
+
<div class="grid-c-1">...</div>
|
|
94
|
+
<!-- Spans 1 column -->
|
|
95
|
+
<div class="grid-c-6">...</div>
|
|
96
|
+
<!-- Spans 6 columns (50%) -->
|
|
97
|
+
<div class="grid-c-12">...</div>
|
|
98
|
+
<!-- Spans 12 columns (100%) -->
|
|
90
99
|
```
|
|
91
100
|
|
|
92
101
|
All classes from `.grid-c-1` through `.grid-c-12` are available.
|
|
@@ -102,6 +111,7 @@ Responds to the **container width**, not viewport:
|
|
|
102
111
|
```
|
|
103
112
|
|
|
104
113
|
**Breakpoints:**
|
|
114
|
+
|
|
105
115
|
- `sm`: 640px
|
|
106
116
|
- `md`: 768px
|
|
107
117
|
- `lg`: 1024px
|
|
@@ -113,9 +123,7 @@ Responds to the **container width**, not viewport:
|
|
|
113
123
|
If you need viewport-based responsive behavior instead:
|
|
114
124
|
|
|
115
125
|
```html
|
|
116
|
-
<div class="grid-c-vp-md-6 grid-c-vp-lg-4">
|
|
117
|
-
Responds to viewport size
|
|
118
|
-
</div>
|
|
126
|
+
<div class="grid-c-vp-md-6 grid-c-vp-lg-4">Responds to viewport size</div>
|
|
119
127
|
```
|
|
120
128
|
|
|
121
129
|
### Column Positioning
|
|
@@ -123,9 +131,7 @@ If you need viewport-based responsive behavior instead:
|
|
|
123
131
|
#### Start Position
|
|
124
132
|
|
|
125
133
|
```html
|
|
126
|
-
<div class="grid-c-3 grid-c-start-4">
|
|
127
|
-
Starts at column 4, spans 3 columns
|
|
128
|
-
</div>
|
|
134
|
+
<div class="grid-c-3 grid-c-start-4">Starts at column 4, spans 3 columns</div>
|
|
129
135
|
```
|
|
130
136
|
|
|
131
137
|
Responsive start positions:
|
|
@@ -257,6 +263,76 @@ Available: `.justify-start`, `.justify-end`, `.justify-center`, `.justify-betwee
|
|
|
257
263
|
<div class="grid-c-auto">Auto-sized</div>
|
|
258
264
|
```
|
|
259
265
|
|
|
266
|
+
## 🌲 Tree Shaking / PurgeCSS
|
|
267
|
+
|
|
268
|
+
Like Tailwind CSS, you can significantly reduce the CSS bundle size by removing unused classes using PurgeCSS or similar tools.
|
|
269
|
+
|
|
270
|
+
### Setup with PurgeCSS
|
|
271
|
+
|
|
272
|
+
1. **Install PurgeCSS:**
|
|
273
|
+
|
|
274
|
+
```bash
|
|
275
|
+
npm install --save-dev @fullhuman/postcss-purgecss
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
2. **Copy the configuration:**
|
|
279
|
+
|
|
280
|
+
Copy `purgecss.config.js` from the dot-grid package to your project root, or create your own:
|
|
281
|
+
|
|
282
|
+
```js
|
|
283
|
+
// purgecss.config.js
|
|
284
|
+
module.exports = {
|
|
285
|
+
content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
|
|
286
|
+
css: ['./node_modules/@lobergdesign/dot-grid/dist/grid.css'],
|
|
287
|
+
safelist: {
|
|
288
|
+
greedy: [
|
|
289
|
+
/^grid-c-\d{1,2}$/,
|
|
290
|
+
/^grid-c-(sm|md|lg|xl|xxl)-\d{1,2}$/,
|
|
291
|
+
// ... see purgecss.config.js for full list
|
|
292
|
+
],
|
|
293
|
+
},
|
|
294
|
+
}
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
3. **Add to your build process:**
|
|
298
|
+
|
|
299
|
+
```json
|
|
300
|
+
// package.json
|
|
301
|
+
{
|
|
302
|
+
"scripts": {
|
|
303
|
+
"purge": "purgecss --config ./purgecss.config.js --output ./dist/grid.purged.css"
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
### With PostCSS
|
|
309
|
+
|
|
310
|
+
```js
|
|
311
|
+
// postcss.config.js
|
|
312
|
+
module.exports = {
|
|
313
|
+
plugins: [
|
|
314
|
+
require('@fullhuman/postcss-purgecss')({
|
|
315
|
+
content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
|
|
316
|
+
safelist: {
|
|
317
|
+
greedy: [
|
|
318
|
+
/^grid-c-/,
|
|
319
|
+
/^grid-r-/,
|
|
320
|
+
/^place-/,
|
|
321
|
+
// Add more patterns as needed
|
|
322
|
+
],
|
|
323
|
+
},
|
|
324
|
+
}),
|
|
325
|
+
],
|
|
326
|
+
}
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
### Expected Results
|
|
330
|
+
|
|
331
|
+
- **Full build:** ~28KB / 19KB minified
|
|
332
|
+
- **With PurgeCSS:** Typically 2-5KB depending on usage
|
|
333
|
+
|
|
334
|
+
See `purgecss.config.js` in the package for complete safelist patterns.
|
|
335
|
+
|
|
260
336
|
## 🎨 Customization
|
|
261
337
|
|
|
262
338
|
Override CSS custom properties in your own stylesheet:
|
|
@@ -275,7 +351,7 @@ Override CSS custom properties in your own stylesheet:
|
|
|
275
351
|
|
|
276
352
|
/* Customize fluid layouts */
|
|
277
353
|
--grid-auto-min: 300px; /* For grid-auto-fit */
|
|
278
|
-
--grid-c-min-width: 250px;
|
|
354
|
+
--grid-c-min-width: 250px; /* For grid-c-fluid */
|
|
279
355
|
}
|
|
280
356
|
```
|
|
281
357
|
|
|
@@ -292,10 +368,10 @@ $breakpoints: (
|
|
|
292
368
|
md: 768px,
|
|
293
369
|
lg: 992px,
|
|
294
370
|
xl: 1200px,
|
|
295
|
-
xxl: 1600px
|
|
371
|
+
xxl: 1600px,
|
|
296
372
|
);
|
|
297
373
|
|
|
298
|
-
@use 'dot-grid/src/grid';
|
|
374
|
+
@use '@lobergdesign/dot-grid/src/grid';
|
|
299
375
|
```
|
|
300
376
|
|
|
301
377
|
## 🌐 Browser Support
|
|
@@ -316,25 +392,6 @@ See the `/examples` directory for complete working examples:
|
|
|
316
392
|
- `fluid-layout.html` - Auto-responsive fluid grids
|
|
317
393
|
- `subgrid.html` - Subgrid alignment examples
|
|
318
394
|
|
|
319
|
-
## 🆚 Migration from Original CodePen
|
|
320
|
-
|
|
321
|
-
### Breaking Changes
|
|
322
|
-
|
|
323
|
-
1. **Class names updated** - All core classes have been renamed for better clarity:
|
|
324
|
-
- `.wrap` → `.grid-w`
|
|
325
|
-
- `.row` → `.grid-r`
|
|
326
|
-
- `.col-*` → `.grid-c-*`
|
|
327
|
-
- **Migration:** Update all class names in your HTML
|
|
328
|
-
|
|
329
|
-
2. **Container queries by default** - Responsive classes now use `@container` instead of `@media`
|
|
330
|
-
- **Migration:** Use `.grid-c-vp-{size}-{num}` if you need viewport-based behavior
|
|
331
|
-
|
|
332
|
-
3. **Placement utilities fixed** - `align-items: top` → `align-items: start`
|
|
333
|
-
- **Migration:** No action needed, now uses correct CSS values
|
|
334
|
-
|
|
335
|
-
4. **New breakpoints** - Added `xxl` (1536px), adjusted `lg` from 1025px to 1024px
|
|
336
|
-
- **Migration:** Update breakpoints in your HTML if using exact pixel values
|
|
337
|
-
|
|
338
395
|
### New Features (Additive)
|
|
339
396
|
|
|
340
397
|
- Subgrid support
|
|
@@ -347,7 +404,3 @@ See the `/examples` directory for complete working examples:
|
|
|
347
404
|
## 📄 License
|
|
348
405
|
|
|
349
406
|
MIT © Jean Loberg
|
|
350
|
-
|
|
351
|
-
## 🤝 Contributing
|
|
352
|
-
|
|
353
|
-
Issues and pull requests welcome at [github.com/lobergdesign/dot-grid](https://github.com/lobergdesign/dot-grid)
|
package/dist/grid.css
CHANGED
|
@@ -1,18 +1,3 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* dot-grid v1.0.0
|
|
3
|
-
* A modern, flexible 12-column CSS Grid system
|
|
4
|
-
*
|
|
5
|
-
* Features:
|
|
6
|
-
* - Container queries for responsive layouts
|
|
7
|
-
* - Fluid/automatic layout utilities
|
|
8
|
-
* - Subgrid support
|
|
9
|
-
* - CSS custom properties for easy customization
|
|
10
|
-
* - Cascade layers for better specificity control
|
|
11
|
-
*
|
|
12
|
-
* (c) 2024 Jean Loberg
|
|
13
|
-
* Released under the MIT License
|
|
14
|
-
* https://github.com/lobergdesign/dot-grid
|
|
15
|
-
*/
|
|
16
1
|
:root {
|
|
17
2
|
--grid-columns: 12;
|
|
18
3
|
--grid-gap: clamp(1rem, 2vw, 2rem);
|
|
@@ -25,21 +10,6 @@
|
|
|
25
10
|
--grid-w-width: 90vw;
|
|
26
11
|
}
|
|
27
12
|
|
|
28
|
-
/*!
|
|
29
|
-
* dot-grid v1.0.0
|
|
30
|
-
* A modern, flexible 12-column CSS Grid system
|
|
31
|
-
*
|
|
32
|
-
* Features:
|
|
33
|
-
* - Container queries for responsive layouts
|
|
34
|
-
* - Fluid/automatic layout utilities
|
|
35
|
-
* - Subgrid support
|
|
36
|
-
* - CSS custom properties for easy customization
|
|
37
|
-
* - Cascade layers for better specificity control
|
|
38
|
-
*
|
|
39
|
-
* (c) 2024 Jean Loberg
|
|
40
|
-
* Released under the MIT License
|
|
41
|
-
* https://github.com/lobergdesign/dot-grid
|
|
42
|
-
*/
|
|
43
13
|
@layer grid.base, grid.utilities, grid.responsive, grid.fluid;
|
|
44
14
|
@layer grid.base {
|
|
45
15
|
.grid-w {
|
|
@@ -151,21 +121,6 @@
|
|
|
151
121
|
padding-block-end: 0;
|
|
152
122
|
}
|
|
153
123
|
}
|
|
154
|
-
/*!
|
|
155
|
-
* dot-grid v1.0.0
|
|
156
|
-
* A modern, flexible 12-column CSS Grid system
|
|
157
|
-
*
|
|
158
|
-
* Features:
|
|
159
|
-
* - Container queries for responsive layouts
|
|
160
|
-
* - Fluid/automatic layout utilities
|
|
161
|
-
* - Subgrid support
|
|
162
|
-
* - CSS custom properties for easy customization
|
|
163
|
-
* - Cascade layers for better specificity control
|
|
164
|
-
*
|
|
165
|
-
* (c) 2024 Jean Loberg
|
|
166
|
-
* Released under the MIT License
|
|
167
|
-
* https://github.com/lobergdesign/dot-grid
|
|
168
|
-
*/
|
|
169
124
|
@layer grid.utilities {
|
|
170
125
|
.no-gap {
|
|
171
126
|
gap: 0;
|
|
@@ -258,21 +213,6 @@
|
|
|
258
213
|
display: none;
|
|
259
214
|
}
|
|
260
215
|
}
|
|
261
|
-
/*!
|
|
262
|
-
* dot-grid v1.0.0
|
|
263
|
-
* A modern, flexible 12-column CSS Grid system
|
|
264
|
-
*
|
|
265
|
-
* Features:
|
|
266
|
-
* - Container queries for responsive layouts
|
|
267
|
-
* - Fluid/automatic layout utilities
|
|
268
|
-
* - Subgrid support
|
|
269
|
-
* - CSS custom properties for easy customization
|
|
270
|
-
* - Cascade layers for better specificity control
|
|
271
|
-
*
|
|
272
|
-
* (c) 2024 Jean Loberg
|
|
273
|
-
* Released under the MIT License
|
|
274
|
-
* https://github.com/lobergdesign/dot-grid
|
|
275
|
-
*/
|
|
276
216
|
@layer grid.responsive {
|
|
277
217
|
@container grid (min-width: 640px) {
|
|
278
218
|
.grid-c-sm-1 {
|
|
@@ -1135,21 +1075,6 @@
|
|
|
1135
1075
|
}
|
|
1136
1076
|
}
|
|
1137
1077
|
}
|
|
1138
|
-
/*!
|
|
1139
|
-
* dot-grid v1.0.0
|
|
1140
|
-
* A modern, flexible 12-column CSS Grid system
|
|
1141
|
-
*
|
|
1142
|
-
* Features:
|
|
1143
|
-
* - Container queries for responsive layouts
|
|
1144
|
-
* - Fluid/automatic layout utilities
|
|
1145
|
-
* - Subgrid support
|
|
1146
|
-
* - CSS custom properties for easy customization
|
|
1147
|
-
* - Cascade layers for better specificity control
|
|
1148
|
-
*
|
|
1149
|
-
* (c) 2024 Jean Loberg
|
|
1150
|
-
* Released under the MIT License
|
|
1151
|
-
* https://github.com/lobergdesign/dot-grid
|
|
1152
|
-
*/
|
|
1153
1078
|
@layer grid.fluid {
|
|
1154
1079
|
.grid-auto-fit {
|
|
1155
1080
|
display: grid;
|
package/dist/grid.min.css
CHANGED
|
@@ -1,71 +1 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* dot-grid v1.0.0
|
|
3
|
-
* A modern, flexible 12-column CSS Grid system
|
|
4
|
-
*
|
|
5
|
-
* Features:
|
|
6
|
-
* - Container queries for responsive layouts
|
|
7
|
-
* - Fluid/automatic layout utilities
|
|
8
|
-
* - Subgrid support
|
|
9
|
-
* - CSS custom properties for easy customization
|
|
10
|
-
* - Cascade layers for better specificity control
|
|
11
|
-
*
|
|
12
|
-
* (c) 2024 Jean Loberg
|
|
13
|
-
* Released under the MIT License
|
|
14
|
-
* https://github.com/lobergdesign/dot-grid
|
|
15
|
-
*/:root{--grid-columns: 12;--grid-gap: clamp(1rem, 2vw, 2rem);--grid-bp-sm: 640px;--grid-bp-md: 768px;--grid-bp-lg: 1024px;--grid-bp-xl: 1280px;--grid-bp-xxl: 1536px;--grid-w-max-width: 180rem;--grid-w-width: 90vw}/*!
|
|
16
|
-
* dot-grid v1.0.0
|
|
17
|
-
* A modern, flexible 12-column CSS Grid system
|
|
18
|
-
*
|
|
19
|
-
* Features:
|
|
20
|
-
* - Container queries for responsive layouts
|
|
21
|
-
* - Fluid/automatic layout utilities
|
|
22
|
-
* - Subgrid support
|
|
23
|
-
* - CSS custom properties for easy customization
|
|
24
|
-
* - Cascade layers for better specificity control
|
|
25
|
-
*
|
|
26
|
-
* (c) 2024 Jean Loberg
|
|
27
|
-
* Released under the MIT License
|
|
28
|
-
* https://github.com/lobergdesign/dot-grid
|
|
29
|
-
*/@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:var(--grid-w-width, 90vw);max-width:var(--grid-w-max-width, 180rem);margin-inline:auto}.grid-r{display:grid;grid-template-columns:repeat(var(--grid-columns, 12), 1fr);gap:var(--grid-gap, clamp(1rem, 2vw, 2rem));padding-block-end:var(--grid-gap, clamp(1rem, 2vw, 2rem));container-type:inline-size;container-name:grid}.grid-r>*{grid-column-end:span var(--grid-columns, 12)}.grid-c{grid-column-end:span var(--grid-columns, 12)}.grid-c-1{grid-column-end:span 1}.grid-c-2{grid-column-end:span 2}.grid-c-3{grid-column-end:span 3}.grid-c-4{grid-column-end:span 4}.grid-c-5{grid-column-end:span 5}.grid-c-6{grid-column-end:span 6}.grid-c-7{grid-column-end:span 7}.grid-c-8{grid-column-end:span 8}.grid-c-9{grid-column-end:span 9}.grid-c-10{grid-column-end:span 10}.grid-c-11{grid-column-end:span 11}.grid-c-12{grid-column-end:span 12}.grid-c-start-1{grid-column-start:1}.grid-c-start-2{grid-column-start:2}.grid-c-start-3{grid-column-start:3}.grid-c-start-4{grid-column-start:4}.grid-c-start-5{grid-column-start:5}.grid-c-start-6{grid-column-start:6}.grid-c-start-7{grid-column-start:7}.grid-c-start-8{grid-column-start:8}.grid-c-start-9{grid-column-start:9}.grid-c-start-10{grid-column-start:10}.grid-c-start-11{grid-column-start:11}.grid-c-start-12{grid-column-start:12}.grid-r-subgrid{display:grid;grid-template-columns:subgrid;grid-column:1/-1}.grid-r-subgrid:not([style*=gap]){gap:inherit}.grid-c-subgrid{display:grid;grid-template-rows:subgrid;grid-row:1/-1}.grid-r .grid-r{grid-column:1/-1;padding-block-end:0}}/*!
|
|
30
|
-
* dot-grid v1.0.0
|
|
31
|
-
* A modern, flexible 12-column CSS Grid system
|
|
32
|
-
*
|
|
33
|
-
* Features:
|
|
34
|
-
* - Container queries for responsive layouts
|
|
35
|
-
* - Fluid/automatic layout utilities
|
|
36
|
-
* - Subgrid support
|
|
37
|
-
* - CSS custom properties for easy customization
|
|
38
|
-
* - Cascade layers for better specificity control
|
|
39
|
-
*
|
|
40
|
-
* (c) 2024 Jean Loberg
|
|
41
|
-
* Released under the MIT License
|
|
42
|
-
* https://github.com/lobergdesign/dot-grid
|
|
43
|
-
*/@layer grid.utilities{.no-gap{gap:0}.place-t-l{display:grid;align-items:start;justify-items:start}.place-t-c{display:grid;align-items:start;justify-items:center}.place-t-r{display:grid;align-items:start;justify-items:end}.place-c-l{display:grid;align-items:center;justify-items:start}.place-c-c{display:grid;align-items:center;justify-items:center}.place-c-r{display:grid;align-items:center;justify-items:end}.place-b-l{display:grid;align-items:end;justify-items:start}.place-b-c{display:grid;align-items:end;justify-items:center}.place-b-r{display:grid;align-items:end;justify-items:end}.justify-start{display:flex;justify-content:flex-start}.justify-end{display:flex;justify-content:flex-end}.justify-center,.justify-space-center{display:flex;justify-content:center}.justify-between,.justify-space-between{display:flex;justify-content:space-between}.justify-around,.justify-space-around{display:flex;justify-content:space-around}.justify-evenly{display:flex;justify-content:space-evenly}.grid-c-min{width:min-content;grid-column:auto}.grid-c-max{width:max-content;grid-column:auto}.grid-c-fit{width:fit-content;grid-column:auto}.hidden{display:none}}/*!
|
|
44
|
-
* dot-grid v1.0.0
|
|
45
|
-
* A modern, flexible 12-column CSS Grid system
|
|
46
|
-
*
|
|
47
|
-
* Features:
|
|
48
|
-
* - Container queries for responsive layouts
|
|
49
|
-
* - Fluid/automatic layout utilities
|
|
50
|
-
* - Subgrid support
|
|
51
|
-
* - CSS custom properties for easy customization
|
|
52
|
-
* - Cascade layers for better specificity control
|
|
53
|
-
*
|
|
54
|
-
* (c) 2024 Jean Loberg
|
|
55
|
-
* Released under the MIT License
|
|
56
|
-
* https://github.com/lobergdesign/dot-grid
|
|
57
|
-
*/@layer grid.responsive{@container grid (min-width: 640px){.grid-c-sm-1{grid-column-end:span 1}.grid-c-sm-2{grid-column-end:span 2}.grid-c-sm-3{grid-column-end:span 3}.grid-c-sm-4{grid-column-end:span 4}.grid-c-sm-5{grid-column-end:span 5}.grid-c-sm-6{grid-column-end:span 6}.grid-c-sm-7{grid-column-end:span 7}.grid-c-sm-8{grid-column-end:span 8}.grid-c-sm-9{grid-column-end:span 9}.grid-c-sm-10{grid-column-end:span 10}.grid-c-sm-11{grid-column-end:span 11}.grid-c-sm-12{grid-column-end:span 12}.grid-c-start-sm-1{grid-column-start:1}.grid-c-start-sm-2{grid-column-start:2}.grid-c-start-sm-3{grid-column-start:3}.grid-c-start-sm-4{grid-column-start:4}.grid-c-start-sm-5{grid-column-start:5}.grid-c-start-sm-6{grid-column-start:6}.grid-c-start-sm-7{grid-column-start:7}.grid-c-start-sm-8{grid-column-start:8}.grid-c-start-sm-9{grid-column-start:9}.grid-c-start-sm-10{grid-column-start:10}.grid-c-start-sm-11{grid-column-start:11}.grid-c-start-sm-12{grid-column-start:12}.hidden-sm{display:none}.block-sm{display:block}.grid-sm{display:grid}.flex-sm{display:flex}}@container grid (min-width: 768px){.grid-c-md-1{grid-column-end:span 1}.grid-c-md-2{grid-column-end:span 2}.grid-c-md-3{grid-column-end:span 3}.grid-c-md-4{grid-column-end:span 4}.grid-c-md-5{grid-column-end:span 5}.grid-c-md-6{grid-column-end:span 6}.grid-c-md-7{grid-column-end:span 7}.grid-c-md-8{grid-column-end:span 8}.grid-c-md-9{grid-column-end:span 9}.grid-c-md-10{grid-column-end:span 10}.grid-c-md-11{grid-column-end:span 11}.grid-c-md-12{grid-column-end:span 12}.grid-c-start-md-1{grid-column-start:1}.grid-c-start-md-2{grid-column-start:2}.grid-c-start-md-3{grid-column-start:3}.grid-c-start-md-4{grid-column-start:4}.grid-c-start-md-5{grid-column-start:5}.grid-c-start-md-6{grid-column-start:6}.grid-c-start-md-7{grid-column-start:7}.grid-c-start-md-8{grid-column-start:8}.grid-c-start-md-9{grid-column-start:9}.grid-c-start-md-10{grid-column-start:10}.grid-c-start-md-11{grid-column-start:11}.grid-c-start-md-12{grid-column-start:12}.hidden-md{display:none}.block-md{display:block}.grid-md{display:grid}.flex-md{display:flex}}@container grid (min-width: 1024px){.grid-c-lg-1{grid-column-end:span 1}.grid-c-lg-2{grid-column-end:span 2}.grid-c-lg-3{grid-column-end:span 3}.grid-c-lg-4{grid-column-end:span 4}.grid-c-lg-5{grid-column-end:span 5}.grid-c-lg-6{grid-column-end:span 6}.grid-c-lg-7{grid-column-end:span 7}.grid-c-lg-8{grid-column-end:span 8}.grid-c-lg-9{grid-column-end:span 9}.grid-c-lg-10{grid-column-end:span 10}.grid-c-lg-11{grid-column-end:span 11}.grid-c-lg-12{grid-column-end:span 12}.grid-c-start-lg-1{grid-column-start:1}.grid-c-start-lg-2{grid-column-start:2}.grid-c-start-lg-3{grid-column-start:3}.grid-c-start-lg-4{grid-column-start:4}.grid-c-start-lg-5{grid-column-start:5}.grid-c-start-lg-6{grid-column-start:6}.grid-c-start-lg-7{grid-column-start:7}.grid-c-start-lg-8{grid-column-start:8}.grid-c-start-lg-9{grid-column-start:9}.grid-c-start-lg-10{grid-column-start:10}.grid-c-start-lg-11{grid-column-start:11}.grid-c-start-lg-12{grid-column-start:12}.hidden-lg{display:none}.block-lg{display:block}.grid-lg{display:grid}.flex-lg{display:flex}}@container grid (min-width: 1280px){.grid-c-xl-1{grid-column-end:span 1}.grid-c-xl-2{grid-column-end:span 2}.grid-c-xl-3{grid-column-end:span 3}.grid-c-xl-4{grid-column-end:span 4}.grid-c-xl-5{grid-column-end:span 5}.grid-c-xl-6{grid-column-end:span 6}.grid-c-xl-7{grid-column-end:span 7}.grid-c-xl-8{grid-column-end:span 8}.grid-c-xl-9{grid-column-end:span 9}.grid-c-xl-10{grid-column-end:span 10}.grid-c-xl-11{grid-column-end:span 11}.grid-c-xl-12{grid-column-end:span 12}.grid-c-start-xl-1{grid-column-start:1}.grid-c-start-xl-2{grid-column-start:2}.grid-c-start-xl-3{grid-column-start:3}.grid-c-start-xl-4{grid-column-start:4}.grid-c-start-xl-5{grid-column-start:5}.grid-c-start-xl-6{grid-column-start:6}.grid-c-start-xl-7{grid-column-start:7}.grid-c-start-xl-8{grid-column-start:8}.grid-c-start-xl-9{grid-column-start:9}.grid-c-start-xl-10{grid-column-start:10}.grid-c-start-xl-11{grid-column-start:11}.grid-c-start-xl-12{grid-column-start:12}.hidden-xl{display:none}.block-xl{display:block}.grid-xl{display:grid}.flex-xl{display:flex}}@container grid (min-width: 1536px){.grid-c-xxl-1{grid-column-end:span 1}.grid-c-xxl-2{grid-column-end:span 2}.grid-c-xxl-3{grid-column-end:span 3}.grid-c-xxl-4{grid-column-end:span 4}.grid-c-xxl-5{grid-column-end:span 5}.grid-c-xxl-6{grid-column-end:span 6}.grid-c-xxl-7{grid-column-end:span 7}.grid-c-xxl-8{grid-column-end:span 8}.grid-c-xxl-9{grid-column-end:span 9}.grid-c-xxl-10{grid-column-end:span 10}.grid-c-xxl-11{grid-column-end:span 11}.grid-c-xxl-12{grid-column-end:span 12}.grid-c-start-xxl-1{grid-column-start:1}.grid-c-start-xxl-2{grid-column-start:2}.grid-c-start-xxl-3{grid-column-start:3}.grid-c-start-xxl-4{grid-column-start:4}.grid-c-start-xxl-5{grid-column-start:5}.grid-c-start-xxl-6{grid-column-start:6}.grid-c-start-xxl-7{grid-column-start:7}.grid-c-start-xxl-8{grid-column-start:8}.grid-c-start-xxl-9{grid-column-start:9}.grid-c-start-xxl-10{grid-column-start:10}.grid-c-start-xxl-11{grid-column-start:11}.grid-c-start-xxl-12{grid-column-start:12}.hidden-xxl{display:none}.block-xxl{display:block}.grid-xxl{display:grid}.flex-xxl{display:flex}}@media(min-width: 640px){.grid-c-vp-sm-1{grid-column-end:span 1}.grid-c-vp-sm-2{grid-column-end:span 2}.grid-c-vp-sm-3{grid-column-end:span 3}.grid-c-vp-sm-4{grid-column-end:span 4}.grid-c-vp-sm-5{grid-column-end:span 5}.grid-c-vp-sm-6{grid-column-end:span 6}.grid-c-vp-sm-7{grid-column-end:span 7}.grid-c-vp-sm-8{grid-column-end:span 8}.grid-c-vp-sm-9{grid-column-end:span 9}.grid-c-vp-sm-10{grid-column-end:span 10}.grid-c-vp-sm-11{grid-column-end:span 11}.grid-c-vp-sm-12{grid-column-end:span 12}.grid-c-start-vp-sm-1{grid-column-start:1}.grid-c-start-vp-sm-2{grid-column-start:2}.grid-c-start-vp-sm-3{grid-column-start:3}.grid-c-start-vp-sm-4{grid-column-start:4}.grid-c-start-vp-sm-5{grid-column-start:5}.grid-c-start-vp-sm-6{grid-column-start:6}.grid-c-start-vp-sm-7{grid-column-start:7}.grid-c-start-vp-sm-8{grid-column-start:8}.grid-c-start-vp-sm-9{grid-column-start:9}.grid-c-start-vp-sm-10{grid-column-start:10}.grid-c-start-vp-sm-11{grid-column-start:11}.grid-c-start-vp-sm-12{grid-column-start:12}.hidden-vp-sm{display:none}.block-vp-sm{display:block}.grid-vp-sm{display:grid}.flex-vp-sm{display:flex}}@media(min-width: 768px){.grid-c-vp-md-1{grid-column-end:span 1}.grid-c-vp-md-2{grid-column-end:span 2}.grid-c-vp-md-3{grid-column-end:span 3}.grid-c-vp-md-4{grid-column-end:span 4}.grid-c-vp-md-5{grid-column-end:span 5}.grid-c-vp-md-6{grid-column-end:span 6}.grid-c-vp-md-7{grid-column-end:span 7}.grid-c-vp-md-8{grid-column-end:span 8}.grid-c-vp-md-9{grid-column-end:span 9}.grid-c-vp-md-10{grid-column-end:span 10}.grid-c-vp-md-11{grid-column-end:span 11}.grid-c-vp-md-12{grid-column-end:span 12}.grid-c-start-vp-md-1{grid-column-start:1}.grid-c-start-vp-md-2{grid-column-start:2}.grid-c-start-vp-md-3{grid-column-start:3}.grid-c-start-vp-md-4{grid-column-start:4}.grid-c-start-vp-md-5{grid-column-start:5}.grid-c-start-vp-md-6{grid-column-start:6}.grid-c-start-vp-md-7{grid-column-start:7}.grid-c-start-vp-md-8{grid-column-start:8}.grid-c-start-vp-md-9{grid-column-start:9}.grid-c-start-vp-md-10{grid-column-start:10}.grid-c-start-vp-md-11{grid-column-start:11}.grid-c-start-vp-md-12{grid-column-start:12}.hidden-vp-md{display:none}.block-vp-md{display:block}.grid-vp-md{display:grid}.flex-vp-md{display:flex}}@media(min-width: 1024px){.grid-c-vp-lg-1{grid-column-end:span 1}.grid-c-vp-lg-2{grid-column-end:span 2}.grid-c-vp-lg-3{grid-column-end:span 3}.grid-c-vp-lg-4{grid-column-end:span 4}.grid-c-vp-lg-5{grid-column-end:span 5}.grid-c-vp-lg-6{grid-column-end:span 6}.grid-c-vp-lg-7{grid-column-end:span 7}.grid-c-vp-lg-8{grid-column-end:span 8}.grid-c-vp-lg-9{grid-column-end:span 9}.grid-c-vp-lg-10{grid-column-end:span 10}.grid-c-vp-lg-11{grid-column-end:span 11}.grid-c-vp-lg-12{grid-column-end:span 12}.grid-c-start-vp-lg-1{grid-column-start:1}.grid-c-start-vp-lg-2{grid-column-start:2}.grid-c-start-vp-lg-3{grid-column-start:3}.grid-c-start-vp-lg-4{grid-column-start:4}.grid-c-start-vp-lg-5{grid-column-start:5}.grid-c-start-vp-lg-6{grid-column-start:6}.grid-c-start-vp-lg-7{grid-column-start:7}.grid-c-start-vp-lg-8{grid-column-start:8}.grid-c-start-vp-lg-9{grid-column-start:9}.grid-c-start-vp-lg-10{grid-column-start:10}.grid-c-start-vp-lg-11{grid-column-start:11}.grid-c-start-vp-lg-12{grid-column-start:12}.hidden-vp-lg{display:none}.block-vp-lg{display:block}.grid-vp-lg{display:grid}.flex-vp-lg{display:flex}}@media(min-width: 1280px){.grid-c-vp-xl-1{grid-column-end:span 1}.grid-c-vp-xl-2{grid-column-end:span 2}.grid-c-vp-xl-3{grid-column-end:span 3}.grid-c-vp-xl-4{grid-column-end:span 4}.grid-c-vp-xl-5{grid-column-end:span 5}.grid-c-vp-xl-6{grid-column-end:span 6}.grid-c-vp-xl-7{grid-column-end:span 7}.grid-c-vp-xl-8{grid-column-end:span 8}.grid-c-vp-xl-9{grid-column-end:span 9}.grid-c-vp-xl-10{grid-column-end:span 10}.grid-c-vp-xl-11{grid-column-end:span 11}.grid-c-vp-xl-12{grid-column-end:span 12}.grid-c-start-vp-xl-1{grid-column-start:1}.grid-c-start-vp-xl-2{grid-column-start:2}.grid-c-start-vp-xl-3{grid-column-start:3}.grid-c-start-vp-xl-4{grid-column-start:4}.grid-c-start-vp-xl-5{grid-column-start:5}.grid-c-start-vp-xl-6{grid-column-start:6}.grid-c-start-vp-xl-7{grid-column-start:7}.grid-c-start-vp-xl-8{grid-column-start:8}.grid-c-start-vp-xl-9{grid-column-start:9}.grid-c-start-vp-xl-10{grid-column-start:10}.grid-c-start-vp-xl-11{grid-column-start:11}.grid-c-start-vp-xl-12{grid-column-start:12}.hidden-vp-xl{display:none}.block-vp-xl{display:block}.grid-vp-xl{display:grid}.flex-vp-xl{display:flex}}@media(min-width: 1536px){.grid-c-vp-xxl-1{grid-column-end:span 1}.grid-c-vp-xxl-2{grid-column-end:span 2}.grid-c-vp-xxl-3{grid-column-end:span 3}.grid-c-vp-xxl-4{grid-column-end:span 4}.grid-c-vp-xxl-5{grid-column-end:span 5}.grid-c-vp-xxl-6{grid-column-end:span 6}.grid-c-vp-xxl-7{grid-column-end:span 7}.grid-c-vp-xxl-8{grid-column-end:span 8}.grid-c-vp-xxl-9{grid-column-end:span 9}.grid-c-vp-xxl-10{grid-column-end:span 10}.grid-c-vp-xxl-11{grid-column-end:span 11}.grid-c-vp-xxl-12{grid-column-end:span 12}.grid-c-start-vp-xxl-1{grid-column-start:1}.grid-c-start-vp-xxl-2{grid-column-start:2}.grid-c-start-vp-xxl-3{grid-column-start:3}.grid-c-start-vp-xxl-4{grid-column-start:4}.grid-c-start-vp-xxl-5{grid-column-start:5}.grid-c-start-vp-xxl-6{grid-column-start:6}.grid-c-start-vp-xxl-7{grid-column-start:7}.grid-c-start-vp-xxl-8{grid-column-start:8}.grid-c-start-vp-xxl-9{grid-column-start:9}.grid-c-start-vp-xxl-10{grid-column-start:10}.grid-c-start-vp-xxl-11{grid-column-start:11}.grid-c-start-vp-xxl-12{grid-column-start:12}.hidden-vp-xxl{display:none}.block-vp-xxl{display:block}.grid-vp-xxl{display:grid}.flex-vp-xxl{display:flex}}}/*!
|
|
58
|
-
* dot-grid v1.0.0
|
|
59
|
-
* A modern, flexible 12-column CSS Grid system
|
|
60
|
-
*
|
|
61
|
-
* Features:
|
|
62
|
-
* - Container queries for responsive layouts
|
|
63
|
-
* - Fluid/automatic layout utilities
|
|
64
|
-
* - Subgrid support
|
|
65
|
-
* - CSS custom properties for easy customization
|
|
66
|
-
* - Cascade layers for better specificity control
|
|
67
|
-
*
|
|
68
|
-
* (c) 2024 Jean Loberg
|
|
69
|
-
* Released under the MIT License
|
|
70
|
-
* https://github.com/lobergdesign/dot-grid
|
|
71
|
-
*/@layer grid.fluid{.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-c-auto{grid-column:auto;width:auto}.grid-c-fluid{min-width:var(--grid-c-min-width, 200px);flex:1 1 var(--grid-c-min-width, 200px)}.grid-r-fluid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(50% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) / 2, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-fluid-3{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(33.333% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 2 / 3, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-fluid-4{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(25% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 3 / 4, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-ram{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-ram>*{grid-column:auto}.grid-r-intrinsic{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, max-content));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-even{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-dense{grid-auto-flow:dense}.grid-r-flexible{display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(var(--col-min, 200px), (100% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * (var(--col-count, 3) - 1)) / var(--col-count, 3), 1fr), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}}
|
|
1
|
+
:root{--grid-columns: 12;--grid-gap: clamp(1rem, 2vw, 2rem);--grid-bp-sm: 640px;--grid-bp-md: 768px;--grid-bp-lg: 1024px;--grid-bp-xl: 1280px;--grid-bp-xxl: 1536px;--grid-w-max-width: 180rem;--grid-w-width: 90vw}@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:var(--grid-w-width, 90vw);max-width:var(--grid-w-max-width, 180rem);margin-inline:auto}.grid-r{display:grid;grid-template-columns:repeat(var(--grid-columns, 12), 1fr);gap:var(--grid-gap, clamp(1rem, 2vw, 2rem));padding-block-end:var(--grid-gap, clamp(1rem, 2vw, 2rem));container-type:inline-size;container-name:grid}.grid-r>*{grid-column-end:span var(--grid-columns, 12)}.grid-c{grid-column-end:span var(--grid-columns, 12)}.grid-c-1{grid-column-end:span 1}.grid-c-2{grid-column-end:span 2}.grid-c-3{grid-column-end:span 3}.grid-c-4{grid-column-end:span 4}.grid-c-5{grid-column-end:span 5}.grid-c-6{grid-column-end:span 6}.grid-c-7{grid-column-end:span 7}.grid-c-8{grid-column-end:span 8}.grid-c-9{grid-column-end:span 9}.grid-c-10{grid-column-end:span 10}.grid-c-11{grid-column-end:span 11}.grid-c-12{grid-column-end:span 12}.grid-c-start-1{grid-column-start:1}.grid-c-start-2{grid-column-start:2}.grid-c-start-3{grid-column-start:3}.grid-c-start-4{grid-column-start:4}.grid-c-start-5{grid-column-start:5}.grid-c-start-6{grid-column-start:6}.grid-c-start-7{grid-column-start:7}.grid-c-start-8{grid-column-start:8}.grid-c-start-9{grid-column-start:9}.grid-c-start-10{grid-column-start:10}.grid-c-start-11{grid-column-start:11}.grid-c-start-12{grid-column-start:12}.grid-r-subgrid{display:grid;grid-template-columns:subgrid;grid-column:1/-1}.grid-r-subgrid:not([style*=gap]){gap:inherit}.grid-c-subgrid{display:grid;grid-template-rows:subgrid;grid-row:1/-1}.grid-r .grid-r{grid-column:1/-1;padding-block-end:0}}@layer grid.utilities{.no-gap{gap:0}.place-t-l{display:grid;align-items:start;justify-items:start}.place-t-c{display:grid;align-items:start;justify-items:center}.place-t-r{display:grid;align-items:start;justify-items:end}.place-c-l{display:grid;align-items:center;justify-items:start}.place-c-c{display:grid;align-items:center;justify-items:center}.place-c-r{display:grid;align-items:center;justify-items:end}.place-b-l{display:grid;align-items:end;justify-items:start}.place-b-c{display:grid;align-items:end;justify-items:center}.place-b-r{display:grid;align-items:end;justify-items:end}.justify-start{display:flex;justify-content:flex-start}.justify-end{display:flex;justify-content:flex-end}.justify-center,.justify-space-center{display:flex;justify-content:center}.justify-between,.justify-space-between{display:flex;justify-content:space-between}.justify-around,.justify-space-around{display:flex;justify-content:space-around}.justify-evenly{display:flex;justify-content:space-evenly}.grid-c-min{width:min-content;grid-column:auto}.grid-c-max{width:max-content;grid-column:auto}.grid-c-fit{width:fit-content;grid-column:auto}.hidden{display:none}}@layer grid.responsive{@container grid (min-width: 640px){.grid-c-sm-1{grid-column-end:span 1}.grid-c-sm-2{grid-column-end:span 2}.grid-c-sm-3{grid-column-end:span 3}.grid-c-sm-4{grid-column-end:span 4}.grid-c-sm-5{grid-column-end:span 5}.grid-c-sm-6{grid-column-end:span 6}.grid-c-sm-7{grid-column-end:span 7}.grid-c-sm-8{grid-column-end:span 8}.grid-c-sm-9{grid-column-end:span 9}.grid-c-sm-10{grid-column-end:span 10}.grid-c-sm-11{grid-column-end:span 11}.grid-c-sm-12{grid-column-end:span 12}.grid-c-start-sm-1{grid-column-start:1}.grid-c-start-sm-2{grid-column-start:2}.grid-c-start-sm-3{grid-column-start:3}.grid-c-start-sm-4{grid-column-start:4}.grid-c-start-sm-5{grid-column-start:5}.grid-c-start-sm-6{grid-column-start:6}.grid-c-start-sm-7{grid-column-start:7}.grid-c-start-sm-8{grid-column-start:8}.grid-c-start-sm-9{grid-column-start:9}.grid-c-start-sm-10{grid-column-start:10}.grid-c-start-sm-11{grid-column-start:11}.grid-c-start-sm-12{grid-column-start:12}.hidden-sm{display:none}.block-sm{display:block}.grid-sm{display:grid}.flex-sm{display:flex}}@container grid (min-width: 768px){.grid-c-md-1{grid-column-end:span 1}.grid-c-md-2{grid-column-end:span 2}.grid-c-md-3{grid-column-end:span 3}.grid-c-md-4{grid-column-end:span 4}.grid-c-md-5{grid-column-end:span 5}.grid-c-md-6{grid-column-end:span 6}.grid-c-md-7{grid-column-end:span 7}.grid-c-md-8{grid-column-end:span 8}.grid-c-md-9{grid-column-end:span 9}.grid-c-md-10{grid-column-end:span 10}.grid-c-md-11{grid-column-end:span 11}.grid-c-md-12{grid-column-end:span 12}.grid-c-start-md-1{grid-column-start:1}.grid-c-start-md-2{grid-column-start:2}.grid-c-start-md-3{grid-column-start:3}.grid-c-start-md-4{grid-column-start:4}.grid-c-start-md-5{grid-column-start:5}.grid-c-start-md-6{grid-column-start:6}.grid-c-start-md-7{grid-column-start:7}.grid-c-start-md-8{grid-column-start:8}.grid-c-start-md-9{grid-column-start:9}.grid-c-start-md-10{grid-column-start:10}.grid-c-start-md-11{grid-column-start:11}.grid-c-start-md-12{grid-column-start:12}.hidden-md{display:none}.block-md{display:block}.grid-md{display:grid}.flex-md{display:flex}}@container grid (min-width: 1024px){.grid-c-lg-1{grid-column-end:span 1}.grid-c-lg-2{grid-column-end:span 2}.grid-c-lg-3{grid-column-end:span 3}.grid-c-lg-4{grid-column-end:span 4}.grid-c-lg-5{grid-column-end:span 5}.grid-c-lg-6{grid-column-end:span 6}.grid-c-lg-7{grid-column-end:span 7}.grid-c-lg-8{grid-column-end:span 8}.grid-c-lg-9{grid-column-end:span 9}.grid-c-lg-10{grid-column-end:span 10}.grid-c-lg-11{grid-column-end:span 11}.grid-c-lg-12{grid-column-end:span 12}.grid-c-start-lg-1{grid-column-start:1}.grid-c-start-lg-2{grid-column-start:2}.grid-c-start-lg-3{grid-column-start:3}.grid-c-start-lg-4{grid-column-start:4}.grid-c-start-lg-5{grid-column-start:5}.grid-c-start-lg-6{grid-column-start:6}.grid-c-start-lg-7{grid-column-start:7}.grid-c-start-lg-8{grid-column-start:8}.grid-c-start-lg-9{grid-column-start:9}.grid-c-start-lg-10{grid-column-start:10}.grid-c-start-lg-11{grid-column-start:11}.grid-c-start-lg-12{grid-column-start:12}.hidden-lg{display:none}.block-lg{display:block}.grid-lg{display:grid}.flex-lg{display:flex}}@container grid (min-width: 1280px){.grid-c-xl-1{grid-column-end:span 1}.grid-c-xl-2{grid-column-end:span 2}.grid-c-xl-3{grid-column-end:span 3}.grid-c-xl-4{grid-column-end:span 4}.grid-c-xl-5{grid-column-end:span 5}.grid-c-xl-6{grid-column-end:span 6}.grid-c-xl-7{grid-column-end:span 7}.grid-c-xl-8{grid-column-end:span 8}.grid-c-xl-9{grid-column-end:span 9}.grid-c-xl-10{grid-column-end:span 10}.grid-c-xl-11{grid-column-end:span 11}.grid-c-xl-12{grid-column-end:span 12}.grid-c-start-xl-1{grid-column-start:1}.grid-c-start-xl-2{grid-column-start:2}.grid-c-start-xl-3{grid-column-start:3}.grid-c-start-xl-4{grid-column-start:4}.grid-c-start-xl-5{grid-column-start:5}.grid-c-start-xl-6{grid-column-start:6}.grid-c-start-xl-7{grid-column-start:7}.grid-c-start-xl-8{grid-column-start:8}.grid-c-start-xl-9{grid-column-start:9}.grid-c-start-xl-10{grid-column-start:10}.grid-c-start-xl-11{grid-column-start:11}.grid-c-start-xl-12{grid-column-start:12}.hidden-xl{display:none}.block-xl{display:block}.grid-xl{display:grid}.flex-xl{display:flex}}@container grid (min-width: 1536px){.grid-c-xxl-1{grid-column-end:span 1}.grid-c-xxl-2{grid-column-end:span 2}.grid-c-xxl-3{grid-column-end:span 3}.grid-c-xxl-4{grid-column-end:span 4}.grid-c-xxl-5{grid-column-end:span 5}.grid-c-xxl-6{grid-column-end:span 6}.grid-c-xxl-7{grid-column-end:span 7}.grid-c-xxl-8{grid-column-end:span 8}.grid-c-xxl-9{grid-column-end:span 9}.grid-c-xxl-10{grid-column-end:span 10}.grid-c-xxl-11{grid-column-end:span 11}.grid-c-xxl-12{grid-column-end:span 12}.grid-c-start-xxl-1{grid-column-start:1}.grid-c-start-xxl-2{grid-column-start:2}.grid-c-start-xxl-3{grid-column-start:3}.grid-c-start-xxl-4{grid-column-start:4}.grid-c-start-xxl-5{grid-column-start:5}.grid-c-start-xxl-6{grid-column-start:6}.grid-c-start-xxl-7{grid-column-start:7}.grid-c-start-xxl-8{grid-column-start:8}.grid-c-start-xxl-9{grid-column-start:9}.grid-c-start-xxl-10{grid-column-start:10}.grid-c-start-xxl-11{grid-column-start:11}.grid-c-start-xxl-12{grid-column-start:12}.hidden-xxl{display:none}.block-xxl{display:block}.grid-xxl{display:grid}.flex-xxl{display:flex}}@media(min-width: 640px){.grid-c-vp-sm-1{grid-column-end:span 1}.grid-c-vp-sm-2{grid-column-end:span 2}.grid-c-vp-sm-3{grid-column-end:span 3}.grid-c-vp-sm-4{grid-column-end:span 4}.grid-c-vp-sm-5{grid-column-end:span 5}.grid-c-vp-sm-6{grid-column-end:span 6}.grid-c-vp-sm-7{grid-column-end:span 7}.grid-c-vp-sm-8{grid-column-end:span 8}.grid-c-vp-sm-9{grid-column-end:span 9}.grid-c-vp-sm-10{grid-column-end:span 10}.grid-c-vp-sm-11{grid-column-end:span 11}.grid-c-vp-sm-12{grid-column-end:span 12}.grid-c-start-vp-sm-1{grid-column-start:1}.grid-c-start-vp-sm-2{grid-column-start:2}.grid-c-start-vp-sm-3{grid-column-start:3}.grid-c-start-vp-sm-4{grid-column-start:4}.grid-c-start-vp-sm-5{grid-column-start:5}.grid-c-start-vp-sm-6{grid-column-start:6}.grid-c-start-vp-sm-7{grid-column-start:7}.grid-c-start-vp-sm-8{grid-column-start:8}.grid-c-start-vp-sm-9{grid-column-start:9}.grid-c-start-vp-sm-10{grid-column-start:10}.grid-c-start-vp-sm-11{grid-column-start:11}.grid-c-start-vp-sm-12{grid-column-start:12}.hidden-vp-sm{display:none}.block-vp-sm{display:block}.grid-vp-sm{display:grid}.flex-vp-sm{display:flex}}@media(min-width: 768px){.grid-c-vp-md-1{grid-column-end:span 1}.grid-c-vp-md-2{grid-column-end:span 2}.grid-c-vp-md-3{grid-column-end:span 3}.grid-c-vp-md-4{grid-column-end:span 4}.grid-c-vp-md-5{grid-column-end:span 5}.grid-c-vp-md-6{grid-column-end:span 6}.grid-c-vp-md-7{grid-column-end:span 7}.grid-c-vp-md-8{grid-column-end:span 8}.grid-c-vp-md-9{grid-column-end:span 9}.grid-c-vp-md-10{grid-column-end:span 10}.grid-c-vp-md-11{grid-column-end:span 11}.grid-c-vp-md-12{grid-column-end:span 12}.grid-c-start-vp-md-1{grid-column-start:1}.grid-c-start-vp-md-2{grid-column-start:2}.grid-c-start-vp-md-3{grid-column-start:3}.grid-c-start-vp-md-4{grid-column-start:4}.grid-c-start-vp-md-5{grid-column-start:5}.grid-c-start-vp-md-6{grid-column-start:6}.grid-c-start-vp-md-7{grid-column-start:7}.grid-c-start-vp-md-8{grid-column-start:8}.grid-c-start-vp-md-9{grid-column-start:9}.grid-c-start-vp-md-10{grid-column-start:10}.grid-c-start-vp-md-11{grid-column-start:11}.grid-c-start-vp-md-12{grid-column-start:12}.hidden-vp-md{display:none}.block-vp-md{display:block}.grid-vp-md{display:grid}.flex-vp-md{display:flex}}@media(min-width: 1024px){.grid-c-vp-lg-1{grid-column-end:span 1}.grid-c-vp-lg-2{grid-column-end:span 2}.grid-c-vp-lg-3{grid-column-end:span 3}.grid-c-vp-lg-4{grid-column-end:span 4}.grid-c-vp-lg-5{grid-column-end:span 5}.grid-c-vp-lg-6{grid-column-end:span 6}.grid-c-vp-lg-7{grid-column-end:span 7}.grid-c-vp-lg-8{grid-column-end:span 8}.grid-c-vp-lg-9{grid-column-end:span 9}.grid-c-vp-lg-10{grid-column-end:span 10}.grid-c-vp-lg-11{grid-column-end:span 11}.grid-c-vp-lg-12{grid-column-end:span 12}.grid-c-start-vp-lg-1{grid-column-start:1}.grid-c-start-vp-lg-2{grid-column-start:2}.grid-c-start-vp-lg-3{grid-column-start:3}.grid-c-start-vp-lg-4{grid-column-start:4}.grid-c-start-vp-lg-5{grid-column-start:5}.grid-c-start-vp-lg-6{grid-column-start:6}.grid-c-start-vp-lg-7{grid-column-start:7}.grid-c-start-vp-lg-8{grid-column-start:8}.grid-c-start-vp-lg-9{grid-column-start:9}.grid-c-start-vp-lg-10{grid-column-start:10}.grid-c-start-vp-lg-11{grid-column-start:11}.grid-c-start-vp-lg-12{grid-column-start:12}.hidden-vp-lg{display:none}.block-vp-lg{display:block}.grid-vp-lg{display:grid}.flex-vp-lg{display:flex}}@media(min-width: 1280px){.grid-c-vp-xl-1{grid-column-end:span 1}.grid-c-vp-xl-2{grid-column-end:span 2}.grid-c-vp-xl-3{grid-column-end:span 3}.grid-c-vp-xl-4{grid-column-end:span 4}.grid-c-vp-xl-5{grid-column-end:span 5}.grid-c-vp-xl-6{grid-column-end:span 6}.grid-c-vp-xl-7{grid-column-end:span 7}.grid-c-vp-xl-8{grid-column-end:span 8}.grid-c-vp-xl-9{grid-column-end:span 9}.grid-c-vp-xl-10{grid-column-end:span 10}.grid-c-vp-xl-11{grid-column-end:span 11}.grid-c-vp-xl-12{grid-column-end:span 12}.grid-c-start-vp-xl-1{grid-column-start:1}.grid-c-start-vp-xl-2{grid-column-start:2}.grid-c-start-vp-xl-3{grid-column-start:3}.grid-c-start-vp-xl-4{grid-column-start:4}.grid-c-start-vp-xl-5{grid-column-start:5}.grid-c-start-vp-xl-6{grid-column-start:6}.grid-c-start-vp-xl-7{grid-column-start:7}.grid-c-start-vp-xl-8{grid-column-start:8}.grid-c-start-vp-xl-9{grid-column-start:9}.grid-c-start-vp-xl-10{grid-column-start:10}.grid-c-start-vp-xl-11{grid-column-start:11}.grid-c-start-vp-xl-12{grid-column-start:12}.hidden-vp-xl{display:none}.block-vp-xl{display:block}.grid-vp-xl{display:grid}.flex-vp-xl{display:flex}}@media(min-width: 1536px){.grid-c-vp-xxl-1{grid-column-end:span 1}.grid-c-vp-xxl-2{grid-column-end:span 2}.grid-c-vp-xxl-3{grid-column-end:span 3}.grid-c-vp-xxl-4{grid-column-end:span 4}.grid-c-vp-xxl-5{grid-column-end:span 5}.grid-c-vp-xxl-6{grid-column-end:span 6}.grid-c-vp-xxl-7{grid-column-end:span 7}.grid-c-vp-xxl-8{grid-column-end:span 8}.grid-c-vp-xxl-9{grid-column-end:span 9}.grid-c-vp-xxl-10{grid-column-end:span 10}.grid-c-vp-xxl-11{grid-column-end:span 11}.grid-c-vp-xxl-12{grid-column-end:span 12}.grid-c-start-vp-xxl-1{grid-column-start:1}.grid-c-start-vp-xxl-2{grid-column-start:2}.grid-c-start-vp-xxl-3{grid-column-start:3}.grid-c-start-vp-xxl-4{grid-column-start:4}.grid-c-start-vp-xxl-5{grid-column-start:5}.grid-c-start-vp-xxl-6{grid-column-start:6}.grid-c-start-vp-xxl-7{grid-column-start:7}.grid-c-start-vp-xxl-8{grid-column-start:8}.grid-c-start-vp-xxl-9{grid-column-start:9}.grid-c-start-vp-xxl-10{grid-column-start:10}.grid-c-start-vp-xxl-11{grid-column-start:11}.grid-c-start-vp-xxl-12{grid-column-start:12}.hidden-vp-xxl{display:none}.block-vp-xxl{display:block}.grid-vp-xxl{display:grid}.flex-vp-xxl{display:flex}}}@layer grid.fluid{.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-c-auto{grid-column:auto;width:auto}.grid-c-fluid{min-width:var(--grid-c-min-width, 200px);flex:1 1 var(--grid-c-min-width, 200px)}.grid-r-fluid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(50% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) / 2, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-fluid-3{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(33.333% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 2 / 3, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-fluid-4{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(25% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 3 / 4, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-ram{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-ram>*{grid-column:auto}.grid-r-intrinsic{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, max-content));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-even{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-dense{grid-auto-flow:dense}.grid-r-flexible{display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(var(--col-min, 200px), (100% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * (var(--col-count, 3) - 1)) / var(--col-count, 3), 1fr), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobergdesign/dot-grid",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support",
|
|
5
5
|
"main": "dist/grid.css",
|
|
6
6
|
"style": "dist/grid.css",
|
|
@@ -19,7 +19,9 @@
|
|
|
19
19
|
"dist",
|
|
20
20
|
"src",
|
|
21
21
|
"README.md",
|
|
22
|
-
"LICENSE"
|
|
22
|
+
"LICENSE",
|
|
23
|
+
"purgecss.config.js",
|
|
24
|
+
".purgecssrc.json"
|
|
23
25
|
],
|
|
24
26
|
"scripts": {
|
|
25
27
|
"build": "npm run build:css && npm run build:min",
|
|
@@ -41,7 +43,8 @@
|
|
|
41
43
|
"scss",
|
|
42
44
|
"modern-css",
|
|
43
45
|
"utilities",
|
|
44
|
-
"dot-grid"
|
|
46
|
+
"dot-grid",
|
|
47
|
+
"@lobergdesign/dot-grid"
|
|
45
48
|
],
|
|
46
49
|
"author": "Jean Loberg",
|
|
47
50
|
"license": "MIT",
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
// PurgeCSS Configuration for dot-grid
|
|
2
|
+
// This is an example configuration for end-users
|
|
3
|
+
// Copy this to your project root and customize as needed
|
|
4
|
+
|
|
5
|
+
module.exports = {
|
|
6
|
+
content: [
|
|
7
|
+
// Scan your source files for class names
|
|
8
|
+
'./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
|
|
9
|
+
'./public/**/*.html',
|
|
10
|
+
// Add more paths as needed
|
|
11
|
+
],
|
|
12
|
+
|
|
13
|
+
css: [
|
|
14
|
+
// Path to your compiled dot-grid CSS
|
|
15
|
+
'./node_modules/@lobergdesign/dot-grid/dist/grid.css',
|
|
16
|
+
// Or if you import the source:
|
|
17
|
+
// './path/to/compiled/css/with/dot-grid.css'
|
|
18
|
+
],
|
|
19
|
+
|
|
20
|
+
// Safelist: patterns that should never be purged
|
|
21
|
+
safelist: {
|
|
22
|
+
// Safelist all dot-grid core classes
|
|
23
|
+
standard: [
|
|
24
|
+
'grid-w',
|
|
25
|
+
'grid-r',
|
|
26
|
+
'no-gap',
|
|
27
|
+
'hidden',
|
|
28
|
+
],
|
|
29
|
+
|
|
30
|
+
// Safelist patterns using regex
|
|
31
|
+
greedy: [
|
|
32
|
+
// Grid column classes: grid-c-1 through grid-c-12
|
|
33
|
+
/^grid-c-\d{1,2}$/,
|
|
34
|
+
|
|
35
|
+
// Grid column start: grid-c-start-1 through grid-c-start-12
|
|
36
|
+
/^grid-c-start-\d{1,2}$/,
|
|
37
|
+
|
|
38
|
+
// Responsive column classes: grid-c-sm-6, grid-c-md-4, etc.
|
|
39
|
+
/^grid-c-(sm|md|lg|xl|xxl)-\d{1,2}$/,
|
|
40
|
+
|
|
41
|
+
// Responsive start: grid-c-start-sm-1, etc.
|
|
42
|
+
/^grid-c-start-(sm|md|lg|xl|xxl)-\d{1,2}$/,
|
|
43
|
+
|
|
44
|
+
// Viewport-based: grid-c-vp-md-6, etc.
|
|
45
|
+
/^grid-c-vp-(sm|md|lg|xl|xxl)-\d{1,2}$/,
|
|
46
|
+
/^grid-c-start-vp-(sm|md|lg|xl|xxl)-\d{1,2}$/,
|
|
47
|
+
|
|
48
|
+
// Subgrid classes
|
|
49
|
+
/^grid-[rc]-subgrid$/,
|
|
50
|
+
|
|
51
|
+
// Fluid row classes
|
|
52
|
+
/^grid-r-(fluid-[234]|ram|intrinsic|even|dense|flexible)$/,
|
|
53
|
+
|
|
54
|
+
// Grid auto classes
|
|
55
|
+
/^grid-auto-(fit|fill)$/,
|
|
56
|
+
|
|
57
|
+
// Placement utilities: place-t-l, place-c-c, etc.
|
|
58
|
+
/^place-[tcb]-[lcr]$/,
|
|
59
|
+
|
|
60
|
+
// Justify utilities
|
|
61
|
+
/^justify-(start|end|center|between|around|evenly|space-).*$/,
|
|
62
|
+
|
|
63
|
+
// Sizing utilities
|
|
64
|
+
/^grid-c-(min|max|fit|auto|fluid)$/,
|
|
65
|
+
|
|
66
|
+
// Display utilities (responsive)
|
|
67
|
+
/^(hidden|block|grid|flex)-(sm|md|lg|xl|xxl)$/,
|
|
68
|
+
/^(hidden|block|grid|flex)-vp-(sm|md|lg|xl|xxl)$/,
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
// Extract dynamic class names from JavaScript strings
|
|
73
|
+
defaultExtractor: (content) => {
|
|
74
|
+
// Match class names in strings, including dynamically generated ones
|
|
75
|
+
return content.match(/[A-Za-z0-9-_:/]+/g) || [];
|
|
76
|
+
},
|
|
77
|
+
};
|
package/src/grid.scss
CHANGED
|
@@ -1,23 +1,3 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* dot-grid v1.0.0
|
|
3
|
-
* A modern, flexible 12-column CSS Grid system
|
|
4
|
-
*
|
|
5
|
-
* Features:
|
|
6
|
-
* - Container queries for responsive layouts
|
|
7
|
-
* - Fluid/automatic layout utilities
|
|
8
|
-
* - Subgrid support
|
|
9
|
-
* - CSS custom properties for easy customization
|
|
10
|
-
* - Cascade layers for better specificity control
|
|
11
|
-
*
|
|
12
|
-
* (c) 2024 Jean Loberg
|
|
13
|
-
* Released under the MIT License
|
|
14
|
-
* https://github.com/lobergdesign/dot-grid
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
// ========================================
|
|
18
|
-
// Import all modules
|
|
19
|
-
// ========================================
|
|
20
|
-
|
|
21
1
|
@use 'variables';
|
|
22
2
|
@use 'base';
|
|
23
3
|
@use 'utilities';
|