@lobergdesign/dot-grid 1.0.2 → 1.0.4
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 +70 -22
- package/dist/grid.css +4 -4
- package/dist/grid.min.css +1 -1
- package/package.json +4 -2
- package/purgecss.config.js +77 -0
- package/src/_variables.scss +3 -3
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
|
@@ -263,6 +263,76 @@ Available: `.justify-start`, `.justify-end`, `.justify-center`, `.justify-betwee
|
|
|
263
263
|
<div class="grid-c-auto">Auto-sized</div>
|
|
264
264
|
```
|
|
265
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
|
+
|
|
266
336
|
## 🎨 Customization
|
|
267
337
|
|
|
268
338
|
Override CSS custom properties in your own stylesheet:
|
|
@@ -322,28 +392,6 @@ See the `/examples` directory for complete working examples:
|
|
|
322
392
|
- `fluid-layout.html` - Auto-responsive fluid grids
|
|
323
393
|
- `subgrid.html` - Subgrid alignment examples
|
|
324
394
|
|
|
325
|
-
## 🆚 Migration from Original CodePen
|
|
326
|
-
|
|
327
|
-
### Breaking Changes
|
|
328
|
-
|
|
329
|
-
1. **Class names updated** - All core classes have been renamed for better clarity:
|
|
330
|
-
|
|
331
|
-
- `.wrap` → `.grid-w`
|
|
332
|
-
- `.row` → `.grid-r`
|
|
333
|
-
- `.col-*` → `.grid-c-*`
|
|
334
|
-
- **Migration:** Update all class names in your HTML
|
|
335
|
-
|
|
336
|
-
2. **Container queries by default** - Responsive classes now use `@container` instead of `@media`
|
|
337
|
-
|
|
338
|
-
- **Migration:** Use `.grid-c-vp-{size}-{num}` if you need viewport-based behavior
|
|
339
|
-
|
|
340
|
-
3. **Placement utilities fixed** - `align-items: top` → `align-items: start`
|
|
341
|
-
|
|
342
|
-
- **Migration:** No action needed, now uses correct CSS values
|
|
343
|
-
|
|
344
|
-
4. **New breakpoints** - Added `xxl` (1536px), adjusted `lg` from 1025px to 1024px
|
|
345
|
-
- **Migration:** Update breakpoints in your HTML if using exact pixel values
|
|
346
|
-
|
|
347
395
|
### New Features (Additive)
|
|
348
396
|
|
|
349
397
|
- Subgrid support
|
package/dist/grid.css
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
--grid-bp-lg: 1024px;
|
|
7
7
|
--grid-bp-xl: 1280px;
|
|
8
8
|
--grid-bp-xxl: 1536px;
|
|
9
|
-
--grid-w-max-width:
|
|
10
|
-
--grid-w-width:
|
|
9
|
+
--grid-w-max-width: 190rem;
|
|
10
|
+
--grid-w-width: 80vw;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
@layer grid.base, grid.utilities, grid.responsive, grid.fluid;
|
|
14
14
|
@layer grid.base {
|
|
15
15
|
.grid-w {
|
|
16
|
-
width: var(--grid-w-width,
|
|
17
|
-
max-width: var(--grid-w-max-width,
|
|
16
|
+
width: var(--grid-w-width, 80vw);
|
|
17
|
+
max-width: var(--grid-w-max-width, 190rem);
|
|
18
18
|
margin-inline: auto;
|
|
19
19
|
}
|
|
20
20
|
.grid-r {
|
package/dist/grid.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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))}}
|
|
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: 190rem;--grid-w-width: 80vw}@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:var(--grid-w-width, 80vw);max-width:var(--grid-w-max-width, 190rem);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.4",
|
|
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",
|
|
@@ -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/_variables.scss
CHANGED
|
@@ -8,7 +8,7 @@ $breakpoints: (
|
|
|
8
8
|
md: 768px,
|
|
9
9
|
lg: 1024px,
|
|
10
10
|
xl: 1280px,
|
|
11
|
-
xxl: 1536px
|
|
11
|
+
xxl: 1536px,
|
|
12
12
|
);
|
|
13
13
|
|
|
14
14
|
// Grid configuration
|
|
@@ -16,8 +16,8 @@ $grid-columns: 12;
|
|
|
16
16
|
$grid-gap-default: clamp(1rem, 2vw, 2rem);
|
|
17
17
|
|
|
18
18
|
// Wrapper/Container
|
|
19
|
-
$grid-w-max-width:
|
|
20
|
-
$grid-w-width:
|
|
19
|
+
$grid-w-max-width: 190rem;
|
|
20
|
+
$grid-w-width: 80vw;
|
|
21
21
|
|
|
22
22
|
// CSS Custom Properties
|
|
23
23
|
// These will be output as CSS variables for user customization
|