unigrid.css 0.3.0

package/src/scss/_components.scss

@@ -0,0 +1,140 @@
+// ==========================================================================
+// Unigrid CSS Framework — Components (BEM)
+//
+// Reusable components: infobox, map, image, divider, block.
+// Vertical spacing aligned to leading ($ug-leading-rem) for rhythm.
+// ==========================================================================
+
+// ---- Block ----
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-block {
+  @include ug-rhythm-padding(1, 1);
+
+  &--flush {
+    padding: 0;
+  }
+
+  & + & {
+    @include ug-rhythm-margin-top(1);
+  }
+}
+
+// ---- Map ----
+
+.ug-map {
+  width: 100%;
+  min-height: calc(var(--ug-leading) * 12 - 2px);
+  background-color: $ug-warm-gray;
+  border: 1px solid $ug-light-gray;
+  overflow: hidden;
+  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &--full {
+    grid-column: 1 / -1;
+    min-height: 50vh;
+  }
+}
+
+// ---- Infobox ----
+
+.ug-infobox {
+  background-color: $ug-warm-gray;
+  @include ug-rhythm-padding(1, 1);
+  border-left: 3px solid $ug-black;
+
+  &--dark {
+    background-color: $ug-black;
+    color: $ug-white;
+    border-left-color: $ug-white;
+  }
+
+  &__title {
+    @include ug-font-size("sm");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 0;
+  }
+}
+
+// ---- Image ----
+
+.ug-image {
+  width: 100%;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &--contain img {
+    object-fit: contain;
+  }
+
+  &--din {
+    @include ug-ratio-din(false);
+  }
+
+  &--din-landscape {
+    @include ug-ratio-din(true);
+  }
+}
+
+// ---- Divider ----
+// Total: 1 leading = padding-top(0.5) + border + padding-bottom(0.5)
+// The border sits in the vertical center of the 1 leading space.
+
+.ug-divider {
+  border: none;
+  border-top: 1px solid $ug-light-gray;
+  padding-top: calc(var(--ug-leading) * 0.5 - 1px);
+  padding-bottom: calc(var(--ug-leading) * 0.5);
+  grid-column: 1 / -1;
+
+  &--bold {
+    border-top: 3px solid $ug-black;
+    padding-top: calc(var(--ug-leading) * 0.5 - 3px);
+  }
+}
+
+// ---- Label Divider ----
+// Uppercase label with bottom border as subsection separator.
+// padding-bottom + border = exactly 1 leading, keeping content on-grid.
+//
+// Block: .ug-label-divider
+// Modifiers: --bold, --light
+
+.ug-label-divider {
+  @include ug-font-size("sm");
+  @include ug-font-weight("bold");
+  line-height: calc(var(--ug-leading) - 2px);
+  margin-bottom: calc(var(--ug-leading) * 0.5 - 2px);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: $ug-medium-gray;
+  border-bottom: 2px solid $ug-black;
+  @include ug-rhythm-margin-top(0.5);
+
+  &--bold {
+    line-height: calc(var(--ug-leading) - 3px);
+    border-bottom-width: 3px;
+    margin-bottom: calc(var(--ug-leading) * 0.5 - 3px);
+  }
+
+  &--light {
+    border-bottom-color: $ug-light-gray;
+  }
+}

package/src/scss/_container.scss

@@ -0,0 +1,54 @@
+// ==========================================================================
+// Unigrid CSS Framework — Container (BEM)
+//
+// Padding aligned to leading for vertical rhythm consistency.
+//
+// Block: .ug-container
+// Modifiers: --narrow, --wide, --fluid, --flush
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-container {
+  width: 100%;
+  padding-left: calc(var(--ug-leading) * 1.5);
+  padding-right: calc(var(--ug-leading) * 1.5);
+
+  // -- Centered, max-width container --
+  &--narrow {
+    max-width: $ug-container-max-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // -- Wider max-width --
+  &--wide {
+    max-width: 1600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // -- No max-width, no padding (true full-bleed) --
+  &--fluid {
+    max-width: none;
+  }
+
+  // -- No padding (for edge-to-edge content) --
+  &--flush {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // -- Responsive padding --
+  @include ug-breakpoint-down("md") {
+    padding-left: var(--ug-leading);
+    padding-right: var(--ug-leading);
+
+    &--flush {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}

package/src/scss/_dropdown.scss

@@ -0,0 +1,178 @@
+// ==========================================================================
+// Unigrid CSS Framework — Dropdown (BEM)
+//
+// Dropdown toggled via .ug-dropdown--open class (set by minimal JS).
+// Caret rotates when open. Works for buttons and navbar items.
+//
+// Block: .ug-dropdown
+// Elements: __trigger, __caret, __menu, __item, __link, __divider, __header
+// Modifiers: --open, --right, --up
+//
+// Usage:
+//   <div class="ug-dropdown">
+//     <button class="ug-btn ug-dropdown__trigger">
+//       Actions <span class="ug-dropdown__caret"></span>
+//     </button>
+//     <ul class="ug-dropdown__menu">
+//       <li class="ug-dropdown__item"><a class="ug-dropdown__link" href="#">Edit</a></li>
+//     </ul>
+//   </div>
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-dropdown {
+  position: relative;
+  display: inline-flex;
+
+  // ---- Trigger (button or link) ----
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--ug-leading) * 0.25);
+    cursor: pointer;
+    user-select: none;
+
+    // Reset button defaults only when NOT a .ug-btn
+    &:is(button):not(.ug-btn) {
+      background: none;
+      border: none;
+      padding: 0;
+      font: inherit;
+      @include ug-font-weight("light");
+    }
+  }
+
+  // ---- Caret ----
+  &__caret {
+    display: inline-block;
+    width: 0.5em;
+    height: 0.5em;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 0.2s;
+    margin-top: -0.15em;
+    flex-shrink: 0;
+  }
+
+  // ---- Dropdown Menu ----
+  &__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 100;
+    display: none;
+    min-width: 12rem;
+    padding: calc(var(--ug-leading) * 0.25) 0;
+    background-color: $ug-white;
+    border: 1px solid $ug-light-gray;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    list-style: none;
+    margin: 0;
+  }
+
+  // ---- Open State ----
+  &--open > &__menu {
+    display: block;
+  }
+
+  &--open > &__trigger &__caret {
+    transform: rotate(-135deg);
+    margin-top: 0.15em;
+  }
+
+  // ---- Menu Item ----
+  &__item {
+    display: block;
+  }
+
+  // ---- Menu Link ----
+  &__link {
+    display: block;
+    padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-dark-gray;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background-color 0.1s, color 0.1s;
+
+    &:hover {
+      background-color: $ug-warm-gray;
+      color: $ug-black;
+    }
+
+    &--active {
+      @include ug-font-weight("bold");
+      color: $ug-black;
+    }
+  }
+
+  // ---- Menu Divider ----
+  &__divider {
+    height: 1px;
+    background-color: $ug-light-gray;
+    margin: calc(var(--ug-leading) * 0.25) 0;
+  }
+
+  // ---- Menu Header ----
+  &__header {
+    display: block;
+    padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("xs");
+    @include ug-font-weight("bold");
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: $ug-medium-gray;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Active state (current page is in this dropdown)
+  &--active {
+    > .ug-navbar__link {
+      color: $ug-white !important;
+    }
+  }
+
+  &--active > &__trigger {
+    color: $ug-black;
+  }
+
+  // ---- Navbar context ----
+  // When .ug-dropdown is inside .ug-navbar, the trigger inherits navbar link styles.
+  .ug-navbar & {
+    align-items: stretch;
+  }
+
+  .ug-navbar &__trigger:is(button) {
+    padding: 0 calc(var(--ug-leading) * 0.5);
+  }
+
+  // Right-aligned menu
+  &--right > &__menu {
+    left: auto;
+    right: 0;
+  }
+
+  // Upward menu
+  &--up > &__menu {
+    top: auto;
+    bottom: 100%;
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  &--up > &__trigger &__caret {
+    transform: rotate(-135deg);
+    margin-top: 0.15em;
+  }
+
+  &--up#{&}--open > &__trigger &__caret {
+    transform: rotate(45deg);
+    margin-top: -0.15em;
+  }
+}

package/src/scss/_footer.scss

@@ -0,0 +1,147 @@
+// ==========================================================================
+// Unigrid CSS Framework — Footer (BEM)
+//
+// Sticky footer that always sits at the bottom of the viewport.
+// All spacing aligned to var(--ug-leading).
+//
+// Block: .ug-footer
+// Elements: __inner, __brand, __text, __nav, __link, __divider
+// Modifiers: --compact, --dark (default), --light
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+// Ensure footer stays at bottom
+html, body {
+  min-height: 100vh;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+
+  > *:not(.ug-footer) {
+    flex-shrink: 0;
+  }
+
+  > .ug-footer {
+    margin-top: auto;
+  }
+}
+
+.ug-footer {
+  width: 100%;
+  background-color: $ug-black;
+  color: $ug-white;
+  padding: calc(var(--ug-leading) * 3) calc(var(--ug-leading) * 1.5);
+
+  // ---- Inner container ----
+  &__inner {
+    max-width: $ug-container-max-width;
+    margin: 0 auto;
+  }
+
+  // ---- Brand ----
+  &__brand {
+    @include ug-font-size("lg");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    @include ug-rhythm-margin-bottom(1);
+    color: $ug-white;
+    text-decoration: none;
+    display: block;
+  }
+
+  // ---- Text ----
+  &__text {
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: rgba(255, 255, 255, 0.5);
+    margin: 0;
+  }
+
+  // ---- Navigation ----
+  &__nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ug-leading);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__link {
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: rgba(255, 255, 255, 0.7);
+    text-decoration: none;
+    transition: color 0.15s;
+
+    &:hover {
+      color: $ug-white;
+    }
+  }
+
+  // ---- Divider ----
+  // 1 leading height: padding-top + 1px border = 1 leading
+  &__divider {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: calc(var(--ug-leading) - 1px);
+    margin: 0;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Compact: 1 leading padding, single line
+  // Total: padding(1) + content(1 line-height) + padding(1) = 3 leading
+  &--compact {
+    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+
+    .ug-footer__inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: var(--ug-leading);
+    }
+
+    .ug-footer__brand {
+      margin-bottom: 0;
+      @include ug-font-size("sm");
+    }
+
+    .ug-footer__nav {
+      margin-bottom: 0;
+    }
+  }
+
+  // Light
+  &--light {
+    background-color: $ug-warm-gray;
+    color: $ug-black;
+
+    .ug-footer__brand { color: $ug-black; }
+    .ug-footer__text { color: $ug-medium-gray; }
+    .ug-footer__link {
+      color: $ug-dark-gray;
+      &:hover { color: $ug-black; }
+    }
+    .ug-footer__divider { border-top-color: $ug-light-gray; }
+  }
+
+  // ==============================
+  // Responsive
+  // ==============================
+
+  @include ug-breakpoint-down("md") {
+    padding: calc(var(--ug-leading) * 2) var(--ug-leading);
+
+    &--compact {
+      padding: var(--ug-leading);
+    }
+  }
+}

package/src/scss/_formats.scss

@@ -0,0 +1,64 @@
+// ==========================================================================
+// Unigrid CSS Framework — 10 Basic Formats (BEM)
+//
+// Real Unigrid specifications:
+// - A-series: 1 panel wide × N panels long (A1, A2, A3, A4, A6)
+// - B-series: 2 panels wide × N panels long (B1, B2, B3, B4, B6)
+// - No A5 or B5 — intentionally skipped
+// - Panel unit: 99 × 210 mm (folded size is always constant)
+// - B6 = DIN/ISO A2 = root-two rectangle (420 × 594 mm)
+//
+// Block: .ug-format
+// Modifiers: --a1, --a2, --a3, --a4, --a6, --b1, --b2, --b3, --b4, --b6
+// ==========================================================================
+
+@use "sass:map";
+@use "variables" as *;
+@use "mixins" as *;
+
+// ---- Base Format Block ----
+
+.ug-format {
+  width: 100%;
+  max-width: 100%;
+  margin-inline: auto;
+  position: relative;
+}
+
+// ---- Generate Format Modifiers ----
+
+@each $name, $config in $ug-formats {
+  $panels-wide: map.get($config, panels-wide);
+  $panels-long: map.get($config, panels-long);
+  $cols: $panels-long;
+
+  .ug-format--#{$name} {
+    --ug-panels-wide: #{$panels-wide};
+    --ug-panels-long: #{$panels-long};
+    --ug-format-cols: #{$cols};
+  }
+}
+
+// ---- Format Grid Override ----
+
+@each $name, $config in $ug-formats {
+  $panels-long: map.get($config, panels-long);
+
+  .ug-format--#{$name} > .ug-broadside,
+  .ug-format--#{$name} > .ug-grid {
+    grid-template-columns: repeat(#{$panels-long}, 1fr);
+  }
+}
+
+// ---- DIN Aspect Ratio Helpers ----
+
+.ug-ratio {
+  &--din {
+    aspect-ratio: 1 #{"/"} #{$ug-ratio};
+  }
+
+  &--din-landscape {
+    aspect-ratio: #{$ug-ratio} #{"/"} 1;
+  }
+}
+