@lobergdesign/dot-grid 1.0.0 → 1.0.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 +69 -94
- package/dist/grid.css +352 -572
- package/dist/grid.min.css +1 -71
- package/package.json +3 -2
- package/src/_base.scss +12 -12
- package/src/_fluid.scss +35 -22
- package/src/_responsive.scss +18 -46
- package/src/_utilities.scss +6 -80
- package/src/_variables.scss +4 -27
- package/src/grid.scss +18 -38
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-wrap-max-width: 180rem;--grid-wrap-width: 90vw;--grid-gap-none: 0;--grid-gap-xs: 0.5rem;--grid-gap-sm: 1rem;--grid-gap-md: clamp(1rem, 2vw, 2rem);--grid-gap-lg: 3rem;--grid-gap-xl: 4rem}/*!
|
|
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{.wrap{width:var(--grid-wrap-width, 90vw);max-width:var(--grid-wrap-max-width, 180rem);margin-inline:auto}.row{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}.row>*{grid-column-end:span var(--grid-columns, 12)}.col{grid-column-end:span var(--grid-columns, 12)}.col-1{grid-column-end:span 1}.col-2{grid-column-end:span 2}.col-3{grid-column-end:span 3}.col-4{grid-column-end:span 4}.col-5{grid-column-end:span 5}.col-6{grid-column-end:span 6}.col-7{grid-column-end:span 7}.col-8{grid-column-end:span 8}.col-9{grid-column-end:span 9}.col-10{grid-column-end:span 10}.col-11{grid-column-end:span 11}.col-12{grid-column-end:span 12}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}.row-subgrid{display:grid;grid-template-columns:subgrid;grid-column:1/-1}.row-subgrid:not([style*=gap]){gap:inherit}.col-subgrid{display:grid;grid-template-rows:subgrid;grid-row:1/-1}.row .row{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{.gap-none,.no-gap{gap:var(--grid-gap-none, 0) !important}.gap-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap,.gap-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-xl{gap:var(--grid-gap-xl, 4rem) !important}.gap-b-none,.no-gap-b{row-gap:0 !important}.gap-sides-none,.no-gap-sides{column-gap:0 !important}.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}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.aspect-4-3{aspect-ratio:4/3}.aspect-21-9{aspect-ratio:21/9}.aspect-auto{aspect-ratio:auto}.col-min{width:min-content;grid-column:auto}.col-max{width:max-content;grid-column:auto}.col-fit{width:fit-content;grid-column:auto}.hidden{display:none !important}.order-first{order:-1}.order-last{order:999}.order-none{order:0}}/*!
|
|
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){.col-sm-1{grid-column-end:span 1}.col-sm-2{grid-column-end:span 2}.col-sm-3{grid-column-end:span 3}.col-sm-4{grid-column-end:span 4}.col-sm-5{grid-column-end:span 5}.col-sm-6{grid-column-end:span 6}.col-sm-7{grid-column-end:span 7}.col-sm-8{grid-column-end:span 8}.col-sm-9{grid-column-end:span 9}.col-sm-10{grid-column-end:span 10}.col-sm-11{grid-column-end:span 11}.col-sm-12{grid-column-end:span 12}.col-start-sm-1{grid-column-start:1}.col-start-sm-2{grid-column-start:2}.col-start-sm-3{grid-column-start:3}.col-start-sm-4{grid-column-start:4}.col-start-sm-5{grid-column-start:5}.col-start-sm-6{grid-column-start:6}.col-start-sm-7{grid-column-start:7}.col-start-sm-8{grid-column-start:8}.col-start-sm-9{grid-column-start:9}.col-start-sm-10{grid-column-start:10}.col-start-sm-11{grid-column-start:11}.col-start-sm-12{grid-column-start:12}.gap-sm-none{gap:0 !important}.gap-sm-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-sm-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-sm-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-sm-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-sm-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-sm{display:none !important}.block-sm{display:block !important}.grid-sm{display:grid !important}.flex-sm{display:flex !important}}@container grid (min-width: 768px){.col-md-1{grid-column-end:span 1}.col-md-2{grid-column-end:span 2}.col-md-3{grid-column-end:span 3}.col-md-4{grid-column-end:span 4}.col-md-5{grid-column-end:span 5}.col-md-6{grid-column-end:span 6}.col-md-7{grid-column-end:span 7}.col-md-8{grid-column-end:span 8}.col-md-9{grid-column-end:span 9}.col-md-10{grid-column-end:span 10}.col-md-11{grid-column-end:span 11}.col-md-12{grid-column-end:span 12}.col-start-md-1{grid-column-start:1}.col-start-md-2{grid-column-start:2}.col-start-md-3{grid-column-start:3}.col-start-md-4{grid-column-start:4}.col-start-md-5{grid-column-start:5}.col-start-md-6{grid-column-start:6}.col-start-md-7{grid-column-start:7}.col-start-md-8{grid-column-start:8}.col-start-md-9{grid-column-start:9}.col-start-md-10{grid-column-start:10}.col-start-md-11{grid-column-start:11}.col-start-md-12{grid-column-start:12}.gap-md-none{gap:0 !important}.gap-md-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-md-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-md-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-md-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-md-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-md{display:none !important}.block-md{display:block !important}.grid-md{display:grid !important}.flex-md{display:flex !important}}@container grid (min-width: 1024px){.col-lg-1{grid-column-end:span 1}.col-lg-2{grid-column-end:span 2}.col-lg-3{grid-column-end:span 3}.col-lg-4{grid-column-end:span 4}.col-lg-5{grid-column-end:span 5}.col-lg-6{grid-column-end:span 6}.col-lg-7{grid-column-end:span 7}.col-lg-8{grid-column-end:span 8}.col-lg-9{grid-column-end:span 9}.col-lg-10{grid-column-end:span 10}.col-lg-11{grid-column-end:span 11}.col-lg-12{grid-column-end:span 12}.col-start-lg-1{grid-column-start:1}.col-start-lg-2{grid-column-start:2}.col-start-lg-3{grid-column-start:3}.col-start-lg-4{grid-column-start:4}.col-start-lg-5{grid-column-start:5}.col-start-lg-6{grid-column-start:6}.col-start-lg-7{grid-column-start:7}.col-start-lg-8{grid-column-start:8}.col-start-lg-9{grid-column-start:9}.col-start-lg-10{grid-column-start:10}.col-start-lg-11{grid-column-start:11}.col-start-lg-12{grid-column-start:12}.gap-lg-none{gap:0 !important}.gap-lg-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-lg-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-lg-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-lg-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-lg-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-lg{display:none !important}.block-lg{display:block !important}.grid-lg{display:grid !important}.flex-lg{display:flex !important}}@container grid (min-width: 1280px){.col-xl-1{grid-column-end:span 1}.col-xl-2{grid-column-end:span 2}.col-xl-3{grid-column-end:span 3}.col-xl-4{grid-column-end:span 4}.col-xl-5{grid-column-end:span 5}.col-xl-6{grid-column-end:span 6}.col-xl-7{grid-column-end:span 7}.col-xl-8{grid-column-end:span 8}.col-xl-9{grid-column-end:span 9}.col-xl-10{grid-column-end:span 10}.col-xl-11{grid-column-end:span 11}.col-xl-12{grid-column-end:span 12}.col-start-xl-1{grid-column-start:1}.col-start-xl-2{grid-column-start:2}.col-start-xl-3{grid-column-start:3}.col-start-xl-4{grid-column-start:4}.col-start-xl-5{grid-column-start:5}.col-start-xl-6{grid-column-start:6}.col-start-xl-7{grid-column-start:7}.col-start-xl-8{grid-column-start:8}.col-start-xl-9{grid-column-start:9}.col-start-xl-10{grid-column-start:10}.col-start-xl-11{grid-column-start:11}.col-start-xl-12{grid-column-start:12}.gap-xl-none{gap:0 !important}.gap-xl-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-xl-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-xl-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-xl-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-xl-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-xl{display:none !important}.block-xl{display:block !important}.grid-xl{display:grid !important}.flex-xl{display:flex !important}}@container grid (min-width: 1536px){.col-xxl-1{grid-column-end:span 1}.col-xxl-2{grid-column-end:span 2}.col-xxl-3{grid-column-end:span 3}.col-xxl-4{grid-column-end:span 4}.col-xxl-5{grid-column-end:span 5}.col-xxl-6{grid-column-end:span 6}.col-xxl-7{grid-column-end:span 7}.col-xxl-8{grid-column-end:span 8}.col-xxl-9{grid-column-end:span 9}.col-xxl-10{grid-column-end:span 10}.col-xxl-11{grid-column-end:span 11}.col-xxl-12{grid-column-end:span 12}.col-start-xxl-1{grid-column-start:1}.col-start-xxl-2{grid-column-start:2}.col-start-xxl-3{grid-column-start:3}.col-start-xxl-4{grid-column-start:4}.col-start-xxl-5{grid-column-start:5}.col-start-xxl-6{grid-column-start:6}.col-start-xxl-7{grid-column-start:7}.col-start-xxl-8{grid-column-start:8}.col-start-xxl-9{grid-column-start:9}.col-start-xxl-10{grid-column-start:10}.col-start-xxl-11{grid-column-start:11}.col-start-xxl-12{grid-column-start:12}.gap-xxl-none{gap:0 !important}.gap-xxl-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-xxl-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-xxl-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-xxl-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-xxl-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-xxl{display:none !important}.block-xxl{display:block !important}.grid-xxl{display:grid !important}.flex-xxl{display:flex !important}}@media(min-width: 640px){.col-vp-sm-1{grid-column-end:span 1}.col-vp-sm-2{grid-column-end:span 2}.col-vp-sm-3{grid-column-end:span 3}.col-vp-sm-4{grid-column-end:span 4}.col-vp-sm-5{grid-column-end:span 5}.col-vp-sm-6{grid-column-end:span 6}.col-vp-sm-7{grid-column-end:span 7}.col-vp-sm-8{grid-column-end:span 8}.col-vp-sm-9{grid-column-end:span 9}.col-vp-sm-10{grid-column-end:span 10}.col-vp-sm-11{grid-column-end:span 11}.col-vp-sm-12{grid-column-end:span 12}.col-start-vp-sm-1{grid-column-start:1}.col-start-vp-sm-2{grid-column-start:2}.col-start-vp-sm-3{grid-column-start:3}.col-start-vp-sm-4{grid-column-start:4}.col-start-vp-sm-5{grid-column-start:5}.col-start-vp-sm-6{grid-column-start:6}.col-start-vp-sm-7{grid-column-start:7}.col-start-vp-sm-8{grid-column-start:8}.col-start-vp-sm-9{grid-column-start:9}.col-start-vp-sm-10{grid-column-start:10}.col-start-vp-sm-11{grid-column-start:11}.col-start-vp-sm-12{grid-column-start:12}.hidden-vp-sm{display:none !important}.block-vp-sm{display:block !important}.grid-vp-sm{display:grid !important}.flex-vp-sm{display:flex !important}}@media(min-width: 768px){.col-vp-md-1{grid-column-end:span 1}.col-vp-md-2{grid-column-end:span 2}.col-vp-md-3{grid-column-end:span 3}.col-vp-md-4{grid-column-end:span 4}.col-vp-md-5{grid-column-end:span 5}.col-vp-md-6{grid-column-end:span 6}.col-vp-md-7{grid-column-end:span 7}.col-vp-md-8{grid-column-end:span 8}.col-vp-md-9{grid-column-end:span 9}.col-vp-md-10{grid-column-end:span 10}.col-vp-md-11{grid-column-end:span 11}.col-vp-md-12{grid-column-end:span 12}.col-start-vp-md-1{grid-column-start:1}.col-start-vp-md-2{grid-column-start:2}.col-start-vp-md-3{grid-column-start:3}.col-start-vp-md-4{grid-column-start:4}.col-start-vp-md-5{grid-column-start:5}.col-start-vp-md-6{grid-column-start:6}.col-start-vp-md-7{grid-column-start:7}.col-start-vp-md-8{grid-column-start:8}.col-start-vp-md-9{grid-column-start:9}.col-start-vp-md-10{grid-column-start:10}.col-start-vp-md-11{grid-column-start:11}.col-start-vp-md-12{grid-column-start:12}.hidden-vp-md{display:none !important}.block-vp-md{display:block !important}.grid-vp-md{display:grid !important}.flex-vp-md{display:flex !important}}@media(min-width: 1024px){.col-vp-lg-1{grid-column-end:span 1}.col-vp-lg-2{grid-column-end:span 2}.col-vp-lg-3{grid-column-end:span 3}.col-vp-lg-4{grid-column-end:span 4}.col-vp-lg-5{grid-column-end:span 5}.col-vp-lg-6{grid-column-end:span 6}.col-vp-lg-7{grid-column-end:span 7}.col-vp-lg-8{grid-column-end:span 8}.col-vp-lg-9{grid-column-end:span 9}.col-vp-lg-10{grid-column-end:span 10}.col-vp-lg-11{grid-column-end:span 11}.col-vp-lg-12{grid-column-end:span 12}.col-start-vp-lg-1{grid-column-start:1}.col-start-vp-lg-2{grid-column-start:2}.col-start-vp-lg-3{grid-column-start:3}.col-start-vp-lg-4{grid-column-start:4}.col-start-vp-lg-5{grid-column-start:5}.col-start-vp-lg-6{grid-column-start:6}.col-start-vp-lg-7{grid-column-start:7}.col-start-vp-lg-8{grid-column-start:8}.col-start-vp-lg-9{grid-column-start:9}.col-start-vp-lg-10{grid-column-start:10}.col-start-vp-lg-11{grid-column-start:11}.col-start-vp-lg-12{grid-column-start:12}.hidden-vp-lg{display:none !important}.block-vp-lg{display:block !important}.grid-vp-lg{display:grid !important}.flex-vp-lg{display:flex !important}}@media(min-width: 1280px){.col-vp-xl-1{grid-column-end:span 1}.col-vp-xl-2{grid-column-end:span 2}.col-vp-xl-3{grid-column-end:span 3}.col-vp-xl-4{grid-column-end:span 4}.col-vp-xl-5{grid-column-end:span 5}.col-vp-xl-6{grid-column-end:span 6}.col-vp-xl-7{grid-column-end:span 7}.col-vp-xl-8{grid-column-end:span 8}.col-vp-xl-9{grid-column-end:span 9}.col-vp-xl-10{grid-column-end:span 10}.col-vp-xl-11{grid-column-end:span 11}.col-vp-xl-12{grid-column-end:span 12}.col-start-vp-xl-1{grid-column-start:1}.col-start-vp-xl-2{grid-column-start:2}.col-start-vp-xl-3{grid-column-start:3}.col-start-vp-xl-4{grid-column-start:4}.col-start-vp-xl-5{grid-column-start:5}.col-start-vp-xl-6{grid-column-start:6}.col-start-vp-xl-7{grid-column-start:7}.col-start-vp-xl-8{grid-column-start:8}.col-start-vp-xl-9{grid-column-start:9}.col-start-vp-xl-10{grid-column-start:10}.col-start-vp-xl-11{grid-column-start:11}.col-start-vp-xl-12{grid-column-start:12}.hidden-vp-xl{display:none !important}.block-vp-xl{display:block !important}.grid-vp-xl{display:grid !important}.flex-vp-xl{display:flex !important}}@media(min-width: 1536px){.col-vp-xxl-1{grid-column-end:span 1}.col-vp-xxl-2{grid-column-end:span 2}.col-vp-xxl-3{grid-column-end:span 3}.col-vp-xxl-4{grid-column-end:span 4}.col-vp-xxl-5{grid-column-end:span 5}.col-vp-xxl-6{grid-column-end:span 6}.col-vp-xxl-7{grid-column-end:span 7}.col-vp-xxl-8{grid-column-end:span 8}.col-vp-xxl-9{grid-column-end:span 9}.col-vp-xxl-10{grid-column-end:span 10}.col-vp-xxl-11{grid-column-end:span 11}.col-vp-xxl-12{grid-column-end:span 12}.col-start-vp-xxl-1{grid-column-start:1}.col-start-vp-xxl-2{grid-column-start:2}.col-start-vp-xxl-3{grid-column-start:3}.col-start-vp-xxl-4{grid-column-start:4}.col-start-vp-xxl-5{grid-column-start:5}.col-start-vp-xxl-6{grid-column-start:6}.col-start-vp-xxl-7{grid-column-start:7}.col-start-vp-xxl-8{grid-column-start:8}.col-start-vp-xxl-9{grid-column-start:9}.col-start-vp-xxl-10{grid-column-start:10}.col-start-vp-xxl-11{grid-column-start:11}.col-start-vp-xxl-12{grid-column-start:12}.hidden-vp-xxl{display:none !important}.block-vp-xxl{display:block !important}.grid-vp-xxl{display:grid !important}.flex-vp-xxl{display:flex !important}}}/*!
|
|
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))}.col-auto{grid-column:auto;width:auto}.col-fluid{min-width:var(--col-min-width, 200px);flex:1 1 var(--col-min-width, 200px)}.row-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))}.row-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))}.row-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))}.row-ram{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-ram>*{grid-column:auto !important}.row-intrinsic{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, max-content));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-even{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-dense{grid-auto-flow:dense}.row-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.2",
|
|
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",
|
|
@@ -41,7 +41,8 @@
|
|
|
41
41
|
"scss",
|
|
42
42
|
"modern-css",
|
|
43
43
|
"utilities",
|
|
44
|
-
"dot-grid"
|
|
44
|
+
"dot-grid",
|
|
45
|
+
"@lobergdesign/dot-grid"
|
|
45
46
|
],
|
|
46
47
|
"author": "Jean Loberg",
|
|
47
48
|
"license": "MIT",
|
package/src/_base.scss
CHANGED
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
|
|
10
10
|
@layer grid.base {
|
|
11
11
|
// Wrapper/Container
|
|
12
|
-
.
|
|
13
|
-
width: var(--grid-
|
|
14
|
-
max-width: var(--grid-
|
|
12
|
+
.grid-w {
|
|
13
|
+
width: var(--grid-w-width, $grid-w-width);
|
|
14
|
+
max-width: var(--grid-w-max-width, $grid-w-max-width);
|
|
15
15
|
margin-inline: auto; // logical property for RTL support
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
// Row - The grid container
|
|
19
|
-
.
|
|
19
|
+
.grid-r {
|
|
20
20
|
display: grid;
|
|
21
21
|
grid-template-columns: repeat(var(--grid-columns, $grid-columns), 1fr);
|
|
22
22
|
gap: var(--grid-gap, $grid-gap-default);
|
|
@@ -33,26 +33,26 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
// Base column class
|
|
36
|
-
.
|
|
36
|
+
.grid-c {
|
|
37
37
|
grid-column-end: span var(--grid-columns, $grid-columns);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
// Generate column span classes (
|
|
40
|
+
// Generate column span classes (grid-c-1 to grid-c-12)
|
|
41
41
|
@for $i from 1 through $grid-columns {
|
|
42
|
-
.
|
|
42
|
+
.grid-c-#{$i} {
|
|
43
43
|
grid-column-end: span $i;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
// Generate column start classes (
|
|
47
|
+
// Generate column start classes (grid-c-start-1 to grid-c-start-12)
|
|
48
48
|
@for $i from 1 through $grid-columns {
|
|
49
|
-
.
|
|
49
|
+
.grid-c-start-#{$i} {
|
|
50
50
|
grid-column-start: $i;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
// Subgrid support (modern CSS Grid Level 2)
|
|
55
|
-
.
|
|
55
|
+
.grid-r-subgrid {
|
|
56
56
|
display: grid;
|
|
57
57
|
grid-template-columns: subgrid;
|
|
58
58
|
grid-column: 1 / -1;
|
|
@@ -63,14 +63,14 @@
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
.
|
|
66
|
+
.grid-c-subgrid {
|
|
67
67
|
display: grid;
|
|
68
68
|
grid-template-rows: subgrid;
|
|
69
69
|
grid-row: 1 / -1;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
// Nesting support - nested rows maintain grid structure
|
|
73
|
-
.
|
|
73
|
+
.grid-r .grid-r {
|
|
74
74
|
grid-column: 1 / -1;
|
|
75
75
|
padding-block-end: 0; // remove bottom padding on nested rows
|
|
76
76
|
}
|
package/src/_fluid.scss
CHANGED
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
@use 'variables' as *;
|
|
8
8
|
|
|
9
9
|
@layer grid.fluid {
|
|
10
|
-
|
|
11
10
|
// ========================================
|
|
12
11
|
// Auto-responsive Grid (no breakpoints needed)
|
|
13
12
|
// ========================================
|
|
@@ -37,15 +36,15 @@
|
|
|
37
36
|
// ========================================
|
|
38
37
|
|
|
39
38
|
// Automatic column sizing
|
|
40
|
-
.
|
|
39
|
+
.grid-c-auto {
|
|
41
40
|
grid-column: auto;
|
|
42
41
|
width: auto;
|
|
43
42
|
}
|
|
44
43
|
|
|
45
44
|
// Fluid columns with minimum width
|
|
46
|
-
.
|
|
47
|
-
min-width: var(--
|
|
48
|
-
flex: 1 1 var(--
|
|
45
|
+
.grid-c-fluid {
|
|
46
|
+
min-width: var(--grid-c-min-width, 200px);
|
|
47
|
+
flex: 1 1 var(--grid-c-min-width, 200px);
|
|
49
48
|
}
|
|
50
49
|
|
|
51
50
|
// ========================================
|
|
@@ -53,31 +52,43 @@
|
|
|
53
52
|
// ========================================
|
|
54
53
|
|
|
55
54
|
// Row that adapts to 2 columns on larger screens
|
|
56
|
-
.
|
|
55
|
+
.grid-r-fluid-2 {
|
|
57
56
|
display: grid;
|
|
58
57
|
grid-template-columns: repeat(
|
|
59
58
|
auto-fit,
|
|
60
|
-
minmax(
|
|
59
|
+
minmax(
|
|
60
|
+
min(calc(50% - var(--grid-gap, #{$grid-gap-default}) / 2), 100%),
|
|
61
|
+
1fr
|
|
62
|
+
)
|
|
61
63
|
);
|
|
62
64
|
gap: var(--grid-gap, $grid-gap-default);
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
// Row that adapts to 3 columns on larger screens
|
|
66
|
-
.
|
|
68
|
+
.grid-r-fluid-3 {
|
|
67
69
|
display: grid;
|
|
68
70
|
grid-template-columns: repeat(
|
|
69
71
|
auto-fit,
|
|
70
|
-
minmax(
|
|
72
|
+
minmax(
|
|
73
|
+
min(
|
|
74
|
+
calc(33.333% - var(--grid-gap, #{$grid-gap-default}) * 2 / 3),
|
|
75
|
+
100%
|
|
76
|
+
),
|
|
77
|
+
1fr
|
|
78
|
+
)
|
|
71
79
|
);
|
|
72
80
|
gap: var(--grid-gap, $grid-gap-default);
|
|
73
81
|
}
|
|
74
82
|
|
|
75
83
|
// Row that adapts to 4 columns on larger screens
|
|
76
|
-
.
|
|
84
|
+
.grid-r-fluid-4 {
|
|
77
85
|
display: grid;
|
|
78
86
|
grid-template-columns: repeat(
|
|
79
87
|
auto-fit,
|
|
80
|
-
minmax(
|
|
88
|
+
minmax(
|
|
89
|
+
min(calc(25% - var(--grid-gap, #{$grid-gap-default}) * 3 / 4), 100%),
|
|
90
|
+
1fr
|
|
91
|
+
)
|
|
81
92
|
);
|
|
82
93
|
gap: var(--grid-gap, $grid-gap-default);
|
|
83
94
|
}
|
|
@@ -87,17 +98,14 @@
|
|
|
87
98
|
// ========================================
|
|
88
99
|
// Automatically creates equal columns that wrap
|
|
89
100
|
|
|
90
|
-
.
|
|
101
|
+
.grid-r-ram {
|
|
91
102
|
display: grid;
|
|
92
|
-
grid-template-columns: repeat(
|
|
93
|
-
auto-fit,
|
|
94
|
-
minmax(var(--col-min, 250px), 1fr)
|
|
95
|
-
);
|
|
103
|
+
grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));
|
|
96
104
|
gap: var(--grid-gap, $grid-gap-default);
|
|
97
105
|
|
|
98
106
|
// Prevent children from having explicit column spans
|
|
99
107
|
& > * {
|
|
100
|
-
grid-column: auto
|
|
108
|
+
grid-column: auto;
|
|
101
109
|
}
|
|
102
110
|
}
|
|
103
111
|
|
|
@@ -106,14 +114,14 @@
|
|
|
106
114
|
// ========================================
|
|
107
115
|
|
|
108
116
|
// Columns size based on content
|
|
109
|
-
.
|
|
117
|
+
.grid-r-intrinsic {
|
|
110
118
|
display: grid;
|
|
111
119
|
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
|
|
112
120
|
gap: var(--grid-gap, $grid-gap-default);
|
|
113
121
|
}
|
|
114
122
|
|
|
115
123
|
// Even columns that share space equally
|
|
116
|
-
.
|
|
124
|
+
.grid-r-even {
|
|
117
125
|
display: grid;
|
|
118
126
|
grid-auto-columns: 1fr;
|
|
119
127
|
grid-auto-flow: column;
|
|
@@ -125,7 +133,7 @@
|
|
|
125
133
|
// ========================================
|
|
126
134
|
|
|
127
135
|
// Fills gaps in the grid (Pinterest/Masonry style)
|
|
128
|
-
.
|
|
136
|
+
.grid-r-dense {
|
|
129
137
|
grid-auto-flow: dense;
|
|
130
138
|
}
|
|
131
139
|
|
|
@@ -134,14 +142,19 @@
|
|
|
134
142
|
// ========================================
|
|
135
143
|
// Override with CSS variables for custom fluid behavior
|
|
136
144
|
|
|
137
|
-
.
|
|
145
|
+
.grid-r-flexible {
|
|
138
146
|
display: grid;
|
|
139
147
|
grid-template-columns: repeat(
|
|
140
148
|
auto-fit,
|
|
141
149
|
minmax(
|
|
142
150
|
clamp(
|
|
143
151
|
var(--col-min, 200px),
|
|
144
|
-
calc(
|
|
152
|
+
calc(
|
|
153
|
+
(
|
|
154
|
+
100% - var(--grid-gap, #{$grid-gap-default}) *
|
|
155
|
+
(var(--col-count, 3) - 1)
|
|
156
|
+
) / var(--col-count, 3)
|
|
157
|
+
),
|
|
145
158
|
1fr
|
|
146
159
|
),
|
|
147
160
|
1fr
|
package/src/_responsive.scss
CHANGED
|
@@ -5,71 +5,44 @@
|
|
|
5
5
|
@use 'variables' as *;
|
|
6
6
|
|
|
7
7
|
@layer grid.responsive {
|
|
8
|
-
|
|
9
8
|
// ========================================
|
|
10
9
|
// Container Query Based Responsive Classes
|
|
11
10
|
// ========================================
|
|
12
11
|
// Modern approach: respond to container size, not viewport
|
|
13
|
-
// Classes: .
|
|
14
|
-
// Example: .
|
|
12
|
+
// Classes: .grid-c-{breakpoint}-{number}
|
|
13
|
+
// Example: .grid-c-md-6 applies when container is >= 768px
|
|
15
14
|
|
|
16
15
|
@each $name, $size in $breakpoints {
|
|
17
16
|
@container grid (min-width: #{$size}) {
|
|
18
|
-
|
|
19
|
-
// Column span classes (col-sm-1 through col-sm-12, etc.)
|
|
17
|
+
// Column span classes (grid-c-sm-1 through grid-c-sm-12, etc.)
|
|
20
18
|
@for $i from 1 through $grid-columns {
|
|
21
|
-
.
|
|
19
|
+
.grid-c-#{$name}-#{$i} {
|
|
22
20
|
grid-column-end: span $i;
|
|
23
21
|
}
|
|
24
22
|
}
|
|
25
23
|
|
|
26
|
-
// Column start classes (
|
|
24
|
+
// Column start classes (grid-c-start-sm-1 through grid-c-start-sm-12, etc.)
|
|
27
25
|
@for $i from 1 through $grid-columns {
|
|
28
|
-
.
|
|
26
|
+
.grid-c-start-#{$name}-#{$i} {
|
|
29
27
|
grid-column-start: $i;
|
|
30
28
|
}
|
|
31
29
|
}
|
|
32
30
|
|
|
33
|
-
// Responsive gap utilities
|
|
34
|
-
.gap-#{$name}-none {
|
|
35
|
-
gap: 0 !important;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.gap-#{$name}-xs {
|
|
39
|
-
gap: var(--grid-gap-xs, 0.5rem) !important;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.gap-#{$name}-sm {
|
|
43
|
-
gap: var(--grid-gap-sm, 1rem) !important;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.gap-#{$name}-md {
|
|
47
|
-
gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.gap-#{$name}-lg {
|
|
51
|
-
gap: var(--grid-gap-lg, 3rem) !important;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.gap-#{$name}-xl {
|
|
55
|
-
gap: var(--grid-gap-xl, 4rem) !important;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
31
|
// Responsive display utilities
|
|
59
32
|
.hidden-#{$name} {
|
|
60
|
-
display: none
|
|
33
|
+
display: none;
|
|
61
34
|
}
|
|
62
35
|
|
|
63
36
|
.block-#{$name} {
|
|
64
|
-
display: block
|
|
37
|
+
display: block;
|
|
65
38
|
}
|
|
66
39
|
|
|
67
40
|
.grid-#{$name} {
|
|
68
|
-
display: grid
|
|
41
|
+
display: grid;
|
|
69
42
|
}
|
|
70
43
|
|
|
71
44
|
.flex-#{$name} {
|
|
72
|
-
display: flex
|
|
45
|
+
display: flex;
|
|
73
46
|
}
|
|
74
47
|
}
|
|
75
48
|
}
|
|
@@ -78,41 +51,40 @@
|
|
|
78
51
|
// Viewport-based fallback/alternative
|
|
79
52
|
// ========================================
|
|
80
53
|
// For cases where viewport size is more relevant than container size
|
|
81
|
-
// Classes: .
|
|
82
|
-
// Example: .
|
|
54
|
+
// Classes: .grid-c-vp-{breakpoint}-{number}
|
|
55
|
+
// Example: .grid-c-vp-md-6 applies when viewport is >= 768px
|
|
83
56
|
|
|
84
57
|
@each $name, $size in $breakpoints {
|
|
85
58
|
@media (min-width: $size) {
|
|
86
|
-
|
|
87
59
|
// Viewport-based column span
|
|
88
60
|
@for $i from 1 through $grid-columns {
|
|
89
|
-
.
|
|
61
|
+
.grid-c-vp-#{$name}-#{$i} {
|
|
90
62
|
grid-column-end: span $i;
|
|
91
63
|
}
|
|
92
64
|
}
|
|
93
65
|
|
|
94
66
|
// Viewport-based column start
|
|
95
67
|
@for $i from 1 through $grid-columns {
|
|
96
|
-
.
|
|
68
|
+
.grid-c-start-vp-#{$name}-#{$i} {
|
|
97
69
|
grid-column-start: $i;
|
|
98
70
|
}
|
|
99
71
|
}
|
|
100
72
|
|
|
101
73
|
// Viewport-based display utilities
|
|
102
74
|
.hidden-vp-#{$name} {
|
|
103
|
-
display: none
|
|
75
|
+
display: none;
|
|
104
76
|
}
|
|
105
77
|
|
|
106
78
|
.block-vp-#{$name} {
|
|
107
|
-
display: block
|
|
79
|
+
display: block;
|
|
108
80
|
}
|
|
109
81
|
|
|
110
82
|
.grid-vp-#{$name} {
|
|
111
|
-
display: grid
|
|
83
|
+
display: grid;
|
|
112
84
|
}
|
|
113
85
|
|
|
114
86
|
.flex-vp-#{$name} {
|
|
115
|
-
display: flex
|
|
87
|
+
display: flex;
|
|
116
88
|
}
|
|
117
89
|
}
|
|
118
90
|
}
|
package/src/_utilities.scss
CHANGED
|
@@ -5,46 +5,12 @@
|
|
|
5
5
|
@use 'variables' as *;
|
|
6
6
|
|
|
7
7
|
@layer grid.utilities {
|
|
8
|
-
|
|
9
8
|
// ========================================
|
|
10
9
|
// Gap Utilities
|
|
11
10
|
// ========================================
|
|
12
11
|
|
|
13
|
-
.gap-none,
|
|
14
12
|
.no-gap {
|
|
15
|
-
gap:
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.gap-xs {
|
|
19
|
-
gap: var(--grid-gap-xs, 0.5rem) !important;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.gap-sm {
|
|
23
|
-
gap: var(--grid-gap-sm, 1rem) !important;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.gap,
|
|
27
|
-
.gap-md {
|
|
28
|
-
gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.gap-lg {
|
|
32
|
-
gap: var(--grid-gap-lg, 3rem) !important;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.gap-xl {
|
|
36
|
-
gap: var(--grid-gap-xl, 4rem) !important;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// Gap directional utilities
|
|
40
|
-
.gap-b-none,
|
|
41
|
-
.no-gap-b {
|
|
42
|
-
row-gap: 0 !important;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.gap-sides-none,
|
|
46
|
-
.no-gap-sides {
|
|
47
|
-
column-gap: 0 !important;
|
|
13
|
+
gap: 0;
|
|
48
14
|
}
|
|
49
15
|
|
|
50
16
|
// ========================================
|
|
@@ -61,7 +27,7 @@
|
|
|
61
27
|
|
|
62
28
|
// Top row
|
|
63
29
|
.place-t-l {
|
|
64
|
-
@include placement(start, start);
|
|
30
|
+
@include placement(start, start);
|
|
65
31
|
}
|
|
66
32
|
|
|
67
33
|
.place-t-c {
|
|
@@ -134,45 +100,21 @@
|
|
|
134
100
|
@include justify(space-evenly);
|
|
135
101
|
}
|
|
136
102
|
|
|
137
|
-
// ========================================
|
|
138
|
-
// Aspect Ratio Utilities (Modern CSS)
|
|
139
|
-
// ========================================
|
|
140
|
-
|
|
141
|
-
.aspect-square {
|
|
142
|
-
aspect-ratio: 1 / 1;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.aspect-video {
|
|
146
|
-
aspect-ratio: 16 / 9;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.aspect-4-3 {
|
|
150
|
-
aspect-ratio: 4 / 3;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.aspect-21-9 {
|
|
154
|
-
aspect-ratio: 21 / 9;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.aspect-auto {
|
|
158
|
-
aspect-ratio: auto;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
103
|
// ========================================
|
|
162
104
|
// Min/Max Content Utilities
|
|
163
105
|
// ========================================
|
|
164
106
|
|
|
165
|
-
.
|
|
107
|
+
.grid-c-min {
|
|
166
108
|
width: min-content;
|
|
167
109
|
grid-column: auto;
|
|
168
110
|
}
|
|
169
111
|
|
|
170
|
-
.
|
|
112
|
+
.grid-c-max {
|
|
171
113
|
width: max-content;
|
|
172
114
|
grid-column: auto;
|
|
173
115
|
}
|
|
174
116
|
|
|
175
|
-
.
|
|
117
|
+
.grid-c-fit {
|
|
176
118
|
width: fit-content;
|
|
177
119
|
grid-column: auto;
|
|
178
120
|
}
|
|
@@ -182,22 +124,6 @@
|
|
|
182
124
|
// ========================================
|
|
183
125
|
|
|
184
126
|
.hidden {
|
|
185
|
-
display: none
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
// ========================================
|
|
189
|
-
// Order Utilities (Grid/Flex)
|
|
190
|
-
// ========================================
|
|
191
|
-
|
|
192
|
-
.order-first {
|
|
193
|
-
order: -1;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.order-last {
|
|
197
|
-
order: 999;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.order-none {
|
|
201
|
-
order: 0;
|
|
127
|
+
display: none;
|
|
202
128
|
}
|
|
203
129
|
}
|
package/src/_variables.scss
CHANGED
|
@@ -15,19 +15,9 @@ $breakpoints: (
|
|
|
15
15
|
$grid-columns: 12;
|
|
16
16
|
$grid-gap-default: clamp(1rem, 2vw, 2rem);
|
|
17
17
|
|
|
18
|
-
// Gap scale
|
|
19
|
-
$gap-scale: (
|
|
20
|
-
none: 0,
|
|
21
|
-
xs: 0.5rem,
|
|
22
|
-
sm: 1rem,
|
|
23
|
-
md: clamp(1rem, 2vw, 2rem), // default
|
|
24
|
-
lg: 3rem,
|
|
25
|
-
xl: 4rem
|
|
26
|
-
);
|
|
27
|
-
|
|
28
18
|
// Wrapper/Container
|
|
29
|
-
$
|
|
30
|
-
$
|
|
19
|
+
$grid-w-max-width: 180rem;
|
|
20
|
+
$grid-w-width: 90vw;
|
|
31
21
|
|
|
32
22
|
// CSS Custom Properties
|
|
33
23
|
// These will be output as CSS variables for user customization
|
|
@@ -44,24 +34,11 @@ $wrap-width: 90vw;
|
|
|
44
34
|
--grid-bp-xxl: 1536px;
|
|
45
35
|
|
|
46
36
|
// Container
|
|
47
|
-
--grid-
|
|
48
|
-
--grid-
|
|
49
|
-
|
|
50
|
-
// Gap scale
|
|
51
|
-
--grid-gap-none: 0;
|
|
52
|
-
--grid-gap-xs: 0.5rem;
|
|
53
|
-
--grid-gap-sm: 1rem;
|
|
54
|
-
--grid-gap-md: clamp(1rem, 2vw, 2rem);
|
|
55
|
-
--grid-gap-lg: 3rem;
|
|
56
|
-
--grid-gap-xl: 4rem;
|
|
37
|
+
--grid-w-max-width: #{$grid-w-max-width};
|
|
38
|
+
--grid-w-width: #{$grid-w-width};
|
|
57
39
|
}
|
|
58
40
|
|
|
59
41
|
// Helper function to get breakpoint value
|
|
60
42
|
@function breakpoint($name) {
|
|
61
43
|
@return map-get($breakpoints, $name);
|
|
62
44
|
}
|
|
63
|
-
|
|
64
|
-
// Helper function to get gap value
|
|
65
|
-
@function gap($name) {
|
|
66
|
-
@return map-get($gap-scale, $name);
|
|
67
|
-
}
|