@lobergdesign/dot-grid 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -35
- package/dist/grid.css +3 -6
- package/dist/grid.min.css +1 -1
- package/package.json +1 -1
- package/src/_utilities.scss +3 -6
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# dot-grid
|
|
2
2
|
|
|
3
|
-
A modern, flexible
|
|
3
|
+
A modern, flexible CSS Grid system with container queries, fluid layouts, and subgrid support.
|
|
4
4
|
|
|
5
5
|
## ✨ Features
|
|
6
6
|
|
|
@@ -58,8 +58,6 @@ Add this to your project's `.vscode/settings.json`:
|
|
|
58
58
|
}
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
Once configured, typing `grid-c-` or `place-` in any `class` attribute will show completions for all dot-grid classes.
|
|
62
|
-
|
|
63
61
|
> **Plain HTML projects** — if you link the CSS via `<link>`, VS Code picks up class names automatically with no extra config.
|
|
64
62
|
|
|
65
63
|
## 🚀 Quick Start
|
|
@@ -76,19 +74,6 @@ Once configured, typing `grid-c-` or `place-` in any `class` attribute will show
|
|
|
76
74
|
</div>
|
|
77
75
|
```
|
|
78
76
|
|
|
79
|
-
### Fluid/Auto Grid (No Breakpoints Needed!)
|
|
80
|
-
|
|
81
|
-
```html
|
|
82
|
-
<div class="grid-w">
|
|
83
|
-
<div class="grid-auto-fit">
|
|
84
|
-
<div>Card 1</div>
|
|
85
|
-
<div>Card 2</div>
|
|
86
|
-
<div>Card 3</div>
|
|
87
|
-
<!-- Automatically wraps based on available space -->
|
|
88
|
-
</div>
|
|
89
|
-
</div>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
77
|
## 📖 Documentation
|
|
93
78
|
|
|
94
79
|
### Core Classes
|
|
@@ -223,21 +208,25 @@ Automatically fits as many columns as possible:
|
|
|
223
208
|
|
|
224
209
|
### Content Placement
|
|
225
210
|
|
|
226
|
-
|
|
211
|
+
Place items within a grid cell using `place-{vertical}-{horizontal}`. Sets `display: grid` + `align-items` + `justify-items` on the column.
|
|
227
212
|
|
|
228
213
|
```html
|
|
229
|
-
|
|
230
|
-
<div class="grid-c-
|
|
231
|
-
<div class="grid-c-
|
|
232
|
-
<div class="grid-c-6 place-b-r">Bottom Right</div>
|
|
214
|
+
<div class="grid-c-4 place-t-l">Top left</div>
|
|
215
|
+
<div class="grid-c-4 place-c-c">Center center</div>
|
|
216
|
+
<div class="grid-c-4 place-b-r">Bottom right</div>
|
|
233
217
|
```
|
|
234
218
|
|
|
235
|
-
|
|
236
|
-
|
|
219
|
+
All 9 positions:
|
|
220
|
+
|
|
221
|
+
| | `l` (start) | `c` (center) | `r` (end) |
|
|
222
|
+
|--------------|-------------|--------------|-------------|
|
|
223
|
+
| `t` (top) | `.place-t-l` | `.place-t-c` | `.place-t-r` |
|
|
224
|
+
| `c` (center) | `.place-c-l` | `.place-c-c` | `.place-c-r` |
|
|
225
|
+
| `b` (bottom) | `.place-b-l` | `.place-b-c` | `.place-b-r` |
|
|
237
226
|
|
|
238
227
|
### Flexbox Utilities
|
|
239
228
|
|
|
240
|
-
|
|
229
|
+
Sets `display: flex` and controls how children are distributed along the main axis.
|
|
241
230
|
|
|
242
231
|
```html
|
|
243
232
|
<div class="grid-c-12 justify-between">
|
|
@@ -246,28 +235,44 @@ For flex-based alignment within columns:
|
|
|
246
235
|
</div>
|
|
247
236
|
```
|
|
248
237
|
|
|
249
|
-
|
|
238
|
+
| Class | `justify-content` | Use when |
|
|
239
|
+
|---|---|---|
|
|
240
|
+
| `.justify-start` | `flex-start` | Pack items to the left |
|
|
241
|
+
| `.justify-end` | `flex-end` | Pack items to the right |
|
|
242
|
+
| `.justify-center` | `center` | Center items |
|
|
243
|
+
| `.justify-between` | `space-between` | First/last flush to edges, equal gaps between |
|
|
244
|
+
| `.justify-around` | `space-around` | Equal space around each item (half-size gaps at edges) |
|
|
245
|
+
| `.justify-evenly` | `space-evenly` | Equal space between all gaps including edges |
|
|
250
246
|
|
|
251
247
|
### Display Utilities
|
|
252
248
|
|
|
253
|
-
|
|
254
|
-
<!-- Static -->
|
|
255
|
-
<div class="hidden">Always hidden</div>
|
|
249
|
+
Container-query responsive show/hide. Activates when the enclosing `.grid-r` container reaches the given breakpoint.
|
|
256
250
|
|
|
257
|
-
|
|
258
|
-
<div class="hidden-md">Hidden on
|
|
259
|
-
<div class="block-lg">
|
|
251
|
+
```html
|
|
252
|
+
<div class="hidden-md">Hidden on md+ containers</div>
|
|
253
|
+
<div class="block-lg">Visible as block on lg+ containers</div>
|
|
254
|
+
<div class="flex-xl">Visible as flex on xl+ containers</div>
|
|
255
|
+
<div class="grid-xxl">Visible as grid on xxl+ containers</div>
|
|
260
256
|
```
|
|
261
257
|
|
|
258
|
+
Available suffixes: `-sm`, `-md`, `-lg`, `-xl`, `-xxl`
|
|
259
|
+
|
|
262
260
|
### Sizing Utilities
|
|
263
261
|
|
|
262
|
+
Opt a column out of the normal span system and let its content dictate width. All three set `grid-column: auto`.
|
|
263
|
+
|
|
264
264
|
```html
|
|
265
|
-
<div class="grid-c-min">Shrinks to
|
|
266
|
-
<div class="grid-c-max">Expands to
|
|
267
|
-
<div class="grid-c-fit">
|
|
268
|
-
<div class="grid-c-auto">Auto-sized</div>
|
|
265
|
+
<div class="grid-c-min">Shrinks to the narrowest the content allows</div>
|
|
266
|
+
<div class="grid-c-max">Expands to the widest the content could be (no wrapping)</div>
|
|
267
|
+
<div class="grid-c-fit">Like max-content but capped at the available space</div>
|
|
269
268
|
```
|
|
270
269
|
|
|
270
|
+
| Class | `width` value | Best for |
|
|
271
|
+
|---|---|---|
|
|
272
|
+
| `.grid-c-min` | `min-content` | Labels, short tags |
|
|
273
|
+
| `.grid-c-max` | `max-content` | Content you never want to wrap |
|
|
274
|
+
| `.grid-c-fit` | `fit-content` | Content that should fill but not overflow |
|
|
275
|
+
|
|
271
276
|
## 🎨 Customization
|
|
272
277
|
|
|
273
278
|
Override CSS custom properties in your own stylesheet:
|
package/dist/grid.css
CHANGED
|
@@ -178,18 +178,15 @@
|
|
|
178
178
|
display: flex;
|
|
179
179
|
justify-content: flex-end;
|
|
180
180
|
}
|
|
181
|
-
.justify-center
|
|
182
|
-
.justify-space-center {
|
|
181
|
+
.justify-center {
|
|
183
182
|
display: flex;
|
|
184
183
|
justify-content: center;
|
|
185
184
|
}
|
|
186
|
-
.justify-between
|
|
187
|
-
.justify-space-between {
|
|
185
|
+
.justify-between {
|
|
188
186
|
display: flex;
|
|
189
187
|
justify-content: space-between;
|
|
190
188
|
}
|
|
191
|
-
.justify-around
|
|
192
|
-
.justify-space-around {
|
|
189
|
+
.justify-around {
|
|
193
190
|
display: flex;
|
|
194
191
|
justify-content: space-around;
|
|
195
192
|
}
|
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: 190rem;--grid-w-width: 90vw;--grid-w-min-width: 36vw}@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:clamp(var(--grid-w-min-width),var(--grid-w-width),var(--grid-w-max-width));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
|
|
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: 90vw;--grid-w-min-width: 36vw}@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:clamp(var(--grid-w-min-width),var(--grid-w-width),var(--grid-w-max-width));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{display:flex;justify-content:center}.justify-between{display:flex;justify-content:space-between}.justify-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}}@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}}}
|
package/package.json
CHANGED
package/src/_utilities.scss
CHANGED
|
@@ -81,18 +81,15 @@
|
|
|
81
81
|
@include justify(flex-end);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
.justify-center
|
|
85
|
-
.justify-space-center {
|
|
84
|
+
.justify-center {
|
|
86
85
|
@include justify(center);
|
|
87
86
|
}
|
|
88
87
|
|
|
89
|
-
.justify-between
|
|
90
|
-
.justify-space-between {
|
|
88
|
+
.justify-between {
|
|
91
89
|
@include justify(space-between);
|
|
92
90
|
}
|
|
93
91
|
|
|
94
|
-
.justify-around
|
|
95
|
-
.justify-space-around {
|
|
92
|
+
.justify-around {
|
|
96
93
|
@include justify(space-around);
|
|
97
94
|
}
|
|
98
95
|
|