@lobergdesign/dot-grid 3.0.0 → 3.1.1

package/dist/grid.css

@@ -1,11 +1,6 @@
 :root {
   --grid-columns: 12;
   --grid-gap: clamp(1rem, 2vw, 2rem);
-  --grid-bp-sm: 640px;
-  --grid-bp-md: 768px;
-  --grid-bp-lg: 1024px;
-  --grid-bp-xl: 1280px;
-  --grid-bp-xxl: 1536px;
   --grid-w-max-width: 190rem;
   --grid-w-width: 90vw;
   --grid-w-min-width: 36vw;

package/dist/grid.min.css

@@ -1 +1 @@
-:root{--grid-columns: 12;--grid-gap: clamp(1rem, 2vw, 2rem);--grid-bp-sm: 640px;--grid-bp-md: 768px;--grid-bp-lg: 1024px;--grid-bp-xl: 1280px;--grid-bp-xxl: 1536px;--grid-w-max-width: 190rem;--grid-w-width: 90vw;--grid-w-min-width: 36vw}@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:clamp(var(--grid-w-min-width),var(--grid-w-width),var(--grid-w-max-width));margin-inline:auto}.grid-r{display:grid;grid-template-columns:repeat(var(--grid-columns, 12), 1fr);gap:var(--grid-gap, clamp(1rem, 2vw, 2rem));padding-block-end:var(--grid-gap, clamp(1rem, 2vw, 2rem));container-type:inline-size;container-name:grid}.grid-r>*{grid-column-end:span var(--grid-columns, 12)}.grid-c{grid-column-end:span var(--grid-columns, 12)}.grid-c-1{grid-column-end:span 1}.grid-c-2{grid-column-end:span 2}.grid-c-3{grid-column-end:span 3}.grid-c-4{grid-column-end:span 4}.grid-c-5{grid-column-end:span 5}.grid-c-6{grid-column-end:span 6}.grid-c-7{grid-column-end:span 7}.grid-c-8{grid-column-end:span 8}.grid-c-9{grid-column-end:span 9}.grid-c-10{grid-column-end:span 10}.grid-c-11{grid-column-end:span 11}.grid-c-12{grid-column-end:span 12}.grid-c-start-1{grid-column-start:1}.grid-c-start-2{grid-column-start:2}.grid-c-start-3{grid-column-start:3}.grid-c-start-4{grid-column-start:4}.grid-c-start-5{grid-column-start:5}.grid-c-start-6{grid-column-start:6}.grid-c-start-7{grid-column-start:7}.grid-c-start-8{grid-column-start:8}.grid-c-start-9{grid-column-start:9}.grid-c-start-10{grid-column-start:10}.grid-c-start-11{grid-column-start:11}.grid-c-start-12{grid-column-start:12}.grid-r-subgrid{display:grid;grid-template-columns:subgrid;grid-column:1/-1}.grid-r-subgrid:not([style*=gap]){gap:inherit}.grid-c-subgrid{display:grid;grid-template-rows:subgrid;grid-row:1/-1}.grid-r .grid-r{grid-column:1/-1;padding-block-end:0}}@layer grid.utilities{.no-gap{gap:0}.place-t-l{display:grid;align-items:start;justify-items:start}.place-t-c{display:grid;align-items:start;justify-items:center}.place-t-r{display:grid;align-items:start;justify-items:end}.place-c-l{display:grid;align-items:center;justify-items:start}.place-c-c{display:grid;align-items:center;justify-items:center}.place-c-r{display:grid;align-items:center;justify-items:end}.place-b-l{display:grid;align-items:end;justify-items:start}.place-b-c{display:grid;align-items:end;justify-items:center}.place-b-r{display:grid;align-items:end;justify-items:end}.justify-start{display:flex;justify-content:flex-start}.justify-end{display:flex;justify-content:flex-end}.justify-center{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}}}
+: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

@@ -1,6 +1,6 @@
 {
   "name": "@lobergdesign/dot-grid",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "A modern, flexible CSS Grid system with container queries, and subgrid support",
   "main": "dist/grid.css",
   "style": "dist/grid.css",
@@ -11,6 +11,7 @@
       "sass": "./src/grid.scss",
       "default": "./dist/grid.css"
     },
+    "./scss": "./src/grid.scss",
     "./dist/*": "./dist/*",
     "./src/*": "./src/*",
     "./min": "./dist/grid.min.css"

package/src/_variables.scss

@@ -15,24 +15,18 @@ $breakpoints: (
 $grid-columns: 12 !default;
 $grid-gap-default: clamp(1rem, 2vw, 2rem) !default;
 
+// Container configuration
+$grid-w-max-width: 190rem !default;
+$grid-w-width: 90vw !default;
+$grid-w-min-width: 36vw !default;
+
 // CSS Custom Properties
-// These will be output as CSS variables for user customization
 :root {
-  // Grid
   --grid-columns: #{$grid-columns};
   --grid-gap: #{$grid-gap-default};
-
-  // Breakpoints (for reference/documentation)
-  --grid-bp-sm: 640px;
-  --grid-bp-md: 768px;
-  --grid-bp-lg: 1024px;
-  --grid-bp-xl: 1280px;
-  --grid-bp-xxl: 1536px;
-
-  // Container
-  --grid-w-max-width: 190rem;
-  --grid-w-width: 90vw;
-  --grid-w-min-width: 36vw;
+  --grid-w-max-width: #{$grid-w-max-width};
+  --grid-w-width: #{$grid-w-width};
+  --grid-w-min-width: #{$grid-w-min-width};
 }
 
 // Helper function to get breakpoint value