@lobergdesign/dot-grid 3.0.0 → 3.1.2
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 +4 -71
- package/dist/grid.css +0 -5
- package/dist/grid.min.css +1 -1
- package/package.json +2 -1
- package/src/_variables.scss +8 -14
package/README.md
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
# dot-grid
|
|
2
2
|
|
|
3
|
-
A modern, flexible CSS Grid system with container queries,
|
|
3
|
+
A modern, flexible CSS Grid system with container queries, and subgrid support.
|
|
4
4
|
|
|
5
5
|
## ✨ Features
|
|
6
6
|
|
|
7
7
|
- **Modern CSS Grid** - Built on native CSS Grid (not flexbox or floats)
|
|
8
8
|
- **Container Queries** - Responsive classes based on container size, not viewport
|
|
9
|
-
- **Fluid Layouts** - Auto-responsive utilities that adapt without breakpoints
|
|
10
9
|
- **Subgrid Support** - Perfect alignment for nested grids
|
|
11
10
|
- **CSS Custom Properties** - Easy customization via CSS variables
|
|
12
11
|
- **Cascade Layers** - Better specificity control
|
|
13
12
|
- **Logical Properties** - Automatic RTL support
|
|
14
13
|
- **Zero JavaScript** - Pure CSS solution
|
|
15
|
-
-
|
|
14
|
+
- **~12KB / ~8KB minified** - Lightweight and performant
|
|
16
15
|
|
|
17
16
|
## 📦 Installation
|
|
18
17
|
|
|
@@ -157,55 +156,6 @@ Perfect alignment for nested grids:
|
|
|
157
156
|
</div>
|
|
158
157
|
```
|
|
159
158
|
|
|
160
|
-
### Fluid/Automatic Layouts
|
|
161
|
-
|
|
162
|
-
#### Auto-fit Grid
|
|
163
|
-
|
|
164
|
-
Automatically fits as many columns as possible:
|
|
165
|
-
|
|
166
|
-
```html
|
|
167
|
-
<div class="grid-auto-fit">
|
|
168
|
-
<div>Item 1</div>
|
|
169
|
-
<div>Item 2</div>
|
|
170
|
-
<div>Item 3</div>
|
|
171
|
-
<!-- Items wrap automatically when space runs out -->
|
|
172
|
-
</div>
|
|
173
|
-
|
|
174
|
-
<!-- Customize minimum column width -->
|
|
175
|
-
<div class="grid-auto-fit" style="--grid-auto-min: 300px">
|
|
176
|
-
<div>Wider items</div>
|
|
177
|
-
</div>
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
#### Fluid Row Patterns
|
|
181
|
-
|
|
182
|
-
```html
|
|
183
|
-
<!-- Adapts to 2 columns on larger screens -->
|
|
184
|
-
<div class="grid-r-fluid-2">
|
|
185
|
-
<div>Item 1</div>
|
|
186
|
-
<div>Item 2</div>
|
|
187
|
-
<div>Item 3</div>
|
|
188
|
-
</div>
|
|
189
|
-
|
|
190
|
-
<!-- Also available: grid-r-fluid-3, grid-r-fluid-4 -->
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
#### RAM Pattern (Repeat Auto Minmax)
|
|
194
|
-
|
|
195
|
-
```html
|
|
196
|
-
<div class="grid-r-ram" style="--col-min: 250px">
|
|
197
|
-
<div>Equal column 1</div>
|
|
198
|
-
<div>Equal column 2</div>
|
|
199
|
-
<div>Equal column 3</div>
|
|
200
|
-
</div>
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
#### Other Fluid Patterns
|
|
204
|
-
|
|
205
|
-
- `.grid-r-intrinsic` - Columns size based on content
|
|
206
|
-
- `.grid-r-even` - Even columns sharing space equally
|
|
207
|
-
- `.grid-r-dense` - Fills gaps in the grid (masonry style)
|
|
208
|
-
|
|
209
159
|
### Content Placement
|
|
210
160
|
|
|
211
161
|
Place items within a grid cell using `place-{vertical}-{horizontal}`. Sets `display: grid` + `align-items` + `justify-items` on the column.
|
|
@@ -307,10 +257,7 @@ You can also override the configuration at runtime using CSS Custom Properties.
|
|
|
307
257
|
/* Change container max width */
|
|
308
258
|
--grid-w-max-width: 1400px;
|
|
309
259
|
--grid-w-width: 95vw;
|
|
310
|
-
|
|
311
|
-
/* Customize fluid layouts */
|
|
312
|
-
--grid-auto-min: 300px; /* For grid-auto-fit */
|
|
313
|
-
--grid-c-min-width: 250px; /* For grid-c-fluid */
|
|
260
|
+
--grid-w-min-width: 36vw;
|
|
314
261
|
}
|
|
315
262
|
```
|
|
316
263
|
|
|
@@ -325,21 +272,7 @@ For older browsers, the basic grid system will still work. Container queries wil
|
|
|
325
272
|
|
|
326
273
|
## 📝 Examples
|
|
327
274
|
|
|
328
|
-
See
|
|
329
|
-
|
|
330
|
-
- `basic.html` - Core grid features
|
|
331
|
-
- `container-queries.html` - Container query responsive layouts
|
|
332
|
-
- `fluid-layout.html` - Auto-responsive fluid grids
|
|
333
|
-
- `subgrid.html` - Subgrid alignment examples
|
|
334
|
-
|
|
335
|
-
### New Features (Additive)
|
|
336
|
-
|
|
337
|
-
- Subgrid support
|
|
338
|
-
- Fluid layout utilities
|
|
339
|
-
- More gap utilities
|
|
340
|
-
- Aspect ratio utilities
|
|
341
|
-
- Display utilities
|
|
342
|
-
- CSS custom properties
|
|
275
|
+
See `/examples/example.html` for a complete interactive demo covering all features above.
|
|
343
276
|
|
|
344
277
|
## 📄 License
|
|
345
278
|
|
package/dist/grid.css
CHANGED
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--grid-columns: 12;
|
|
3
3
|
--grid-gap: clamp(1rem, 2vw, 2rem);
|
|
4
|
-
--grid-bp-sm: 640px;
|
|
5
|
-
--grid-bp-md: 768px;
|
|
6
|
-
--grid-bp-lg: 1024px;
|
|
7
|
-
--grid-bp-xl: 1280px;
|
|
8
|
-
--grid-bp-xxl: 1536px;
|
|
9
4
|
--grid-w-max-width: 190rem;
|
|
10
5
|
--grid-w-width: 90vw;
|
|
11
6
|
--grid-w-min-width: 36vw;
|
package/dist/grid.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--grid-columns: 12;--grid-gap: clamp(1rem, 2vw, 2rem);--grid-
|
|
1
|
+
:root{--grid-columns: 12;--grid-gap: clamp(1rem, 2vw, 2rem);--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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobergdesign/dot-grid",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.2",
|
|
4
4
|
"description": "A modern, flexible CSS Grid system with container queries, and subgrid support",
|
|
5
5
|
"main": "dist/grid.css",
|
|
6
6
|
"style": "dist/grid.css",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"sass": "./src/grid.scss",
|
|
12
12
|
"default": "./dist/grid.css"
|
|
13
13
|
},
|
|
14
|
+
"./scss": "./src/grid.scss",
|
|
14
15
|
"./dist/*": "./dist/*",
|
|
15
16
|
"./src/*": "./src/*",
|
|
16
17
|
"./min": "./dist/grid.min.css"
|
package/src/_variables.scss
CHANGED
|
@@ -15,24 +15,18 @@ $breakpoints: (
|
|
|
15
15
|
$grid-columns: 12 !default;
|
|
16
16
|
$grid-gap-default: clamp(1rem, 2vw, 2rem) !default;
|
|
17
17
|
|
|
18
|
+
// Container configuration
|
|
19
|
+
$grid-w-max-width: 190rem !default;
|
|
20
|
+
$grid-w-width: 90vw !default;
|
|
21
|
+
$grid-w-min-width: 36vw !default;
|
|
22
|
+
|
|
18
23
|
// CSS Custom Properties
|
|
19
|
-
// These will be output as CSS variables for user customization
|
|
20
24
|
:root {
|
|
21
|
-
// Grid
|
|
22
25
|
--grid-columns: #{$grid-columns};
|
|
23
26
|
--grid-gap: #{$grid-gap-default};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--grid-
|
|
27
|
-
--grid-bp-md: 768px;
|
|
28
|
-
--grid-bp-lg: 1024px;
|
|
29
|
-
--grid-bp-xl: 1280px;
|
|
30
|
-
--grid-bp-xxl: 1536px;
|
|
31
|
-
|
|
32
|
-
// Container
|
|
33
|
-
--grid-w-max-width: 190rem;
|
|
34
|
-
--grid-w-width: 90vw;
|
|
35
|
-
--grid-w-min-width: 36vw;
|
|
27
|
+
--grid-w-max-width: #{$grid-w-max-width};
|
|
28
|
+
--grid-w-width: #{$grid-w-width};
|
|
29
|
+
--grid-w-min-width: #{$grid-w-min-width};
|
|
36
30
|
}
|
|
37
31
|
|
|
38
32
|
// Helper function to get breakpoint value
|