unigrid.css 0.3.0

package/src/scss/_hero.scss

@@ -0,0 +1,262 @@
+// ==========================================================================
+// Unigrid CSS Framework — Hero (BEM)
+//
+// Full-width hero section for page introductions. Supports background
+// images, overlays, and flexible content positioning.
+//
+// Block: .ug-hero
+// Elements: __background, __overlay, __content, __title, __subtitle,
+//           __lead, __actions
+// Modifiers: --full, --half, --third, --dark, --light, --center, --bottom
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-hero {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: round(down, 50vh, var(--ug-leading));
+  padding: calc(var(--ug-leading) * 3) calc(var(--ug-leading) * 1.5);
+  color: $ug-white;
+  overflow: hidden;
+
+  // -- Background image --
+  &__background {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+
+    img,
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  // -- Overlay (darkens background for readability) --
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.7) 0%,
+      rgba(0, 0, 0, 0.2) 60%,
+      transparent 100%
+    );
+  }
+
+  // -- Content wrapper --
+  &__content {
+    position: relative;
+    z-index: 2;
+    max-width: $ug-container-max-width;
+    width: 100%;
+  }
+
+  // -- Title --
+  &__title {
+    @include ug-rhythm-font-size(2.5);
+    @include ug-rhythm-line-height(2);
+    @include ug-font-weight("black");
+    letter-spacing: -0.02em;
+    @include ug-rhythm-margin-bottom(1);
+    margin-top: 0;
+
+    @include ug-breakpoint-down("md") {
+      @include ug-rhythm-font-size(2);
+    }
+  }
+
+  // -- Subtitle --
+  &__subtitle {
+    @include ug-font-size("lg");
+    @include ug-font-weight("light");
+    @include ug-rhythm-line-height(1);
+    opacity: 0.85;
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  // -- Lead text --
+  &__lead {
+    @include ug-font-size("base");
+    @include ug-font-weight("regular");
+    @include ug-rhythm-line-height(1);
+    max-width: $ug-prose-max-width;
+    opacity: 0.8;
+    @include ug-rhythm-margin-bottom(1);
+    margin-top: 0;
+  }
+
+  // -- Action buttons area --
+  &__actions {
+    display: flex;
+    gap: var(--ug-leading);
+    flex-wrap: wrap;
+    @include ug-rhythm-margin-top(1);
+  }
+
+  // ==============================
+  // Height Modifiers
+  // ==============================
+
+  &--full {
+    min-height: round(down, 100vh, var(--ug-leading));
+  }
+
+  &--half {
+    min-height: round(down, 50vh, var(--ug-leading));
+  }
+
+  &--third {
+    min-height: round(down, 33vh, var(--ug-leading));
+  }
+
+  &--auto {
+    min-height: 0;
+  }
+
+  // ==============================
+  // Content Alignment
+  // ==============================
+
+  &--center {
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    .ug-hero__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .ug-hero__lead {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .ug-hero__actions {
+      justify-content: center;
+    }
+  }
+
+  &--bottom {
+    justify-content: flex-end;
+  }
+
+  &--top {
+    justify-content: flex-start;
+  }
+
+  // ==============================
+  // Color Variants
+  // ==============================
+
+  // Dark (default) — white text on dark background
+  &--dark {
+    background-color: $ug-black;
+    color: $ug-white;
+  }
+
+  // Light — dark text on light background
+  &--light {
+    background-color: $ug-warm-gray;
+    color: $ug-black;
+
+    .ug-hero__overlay {
+      background: linear-gradient(
+        to top,
+        rgba(255, 255, 255, 0.8) 0%,
+        rgba(255, 255, 255, 0.2) 60%,
+        transparent 100%
+      );
+    }
+  }
+
+  // NPS colors
+  &--brown {
+    background-color: $ug-brown;
+  }
+
+  &--green {
+    background-color: $ug-green;
+  }
+
+  &--blue {
+    background-color: $ug-blue;
+  }
+
+  &--red {
+    background-color: $ug-red;
+  }
+
+  // ==============================
+  // DIN Proportions
+  // ==============================
+
+  &--din {
+    @include ug-ratio-din(true);
+    min-height: 0;
+    // The DIN aspect ratio height is not a leading multiple.
+    // Round margin-bottom to snap the next element back onto the grid.
+    // Uses CSS round() (supported in modern browsers).
+    margin-bottom: calc(var(--ug-leading) - mod(100vw / #{$ug-ratio}, var(--ug-leading)));
+  }
+
+  // ==============================
+  // Responsive
+  // ==============================
+
+  @include ug-breakpoint-down("md") {
+    padding: calc(var(--ug-leading) * 2) var(--ug-leading);
+    min-height: round(down, 40vh, var(--ug-leading));
+
+    &--full {
+      min-height: round(down, 100vh, var(--ug-leading));
+    }
+  }
+}
+
+// ---- Hero Button ----
+// Simple button for use within .ug-hero__actions
+
+.ug-hero__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--ug-leading) * 0.5);
+  height: calc(var(--ug-leading) * 1.5);
+  padding: 0 var(--ug-leading);
+  @include ug-font-size("sm");
+  @include ug-font-weight("bold");
+  text-decoration: none;
+  border: 2px solid currentColor;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+
+  &:hover {
+    background-color: $ug-white;
+    color: $ug-black;
+  }
+
+  &--filled {
+    background-color: $ug-white;
+    color: $ug-black;
+    border-color: $ug-white;
+
+    &:hover {
+      background-color: transparent;
+      color: $ug-white;
+    }
+  }
+}

package/src/scss/_mixins.scss

@@ -0,0 +1,120 @@
+// ==========================================================================
+// Unigrid CSS Framework — Mixins
+// ==========================================================================
+
+@use "sass:map";
+@use "sass:math";
+@use "variables" as *;
+
+// ---- Responsive Breakpoint ----
+// Usage: @include ug-breakpoint("md") { ... }
+@mixin ug-breakpoint($name) {
+  @if map.has-key($ug-breakpoints, $name) {
+    @media (min-width: map.get($ug-breakpoints, $name)) {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint '#{$name}' not found in $ug-breakpoints.";
+  }
+}
+
+// ---- Max-width Breakpoint ----
+// Usage: @include ug-breakpoint-down("md") { ... }
+@mixin ug-breakpoint-down($name) {
+  @if map.has-key($ug-breakpoints, $name) {
+    @media (max-width: map.get($ug-breakpoints, $name) - 1px) {
+      @content;
+    }
+  }
+}
+
+// ---- Font Size Helper ----
+@mixin ug-font-size($size) {
+  @if map.has-key($ug-font-sizes, $size) {
+    font-size: map.get($ug-font-sizes, $size);
+  } @else {
+    font-size: $size;
+  }
+}
+
+// ---- Font Weight Helper ----
+@mixin ug-font-weight($weight) {
+  @if map.has-key($ug-font-weights, $weight) {
+    font-weight: map.get($ug-font-weights, $weight);
+  } @else {
+    font-weight: $weight;
+  }
+}
+
+// ---- Spacing Helper ----
+@function ug-space($n) {
+  @if map.has-key($ug-spaces, $n) {
+    @return map.get($ug-spaces, $n);
+  }
+  @return $n;
+}
+
+// ---- DIN Aspect Ratio ----
+@mixin ug-ratio-din($landscape: false) {
+  @if $landscape {
+    aspect-ratio: #{$ug-ratio} #{"/"} 1;
+  } @else {
+    aspect-ratio: 1 #{"/"} #{$ug-ratio};
+  }
+}
+
+// ---- Truncate Text ----
+@mixin ug-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ---- Visually Hidden (accessible) ----
+@mixin ug-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ==========================================================================
+// Vertical Rhythm Mixins (from Gutenberg)
+// All vertical spacing uses var(--ug-leading) which adapts at the
+// desktop breakpoint (26px mobile → 31px desktop).
+// ==========================================================================
+
+// ---- Rhythm Font Size ----
+@mixin ug-rhythm-font-size($number) {
+  font-size: #{$number}rem;
+}
+
+// ---- Rhythm Line Height ----
+@mixin ug-rhythm-line-height($number) {
+  line-height: calc(var(--ug-leading) * #{$number});
+}
+
+// ---- Rhythm Margin ----
+@mixin ug-rhythm-margin-top($number) {
+  margin-top: calc(var(--ug-leading) * #{$number});
+}
+
+@mixin ug-rhythm-margin-bottom($number) {
+  margin-bottom: calc(var(--ug-leading) * #{$number});
+}
+
+// ---- Rhythm Padding ----
+@mixin ug-rhythm-padding($top, $right, $bottom: null, $left: null) {
+  @if $bottom == null {
+    padding: calc(var(--ug-leading) * #{$top}) calc(var(--ug-leading) * #{$right});
+  } @else if $left == null {
+    padding: calc(var(--ug-leading) * #{$top}) calc(var(--ug-leading) * #{$right}) calc(var(--ug-leading) * #{$bottom});
+  } @else {
+    padding: calc(var(--ug-leading) * #{$top}) calc(var(--ug-leading) * #{$right}) calc(var(--ug-leading) * #{$bottom}) calc(var(--ug-leading) * #{$left});
+  }
+}

package/src/scss/_modules.scss

@@ -0,0 +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; } }