unigrid.css 0.3.0 → 0.3.2

package/src/scss/_modules.scss

@@ -1,238 +1,238 @@
-// ==========================================================================
-// Unigrid CSS Framework — Square Module System
-//
-// Inspired by Uniweb (Arlandi Design) and Vignelli's original Unigrid.
-// The base unit "U" is a square module. All dimensions are multiples of U.
-// Uses vw units for viewport-proportional sizing.
-//
-// Responsive column reduction: 3 → 4 → 6 → 8 → 12 (mobile-first)
-//
-// Usage:
-//   <div class="ug-modules">
-//     <div class="ug-module ug-module--1x1">Square</div>
-//     <div class="ug-module ug-module--1x2">Wide</div>
-//   </div>
-//
-// Block: .ug-modules (container)
-// Block: .ug-module  (individual module)
-// Modifiers: --{h}x{w} for height × width in module units
-// ==========================================================================
-
-@use "sass:math";
-@use "sass:map";
-@use "variables" as *;
-@use "mixins" as *;
-
-// ---- Module Grid Configuration ----
-
-$ug-module-grid: (
-  "xs": (cols: 3,  gutter: 2.3810vw, module: 28.5714vw, margin: 4.7619vw, max-w: 3),
-  "sm": (cols: 4,  gutter: 2.1277vw, module: 21.2766vw, margin: 4.2553vw, max-w: 4),
-  "md": (cols: 6,  gutter: 1.7544vw, module: 14.0351vw, margin: 3.5088vw, max-w: 6),
-  "lg": (cols: 8,  gutter: 1.4925vw, module: 10.4478vw, margin: 2.9851vw, max-w: 8),
-  "xl": (cols: 12, gutter: 1.1494vw, module: 6.8966vw,  margin: 2.2989vw, max-w: 12),
-) !default;
-
-$ug-module-max-height: 6;
-
-// ---- Module Container ----
-
-.ug-modules {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  width: 100%;
-
-  &--flush {
-    padding: 0;
-  }
-}
-
-// ---- Individual Module ----
-
-.ug-module {
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-// ---- Default (mobile / xs): 3 columns ----
-
-$_xs: map.get($ug-module-grid, "xs");
-$_xs-g: map.get($_xs, gutter);
-$_xs-m: map.get($_xs, module);
-$_xs-margin: map.get($_xs, margin);
-
-.ug-modules {
-  padding: $_xs-g 0 0 $_xs-margin;
-  gap: $_xs-g;
-}
-
-.ug-module {
-  margin: 0;
-}
-
-@each $w in (1, 2, 3) {
-  @for $h from 1 through $ug-module-max-height {
-    .ug-module--#{$h}x#{$w} {
-      @if $h == 1 and $w == 1 {
-        height: $_xs-m;
-        width: $_xs-m;
-      } @else {
-        height: calc(#{$_xs-m} * #{$h} + #{$_xs-g} * #{$h - 1});
-        width: calc(#{$_xs-m} * #{$w} + #{$_xs-g} * #{$w - 1});
-      }
-      @if $h == 1 {
-        height: $_xs-m;
-      }
-      @if $w == 1 {
-        width: $_xs-m;
-      }
-    }
-  }
-}
-
-.ug-module--auto-height { height: auto; }
-.ug-module--no-margin { margin-right: 0; }
-
-// ---- Phablet (sm): 4 columns ----
-
-@media screen and (min-width: 640px) {
-  $_sm: map.get($ug-module-grid, "sm");
-  $_sm-g: map.get($_sm, gutter);
-  $_sm-m: map.get($_sm, module);
-  $_sm-margin: map.get($_sm, margin);
-
-  .ug-modules { padding: $_sm-g 0 0 $_sm-margin; gap: $_sm-g; }
-  .ug-module { margin: 0; }
-
-  @each $w in (1, 2, 3, 4) {
-    @for $h from 1 through $ug-module-max-height {
-      .ug-module--#{$h}x#{$w},
-      .ug-module--sm-#{$h}x#{$w} {
-        @if $w == 1 {
-          height: calc(#{$_sm-m} * #{$h} + #{$_sm-g} * #{$h - 1});
-          width: $_sm-m;
-        } @else if $h == 1 {
-          height: $_sm-m;
-          width: calc(#{$_sm-m} * #{$w} + #{$_sm-g} * #{$w - 1});
-        } @else {
-          height: calc(#{$_sm-m} * #{$h} + #{$_sm-g} * #{$h - 1});
-          width: calc(#{$_sm-m} * #{$w} + #{$_sm-g} * #{$w - 1});
-        }
-      }
-    }
-  }
-
-  .ug-module--sm-auto-height { height: auto; }
-  .ug-module--sm-no-margin { margin-right: 0; }
-}
-
-// ---- Tablet (md): 6 columns ----
-
-@media screen and (min-width: 1024px) {
-  $_md: map.get($ug-module-grid, "md");
-  $_md-g: map.get($_md, gutter);
-  $_md-m: map.get($_md, module);
-  $_md-margin: map.get($_md, margin);
-
-  .ug-modules { padding: $_md-g 0 0 $_md-margin; gap: $_md-g; }
-  .ug-module { margin: 0; }
-
-  @each $w in (1, 2, 3, 4, 6) {
-    @for $h from 1 through $ug-module-max-height {
-      .ug-module--#{$h}x#{$w},
-      .ug-module--md-#{$h}x#{$w} {
-        @if $w == 1 {
-          height: calc(#{$_md-m} * #{$h} + #{$_md-g} * #{$h - 1});
-          width: $_md-m;
-        } @else if $h == 1 {
-          height: $_md-m;
-          width: calc(#{$_md-m} * #{$w} + #{$_md-g} * #{$w - 1});
-        } @else {
-          height: calc(#{$_md-m} * #{$h} + #{$_md-g} * #{$h - 1});
-          width: calc(#{$_md-m} * #{$w} + #{$_md-g} * #{$w - 1});
-        }
-      }
-    }
-  }
-
-  .ug-module--md-auto-height { height: auto; }
-  .ug-module--md-no-margin { margin-right: 0; }
-}
-
-// ---- Laptop (lg): 8 columns ----
-
-@media screen and (min-width: 1300px) {
-  $_lg: map.get($ug-module-grid, "lg");
-  $_lg-g: map.get($_lg, gutter);
-  $_lg-m: map.get($_lg, module);
-  $_lg-margin: map.get($_lg, margin);
-
-  .ug-modules { padding: $_lg-g 0 0 $_lg-margin; gap: $_lg-g; }
-  .ug-module { margin: 0; }
-
-  @each $w in (1, 2, 3, 4, 6, 8) {
-    @for $h from 1 through $ug-module-max-height {
-      .ug-module--#{$h}x#{$w},
-      .ug-module--lg-#{$h}x#{$w} {
-        @if $w == 1 {
-          height: calc(#{$_lg-m} * #{$h} + #{$_lg-g} * #{$h - 1});
-          width: $_lg-m;
-        } @else if $h == 1 {
-          height: $_lg-m;
-          width: calc(#{$_lg-m} * #{$w} + #{$_lg-g} * #{$w - 1});
-        } @else {
-          height: calc(#{$_lg-m} * #{$h} + #{$_lg-g} * #{$h - 1});
-          width: calc(#{$_lg-m} * #{$w} + #{$_lg-g} * #{$w - 1});
-        }
-      }
-    }
-  }
-
-  .ug-module--lg-auto-height { height: auto; }
-  .ug-module--lg-no-margin { margin-right: 0; }
-}
-
-// ---- Desktop (xl): 12 columns ----
-
-@media screen and (min-width: 1600px) {
-  $_xl: map.get($ug-module-grid, "xl");
-  $_xl-g: map.get($_xl, gutter);
-  $_xl-m: map.get($_xl, module);
-  $_xl-margin: map.get($_xl, margin);
-
-  .ug-modules { padding: $_xl-g 0 0 $_xl-margin; gap: $_xl-g; }
-  .ug-module { margin: 0; }
-
-  @each $w in (1, 2, 3, 4, 6, 8, 12) {
-    @for $h from 1 through $ug-module-max-height {
-      .ug-module--#{$h}x#{$w},
-      .ug-module--xl-#{$h}x#{$w} {
-        @if $w == 1 {
-          height: calc(#{$_xl-m} * #{$h} + #{$_xl-g} * #{$h - 1});
-          width: $_xl-m;
-        } @else if $h == 1 {
-          height: $_xl-m;
-          width: calc(#{$_xl-m} * #{$w} + #{$_xl-g} * #{$w - 1});
-        } @else {
-          height: calc(#{$_xl-m} * #{$h} + #{$_xl-g} * #{$h - 1});
-          width: calc(#{$_xl-m} * #{$w} + #{$_xl-g} * #{$w - 1});
-        }
-      }
-    }
-  }
-
-  .ug-module--xl-auto-height { height: auto; }
-  .ug-module--xl-no-margin { margin-right: 0; }
-}
-
-// ---- Responsive Visibility ----
-
-.ug-module--hidden-xl { @media screen and (min-width: 1600px) { display: none; } }
-.ug-module--hidden-lg { @media screen and (min-width: 1300px) and (max-width: 1599px) { display: none; } }
-.ug-module--hidden-md { @media screen and (min-width: 1024px) and (max-width: 1299px) { display: none; } }
-.ug-module--hidden-sm { @media screen and (min-width: 640px) and (max-width: 1023px) { display: none; } }
-.ug-module--hidden-xs { @media screen and (max-width: 639px) { display: none; } }
+// ==========================================================================
+// Unigrid CSS Framework — Square Module System
+//
+// Inspired by Uniweb (Arlandi Design) and Vignelli's original Unigrid.
+// The base unit "U" is a square module. All dimensions are multiples of U.
+// Uses vw units for viewport-proportional sizing.
+//
+// Responsive column reduction: 3 → 4 → 6 → 8 → 12 (mobile-first)
+//
+// Usage:
+//   <div class="ug-modules">
+//     <div class="ug-module ug-module--1x1">Square</div>
+//     <div class="ug-module ug-module--1x2">Wide</div>
+//   </div>
+//
+// Block: .ug-modules (container)
+// Block: .ug-module  (individual module)
+// Modifiers: --{h}x{w} for height × width in module units
+// ==========================================================================
+
+@use "sass:math";
+@use "sass:map";
+@use "variables" as *;
+@use "mixins" as *;
+
+// ---- Module Grid Configuration ----
+
+$ug-module-grid: (
+  "xs": (cols: 3,  gutter: 2.3810vw, module: 28.5714vw, margin: 4.7619vw, max-w: 3),
+  "sm": (cols: 4,  gutter: 2.1277vw, module: 21.2766vw, margin: 4.2553vw, max-w: 4),
+  "md": (cols: 6,  gutter: 1.7544vw, module: 14.0351vw, margin: 3.5088vw, max-w: 6),
+  "lg": (cols: 8,  gutter: 1.4925vw, module: 10.4478vw, margin: 2.9851vw, max-w: 8),
+  "xl": (cols: 12, gutter: 1.1494vw, module: 6.8966vw,  margin: 2.2989vw, max-w: 12),
+) !default;
+
+$ug-module-max-height: 6;
+
+// ---- Module Container ----
+
+.ug-modules {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  width: 100%;
+
+  &--flush {
+    padding: 0;
+  }
+}
+
+// ---- Individual Module ----
+
+.ug-module {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+// ---- Default (mobile / xs): 3 columns ----
+
+$_xs: map.get($ug-module-grid, "xs");
+$_xs-g: map.get($_xs, gutter);
+$_xs-m: map.get($_xs, module);
+$_xs-margin: map.get($_xs, margin);
+
+.ug-modules {
+  padding: $_xs-g 0 0 $_xs-margin;
+  gap: $_xs-g;
+}
+
+.ug-module {
+  margin: 0;
+}
+
+@each $w in (1, 2, 3) {
+  @for $h from 1 through $ug-module-max-height {
+    .ug-module--#{$h}x#{$w} {
+      @if $h == 1 and $w == 1 {
+        height: $_xs-m;
+        width: $_xs-m;
+      } @else {
+        height: calc(#{$_xs-m} * #{$h} + #{$_xs-g} * #{$h - 1});
+        width: calc(#{$_xs-m} * #{$w} + #{$_xs-g} * #{$w - 1});
+      }
+      @if $h == 1 {
+        height: $_xs-m;
+      }
+      @if $w == 1 {
+        width: $_xs-m;
+      }
+    }
+  }
+}
+
+.ug-module--auto-height { height: auto; }
+.ug-module--no-margin { margin-right: 0; }
+
+// ---- Phablet (sm): 4 columns ----
+
+@media screen and (min-width: 640px) {
+  $_sm: map.get($ug-module-grid, "sm");
+  $_sm-g: map.get($_sm, gutter);
+  $_sm-m: map.get($_sm, module);
+  $_sm-margin: map.get($_sm, margin);
+
+  .ug-modules { padding: $_sm-g 0 0 $_sm-margin; gap: $_sm-g; }
+  .ug-module { margin: 0; }
+
+  @each $w in (1, 2, 3, 4) {
+    @for $h from 1 through $ug-module-max-height {
+      .ug-module--#{$h}x#{$w},
+      .ug-module--sm-#{$h}x#{$w} {
+        @if $w == 1 {
+          height: calc(#{$_sm-m} * #{$h} + #{$_sm-g} * #{$h - 1});
+          width: $_sm-m;
+        } @else if $h == 1 {
+          height: $_sm-m;
+          width: calc(#{$_sm-m} * #{$w} + #{$_sm-g} * #{$w - 1});
+        } @else {
+          height: calc(#{$_sm-m} * #{$h} + #{$_sm-g} * #{$h - 1});
+          width: calc(#{$_sm-m} * #{$w} + #{$_sm-g} * #{$w - 1});
+        }
+      }
+    }
+  }
+
+  .ug-module--sm-auto-height { height: auto; }
+  .ug-module--sm-no-margin { margin-right: 0; }
+}
+
+// ---- Tablet (md): 6 columns ----
+
+@media screen and (min-width: 1024px) {
+  $_md: map.get($ug-module-grid, "md");
+  $_md-g: map.get($_md, gutter);
+  $_md-m: map.get($_md, module);
+  $_md-margin: map.get($_md, margin);
+
+  .ug-modules { padding: $_md-g 0 0 $_md-margin; gap: $_md-g; }
+  .ug-module { margin: 0; }
+
+  @each $w in (1, 2, 3, 4, 6) {
+    @for $h from 1 through $ug-module-max-height {
+      .ug-module--#{$h}x#{$w},
+      .ug-module--md-#{$h}x#{$w} {
+        @if $w == 1 {
+          height: calc(#{$_md-m} * #{$h} + #{$_md-g} * #{$h - 1});
+          width: $_md-m;
+        } @else if $h == 1 {
+          height: $_md-m;
+          width: calc(#{$_md-m} * #{$w} + #{$_md-g} * #{$w - 1});
+        } @else {
+          height: calc(#{$_md-m} * #{$h} + #{$_md-g} * #{$h - 1});
+          width: calc(#{$_md-m} * #{$w} + #{$_md-g} * #{$w - 1});
+        }
+      }
+    }
+  }
+
+  .ug-module--md-auto-height { height: auto; }
+  .ug-module--md-no-margin { margin-right: 0; }
+}
+
+// ---- Laptop (lg): 8 columns ----
+
+@media screen and (min-width: 1300px) {
+  $_lg: map.get($ug-module-grid, "lg");
+  $_lg-g: map.get($_lg, gutter);
+  $_lg-m: map.get($_lg, module);
+  $_lg-margin: map.get($_lg, margin);
+
+  .ug-modules { padding: $_lg-g 0 0 $_lg-margin; gap: $_lg-g; }
+  .ug-module { margin: 0; }
+
+  @each $w in (1, 2, 3, 4, 6, 8) {
+    @for $h from 1 through $ug-module-max-height {
+      .ug-module--#{$h}x#{$w},
+      .ug-module--lg-#{$h}x#{$w} {
+        @if $w == 1 {
+          height: calc(#{$_lg-m} * #{$h} + #{$_lg-g} * #{$h - 1});
+          width: $_lg-m;
+        } @else if $h == 1 {
+          height: $_lg-m;
+          width: calc(#{$_lg-m} * #{$w} + #{$_lg-g} * #{$w - 1});
+        } @else {
+          height: calc(#{$_lg-m} * #{$h} + #{$_lg-g} * #{$h - 1});
+          width: calc(#{$_lg-m} * #{$w} + #{$_lg-g} * #{$w - 1});
+        }
+      }
+    }
+  }
+
+  .ug-module--lg-auto-height { height: auto; }
+  .ug-module--lg-no-margin { margin-right: 0; }
+}
+
+// ---- Desktop (xl): 12 columns ----
+
+@media screen and (min-width: 1600px) {
+  $_xl: map.get($ug-module-grid, "xl");
+  $_xl-g: map.get($_xl, gutter);
+  $_xl-m: map.get($_xl, module);
+  $_xl-margin: map.get($_xl, margin);
+
+  .ug-modules { padding: $_xl-g 0 0 $_xl-margin; gap: $_xl-g; }
+  .ug-module { margin: 0; }
+
+  @each $w in (1, 2, 3, 4, 6, 8, 12) {
+    @for $h from 1 through $ug-module-max-height {
+      .ug-module--#{$h}x#{$w},
+      .ug-module--xl-#{$h}x#{$w} {
+        @if $w == 1 {
+          height: calc(#{$_xl-m} * #{$h} + #{$_xl-g} * #{$h - 1});
+          width: $_xl-m;
+        } @else if $h == 1 {
+          height: $_xl-m;
+          width: calc(#{$_xl-m} * #{$w} + #{$_xl-g} * #{$w - 1});
+        } @else {
+          height: calc(#{$_xl-m} * #{$h} + #{$_xl-g} * #{$h - 1});
+          width: calc(#{$_xl-m} * #{$w} + #{$_xl-g} * #{$w - 1});
+        }
+      }
+    }
+  }
+
+  .ug-module--xl-auto-height { height: auto; }
+  .ug-module--xl-no-margin { margin-right: 0; }
+}
+
+// ---- Responsive Visibility ----
+
+.ug-module--hidden-xl { @media screen and (min-width: 1600px) { display: none; } }
+.ug-module--hidden-lg { @media screen and (min-width: 1300px) and (max-width: 1599px) { display: none; } }
+.ug-module--hidden-md { @media screen and (min-width: 1024px) and (max-width: 1299px) { display: none; } }
+.ug-module--hidden-sm { @media screen and (min-width: 640px) and (max-width: 1023px) { display: none; } }
+.ug-module--hidden-xs { @media screen and (max-width: 639px) { display: none; } }