@lobergdesign/dot-grid 1.0.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/LICENSE +21 -0
- package/README.md +383 -0
- package/dist/grid.css +1400 -0
- package/dist/grid.min.css +71 -0
- package/package.json +62 -0
- package/src/_base.scss +77 -0
- package/src/_fluid.scss +152 -0
- package/src/_responsive.scss +119 -0
- package/src/_utilities.scss +203 -0
- package/src/_variables.scss +67 -0
- package/src/grid.scss +83 -0
|
@@ -0,0 +1,71 @@
|
|
|
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))}}
|
package/package.json
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@lobergdesign/dot-grid",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support",
|
|
5
|
+
"main": "dist/grid.css",
|
|
6
|
+
"style": "dist/grid.css",
|
|
7
|
+
"sass": "src/grid.scss",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"style": "./dist/grid.css",
|
|
11
|
+
"sass": "./src/grid.scss",
|
|
12
|
+
"default": "./dist/grid.css"
|
|
13
|
+
},
|
|
14
|
+
"./dist/*": "./dist/*",
|
|
15
|
+
"./src/*": "./src/*",
|
|
16
|
+
"./min": "./dist/grid.min.css"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"src",
|
|
21
|
+
"README.md",
|
|
22
|
+
"LICENSE"
|
|
23
|
+
],
|
|
24
|
+
"scripts": {
|
|
25
|
+
"build": "npm run build:css && npm run build:min",
|
|
26
|
+
"build:css": "sass src/grid.scss dist/grid.css --no-source-map",
|
|
27
|
+
"build:min": "sass src/grid.scss dist/grid.min.css --no-source-map --style=compressed",
|
|
28
|
+
"watch": "sass src/grid.scss dist/grid.css --watch",
|
|
29
|
+
"prepublishOnly": "npm run build"
|
|
30
|
+
},
|
|
31
|
+
"keywords": [
|
|
32
|
+
"css",
|
|
33
|
+
"grid",
|
|
34
|
+
"css-grid",
|
|
35
|
+
"layout",
|
|
36
|
+
"responsive",
|
|
37
|
+
"12-column",
|
|
38
|
+
"subgrid",
|
|
39
|
+
"container-queries",
|
|
40
|
+
"fluid-layout",
|
|
41
|
+
"scss",
|
|
42
|
+
"modern-css",
|
|
43
|
+
"utilities",
|
|
44
|
+
"dot-grid"
|
|
45
|
+
],
|
|
46
|
+
"author": "Jean Loberg",
|
|
47
|
+
"license": "MIT",
|
|
48
|
+
"repository": {
|
|
49
|
+
"type": "git",
|
|
50
|
+
"url": "https://github.com/lobergdesign/dot-grid"
|
|
51
|
+
},
|
|
52
|
+
"bugs": {
|
|
53
|
+
"url": "https://github.com/lobergdesign/dot-grid/issues"
|
|
54
|
+
},
|
|
55
|
+
"homepage": "https://github.com/lobergdesign/dot-grid#readme",
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"sass": "^1.80.0"
|
|
58
|
+
},
|
|
59
|
+
"engines": {
|
|
60
|
+
"node": ">=14.0.0"
|
|
61
|
+
}
|
|
62
|
+
}
|
package/src/_base.scss
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
// ========================================
|
|
2
|
+
// dot-grid Base Layout
|
|
3
|
+
// ========================================
|
|
4
|
+
|
|
5
|
+
@use 'variables' as *;
|
|
6
|
+
|
|
7
|
+
// Define cascade layers for better specificity control
|
|
8
|
+
@layer grid.base, grid.utilities, grid.responsive, grid.fluid;
|
|
9
|
+
|
|
10
|
+
@layer grid.base {
|
|
11
|
+
// Wrapper/Container
|
|
12
|
+
.wrap {
|
|
13
|
+
width: var(--grid-wrap-width, $wrap-width);
|
|
14
|
+
max-width: var(--grid-wrap-max-width, $wrap-max-width);
|
|
15
|
+
margin-inline: auto; // logical property for RTL support
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Row - The grid container
|
|
19
|
+
.row {
|
|
20
|
+
display: grid;
|
|
21
|
+
grid-template-columns: repeat(var(--grid-columns, $grid-columns), 1fr);
|
|
22
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
23
|
+
padding-block-end: var(--grid-gap, $grid-gap-default); // logical property
|
|
24
|
+
|
|
25
|
+
// Container query setup for responsive children
|
|
26
|
+
container-type: inline-size;
|
|
27
|
+
container-name: grid;
|
|
28
|
+
|
|
29
|
+
// All direct children span full width by default
|
|
30
|
+
& > * {
|
|
31
|
+
grid-column-end: span var(--grid-columns, $grid-columns);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Base column class
|
|
36
|
+
.col {
|
|
37
|
+
grid-column-end: span var(--grid-columns, $grid-columns);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Generate column span classes (col-1 to col-12)
|
|
41
|
+
@for $i from 1 through $grid-columns {
|
|
42
|
+
.col-#{$i} {
|
|
43
|
+
grid-column-end: span $i;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Generate column start classes (col-start-1 to col-start-12)
|
|
48
|
+
@for $i from 1 through $grid-columns {
|
|
49
|
+
.col-start-#{$i} {
|
|
50
|
+
grid-column-start: $i;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Subgrid support (modern CSS Grid Level 2)
|
|
55
|
+
.row-subgrid {
|
|
56
|
+
display: grid;
|
|
57
|
+
grid-template-columns: subgrid;
|
|
58
|
+
grid-column: 1 / -1;
|
|
59
|
+
|
|
60
|
+
// Inherit gap from parent or use custom
|
|
61
|
+
&:not([style*="gap"]) {
|
|
62
|
+
gap: inherit;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.col-subgrid {
|
|
67
|
+
display: grid;
|
|
68
|
+
grid-template-rows: subgrid;
|
|
69
|
+
grid-row: 1 / -1;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Nesting support - nested rows maintain grid structure
|
|
73
|
+
.row .row {
|
|
74
|
+
grid-column: 1 / -1;
|
|
75
|
+
padding-block-end: 0; // remove bottom padding on nested rows
|
|
76
|
+
}
|
|
77
|
+
}
|
package/src/_fluid.scss
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
// ========================================
|
|
2
|
+
// dot-grid Fluid/Automatic Layouts
|
|
3
|
+
// ========================================
|
|
4
|
+
// Modern CSS Grid features that adapt automatically
|
|
5
|
+
// without explicit breakpoint classes
|
|
6
|
+
|
|
7
|
+
@use 'variables' as *;
|
|
8
|
+
|
|
9
|
+
@layer grid.fluid {
|
|
10
|
+
|
|
11
|
+
// ========================================
|
|
12
|
+
// Auto-responsive Grid (no breakpoints needed)
|
|
13
|
+
// ========================================
|
|
14
|
+
|
|
15
|
+
// Auto-fit: Fits as many columns as possible
|
|
16
|
+
.grid-auto-fit {
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-columns: repeat(
|
|
19
|
+
auto-fit,
|
|
20
|
+
minmax(min(var(--grid-auto-min, 250px), 100%), 1fr)
|
|
21
|
+
);
|
|
22
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Auto-fill: Fills the space with columns
|
|
26
|
+
.grid-auto-fill {
|
|
27
|
+
display: grid;
|
|
28
|
+
grid-template-columns: repeat(
|
|
29
|
+
auto-fill,
|
|
30
|
+
minmax(min(var(--grid-auto-min, 250px), 100%), 1fr)
|
|
31
|
+
);
|
|
32
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// ========================================
|
|
36
|
+
// Fluid Column Utilities
|
|
37
|
+
// ========================================
|
|
38
|
+
|
|
39
|
+
// Automatic column sizing
|
|
40
|
+
.col-auto {
|
|
41
|
+
grid-column: auto;
|
|
42
|
+
width: auto;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Fluid columns with minimum width
|
|
46
|
+
.col-fluid {
|
|
47
|
+
min-width: var(--col-min-width, 200px);
|
|
48
|
+
flex: 1 1 var(--col-min-width, 200px);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// ========================================
|
|
52
|
+
// Fluid Rows with Different Patterns
|
|
53
|
+
// ========================================
|
|
54
|
+
|
|
55
|
+
// Row that adapts to 2 columns on larger screens
|
|
56
|
+
.row-fluid-2 {
|
|
57
|
+
display: grid;
|
|
58
|
+
grid-template-columns: repeat(
|
|
59
|
+
auto-fit,
|
|
60
|
+
minmax(min(calc(50% - var(--grid-gap, #{$grid-gap-default}) / 2), 100%), 1fr)
|
|
61
|
+
);
|
|
62
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// Row that adapts to 3 columns on larger screens
|
|
66
|
+
.row-fluid-3 {
|
|
67
|
+
display: grid;
|
|
68
|
+
grid-template-columns: repeat(
|
|
69
|
+
auto-fit,
|
|
70
|
+
minmax(min(calc(33.333% - var(--grid-gap, #{$grid-gap-default}) * 2 / 3), 100%), 1fr)
|
|
71
|
+
);
|
|
72
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Row that adapts to 4 columns on larger screens
|
|
76
|
+
.row-fluid-4 {
|
|
77
|
+
display: grid;
|
|
78
|
+
grid-template-columns: repeat(
|
|
79
|
+
auto-fit,
|
|
80
|
+
minmax(min(calc(25% - var(--grid-gap, #{$grid-gap-default}) * 3 / 4), 100%), 1fr)
|
|
81
|
+
);
|
|
82
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// ========================================
|
|
86
|
+
// RAM (Repeat, Auto, Minmax) Pattern
|
|
87
|
+
// ========================================
|
|
88
|
+
// Automatically creates equal columns that wrap
|
|
89
|
+
|
|
90
|
+
.row-ram {
|
|
91
|
+
display: grid;
|
|
92
|
+
grid-template-columns: repeat(
|
|
93
|
+
auto-fit,
|
|
94
|
+
minmax(var(--col-min, 250px), 1fr)
|
|
95
|
+
);
|
|
96
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
97
|
+
|
|
98
|
+
// Prevent children from having explicit column spans
|
|
99
|
+
& > * {
|
|
100
|
+
grid-column: auto !important;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// ========================================
|
|
105
|
+
// Intrinsic Sizing
|
|
106
|
+
// ========================================
|
|
107
|
+
|
|
108
|
+
// Columns size based on content
|
|
109
|
+
.row-intrinsic {
|
|
110
|
+
display: grid;
|
|
111
|
+
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
|
|
112
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// Even columns that share space equally
|
|
116
|
+
.row-even {
|
|
117
|
+
display: grid;
|
|
118
|
+
grid-auto-columns: 1fr;
|
|
119
|
+
grid-auto-flow: column;
|
|
120
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// ========================================
|
|
124
|
+
// Dense Packing
|
|
125
|
+
// ========================================
|
|
126
|
+
|
|
127
|
+
// Fills gaps in the grid (Pinterest/Masonry style)
|
|
128
|
+
.row-dense {
|
|
129
|
+
grid-auto-flow: dense;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// ========================================
|
|
133
|
+
// Flexible Column Counts
|
|
134
|
+
// ========================================
|
|
135
|
+
// Override with CSS variables for custom fluid behavior
|
|
136
|
+
|
|
137
|
+
.row-flexible {
|
|
138
|
+
display: grid;
|
|
139
|
+
grid-template-columns: repeat(
|
|
140
|
+
auto-fit,
|
|
141
|
+
minmax(
|
|
142
|
+
clamp(
|
|
143
|
+
var(--col-min, 200px),
|
|
144
|
+
calc((100% - var(--grid-gap, #{$grid-gap-default}) * (var(--col-count, 3) - 1)) / var(--col-count, 3)),
|
|
145
|
+
1fr
|
|
146
|
+
),
|
|
147
|
+
1fr
|
|
148
|
+
)
|
|
149
|
+
);
|
|
150
|
+
gap: var(--grid-gap, $grid-gap-default);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
// ========================================
|
|
2
|
+
// dot-grid Responsive (Container Queries)
|
|
3
|
+
// ========================================
|
|
4
|
+
|
|
5
|
+
@use 'variables' as *;
|
|
6
|
+
|
|
7
|
+
@layer grid.responsive {
|
|
8
|
+
|
|
9
|
+
// ========================================
|
|
10
|
+
// Container Query Based Responsive Classes
|
|
11
|
+
// ========================================
|
|
12
|
+
// Modern approach: respond to container size, not viewport
|
|
13
|
+
// Classes: .col-{breakpoint}-{number}
|
|
14
|
+
// Example: .col-md-6 applies when container is >= 768px
|
|
15
|
+
|
|
16
|
+
@each $name, $size in $breakpoints {
|
|
17
|
+
@container grid (min-width: #{$size}) {
|
|
18
|
+
|
|
19
|
+
// Column span classes (col-sm-1 through col-sm-12, etc.)
|
|
20
|
+
@for $i from 1 through $grid-columns {
|
|
21
|
+
.col-#{$name}-#{$i} {
|
|
22
|
+
grid-column-end: span $i;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Column start classes (col-start-sm-1 through col-start-sm-12, etc.)
|
|
27
|
+
@for $i from 1 through $grid-columns {
|
|
28
|
+
.col-start-#{$name}-#{$i} {
|
|
29
|
+
grid-column-start: $i;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
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
|
+
// Responsive display utilities
|
|
59
|
+
.hidden-#{$name} {
|
|
60
|
+
display: none !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.block-#{$name} {
|
|
64
|
+
display: block !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.grid-#{$name} {
|
|
68
|
+
display: grid !important;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.flex-#{$name} {
|
|
72
|
+
display: flex !important;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// ========================================
|
|
78
|
+
// Viewport-based fallback/alternative
|
|
79
|
+
// ========================================
|
|
80
|
+
// For cases where viewport size is more relevant than container size
|
|
81
|
+
// Classes: .col-vp-{breakpoint}-{number}
|
|
82
|
+
// Example: .col-vp-md-6 applies when viewport is >= 768px
|
|
83
|
+
|
|
84
|
+
@each $name, $size in $breakpoints {
|
|
85
|
+
@media (min-width: $size) {
|
|
86
|
+
|
|
87
|
+
// Viewport-based column span
|
|
88
|
+
@for $i from 1 through $grid-columns {
|
|
89
|
+
.col-vp-#{$name}-#{$i} {
|
|
90
|
+
grid-column-end: span $i;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Viewport-based column start
|
|
95
|
+
@for $i from 1 through $grid-columns {
|
|
96
|
+
.col-start-vp-#{$name}-#{$i} {
|
|
97
|
+
grid-column-start: $i;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Viewport-based display utilities
|
|
102
|
+
.hidden-vp-#{$name} {
|
|
103
|
+
display: none !important;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.block-vp-#{$name} {
|
|
107
|
+
display: block !important;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.grid-vp-#{$name} {
|
|
111
|
+
display: grid !important;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.flex-vp-#{$name} {
|
|
115
|
+
display: flex !important;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|