@lobergdesign/dot-grid 2.2.0 → 3.1.1
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 +21 -21
- package/dist/grid.css +0 -5
- package/dist/grid.min.css +1 -1
- package/package.json +2 -1
- package/src/_variables.scss +11 -17
- package/src/grid.scss +1 -0
package/README.md
CHANGED
|
@@ -275,14 +275,33 @@ Opt a column out of the normal span system and let its content dictate width. Al
|
|
|
275
275
|
|
|
276
276
|
## 🎨 Customization
|
|
277
277
|
|
|
278
|
-
|
|
278
|
+
### Build-time (SCSS)
|
|
279
|
+
If you are using SCSS, you can customize the grid and **generate all utility classes** for your specific needs (e.g., an 18-column grid).
|
|
280
|
+
|
|
281
|
+
```scss
|
|
282
|
+
// main.scss
|
|
283
|
+
@use "@lobergdesign/dot-grid" with (
|
|
284
|
+
$grid-columns: 18, // Generates .grid-c-1 through .grid-c-18
|
|
285
|
+
$grid-gap-default: 2rem, // Changes the default gap
|
|
286
|
+
$breakpoints: ( // Override all breakpoints
|
|
287
|
+
sm: 576px,
|
|
288
|
+
md: 768px,
|
|
289
|
+
lg: 992px,
|
|
290
|
+
xl: 1200px,
|
|
291
|
+
xxl: 1600px,
|
|
292
|
+
)
|
|
293
|
+
);
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
### Runtime (CSS)
|
|
297
|
+
You can also override the configuration at runtime using CSS Custom Properties. Note that this changes the grid layout but **does not generate new utility classes** if they weren't created at build-time.
|
|
279
298
|
|
|
280
299
|
```css
|
|
281
300
|
:root {
|
|
282
301
|
/* Change default gap */
|
|
283
302
|
--grid-gap: 1.5rem;
|
|
284
303
|
|
|
285
|
-
/* Change column count (affects all calculations) */
|
|
304
|
+
/* Change column count (affects all grid calculations) */
|
|
286
305
|
--grid-columns: 16;
|
|
287
306
|
|
|
288
307
|
/* Change container max width */
|
|
@@ -295,25 +314,6 @@ Override CSS custom properties in your own stylesheet:
|
|
|
295
314
|
}
|
|
296
315
|
```
|
|
297
316
|
|
|
298
|
-
### Using SCSS Source
|
|
299
|
-
|
|
300
|
-
For advanced customization, import the SCSS source:
|
|
301
|
-
|
|
302
|
-
```scss
|
|
303
|
-
// Override variables before import
|
|
304
|
-
$grid-columns: 16;
|
|
305
|
-
$grid-gap-default: 2rem;
|
|
306
|
-
$breakpoints: (
|
|
307
|
-
sm: 576px,
|
|
308
|
-
md: 768px,
|
|
309
|
-
lg: 992px,
|
|
310
|
-
xl: 1200px,
|
|
311
|
-
xxl: 1600px,
|
|
312
|
-
);
|
|
313
|
-
|
|
314
|
-
@use '@lobergdesign/dot-grid/src/grid';
|
|
315
|
-
```
|
|
316
|
-
|
|
317
317
|
## 🌐 Browser Support
|
|
318
318
|
|
|
319
319
|
- **Container Queries:** Chrome 105+, Safari 16+, Firefox 110+ (Feb 2023+)
|
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
|
+
"version": "3.1.1",
|
|
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
|
@@ -9,30 +9,24 @@ $breakpoints: (
|
|
|
9
9
|
lg: 1024px,
|
|
10
10
|
xl: 1280px,
|
|
11
11
|
xxl: 1536px,
|
|
12
|
-
);
|
|
12
|
+
) !default;
|
|
13
13
|
|
|
14
14
|
// Grid configuration
|
|
15
|
-
$grid-columns: 12;
|
|
16
|
-
$grid-gap-default: clamp(1rem, 2vw, 2rem);
|
|
15
|
+
$grid-columns: 12 !default;
|
|
16
|
+
$grid-gap-default: clamp(1rem, 2vw, 2rem) !default;
|
|
17
|
+
|
|
18
|
+
// Container configuration
|
|
19
|
+
$grid-w-max-width: 190rem !default;
|
|
20
|
+
$grid-w-width: 90vw !default;
|
|
21
|
+
$grid-w-min-width: 36vw !default;
|
|
17
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
|
package/src/grid.scss
CHANGED