unigrid.css 0.3.0

package/src/scss/_sidebar.scss

@@ -0,0 +1,147 @@
+// ==========================================================================
+// Unigrid CSS Framework — Sidebar Layout (BEM)
+//
+// Flexible sidebar + main content layout. Sidebar width configurable
+// via CSS custom property --ug-sidebar-width.
+//
+// Block: .ug-sidebar-layout
+// Elements: __sidebar, __main
+// Modifiers: --right, --sticky, --bordered
+//            __sidebar--collapse (hidden on mobile)
+//
+// Usage:
+//   <div class="ug-sidebar-layout" style="--ug-sidebar-width: 20rem">
+//     <aside class="ug-sidebar-layout__sidebar">...</aside>
+//     <main class="ug-sidebar-layout__main">...</main>
+//   </div>
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-sidebar-layout {
+  --ug-sidebar-width: calc(var(--ug-leading) * 12);
+  display: flex;
+  width: 100%;
+  min-height: 0;
+
+  // ---- Sidebar ----
+  &__sidebar {
+    width: var(--ug-sidebar-width);
+    flex-shrink: 0;
+    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+
+    // Collapse on mobile by default
+    @include ug-breakpoint-down("md") {
+      display: none;
+    }
+  }
+
+  // ---- Main Content ----
+  &__main {
+    flex: 1;
+    min-width: 0;
+    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Sidebar on the right
+  &--right {
+    flex-direction: row-reverse;
+  }
+
+  // Sticky sidebar
+  &--sticky {
+    .ug-sidebar-layout__sidebar {
+      position: sticky;
+      top: 0;
+      align-self: flex-start;
+      max-height: 100vh;
+      overflow-y: auto;
+    }
+  }
+
+  // Bordered separator
+  &--bordered {
+    .ug-sidebar-layout__sidebar {
+      border-right: 1px solid $ug-light-gray;
+    }
+
+    &.ug-sidebar-layout--right .ug-sidebar-layout__sidebar {
+      border-right: none;
+      border-left: 1px solid $ug-light-gray;
+    }
+  }
+
+  // ==============================
+  // Sidebar element modifiers
+  // ==============================
+
+  // Show sidebar on mobile (override default collapse)
+  &__sidebar--visible {
+    @include ug-breakpoint-down("md") {
+      display: block;
+    }
+  }
+
+  // ==============================
+  // Sidebar Navigation (optional)
+  // ==============================
+
+  &__nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__nav-item {
+    display: block;
+  }
+
+  &__nav-link {
+    display: flex;
+    align-items: center;
+    padding: calc(var(--ug-leading) * 0.5) 0;
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-dark-gray;
+    text-decoration: none;
+    border-bottom: 1px solid $ug-light-gray;
+    transition: color 0.15s;
+
+    &:hover {
+      color: $ug-black;
+    }
+
+    &--active {
+      @include ug-font-weight("bold");
+      color: $ug-black;
+    }
+  }
+
+  // ==============================
+  // Responsive
+  // ==============================
+
+  @include ug-breakpoint-down("md") {
+    flex-direction: column;
+
+    &__main {
+      padding: var(--ug-leading);
+    }
+
+    &--right {
+      flex-direction: column;
+    }
+
+    // Remove border on mobile
+    &--bordered .ug-sidebar-layout__sidebar {
+      border-right: none;
+      border-left: none;
+      border-bottom: 1px solid $ug-light-gray;
+    }
+  }
+}

package/src/scss/_table.scss

@@ -0,0 +1,122 @@
+// ==========================================================================
+// Unigrid CSS Framework — Table (BEM)
+//
+// Block: .ug-table
+// Elements: __header, __row, __cell
+// Modifiers: --striped, --bordered, --compact, --dark, --hover
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  @include ug-rhythm-margin-bottom(1);
+
+  font-feature-settings: 'tnum' 1;
+
+  // ---- Header ----
+  th {
+    @include ug-font-size("sm");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: $ug-medium-gray;
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
+    border-bottom: 2px solid $ug-black;
+    vertical-align: bottom;
+  }
+
+  // ---- Cells ----
+  td {
+    @include ug-font-size("base");
+    @include ug-rhythm-line-height(1);
+    text-align: left;
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
+    border-bottom: 1px solid $ug-light-gray;
+    vertical-align: top;
+  }
+
+  // ---- Caption ----
+  caption {
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    @include ug-rhythm-margin-bottom(0.5);
+    color: $ug-medium-gray;
+    text-align: left;
+    caption-side: top;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Striped rows
+  &--striped {
+    tbody tr:nth-child(even) {
+      background-color: $ug-warm-gray;
+    }
+  }
+
+  // All borders
+  &--bordered {
+    th,
+    td {
+      border: 1px solid $ug-light-gray;
+    }
+
+    th {
+      border-bottom-width: 2px;
+      border-bottom-color: $ug-black;
+    }
+  }
+
+  // Compact: less padding
+  &--compact {
+    th,
+    td {
+      @include ug-font-size("sm");
+      padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
+    }
+  }
+
+  // Dark header
+  &--dark {
+    th {
+      background-color: $ug-black;
+      color: $ug-white;
+      border-bottom-color: $ug-black;
+    }
+  }
+
+  // Row hover
+  &--hover {
+    tbody tr {
+      transition: background-color 0.1s;
+
+      &:hover {
+        background-color: $ug-warm-gray;
+      }
+    }
+  }
+
+  // ==============================
+  // Responsive wrapper
+  // ==============================
+}
+
+// Horizontally scrollable table on small screens
+.ug-table-responsive {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  @include ug-rhythm-margin-bottom(1);
+
+  .ug-table {
+    margin-bottom: 0;
+  }
+}

package/src/scss/_tabs.scss

@@ -0,0 +1,178 @@
+// ==========================================================================
+// Unigrid CSS Framework — Tabs (BEM)
+//
+// Tab navigation with content panels. Toggle via JS (.ug-tab--active).
+//
+// Block: .ug-tabs
+// Elements: __nav, __item, __link, __content, __panel
+// Modifiers: --bordered, --pills, --vertical
+//            __link--active, __panel--active
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-tabs {
+
+  // ---- Tab Navigation ----
+  &__nav {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-bottom: 2px solid $ug-light-gray;
+  }
+
+  &__item {
+    display: flex;
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
+    @include ug-font-size("sm");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    color: $ug-medium-gray;
+    text-decoration: none;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-family: inherit;
+    position: relative;
+    transition: color 0.15s;
+    margin-bottom: -2px;
+    border-bottom: 2px solid transparent;
+
+    &:hover {
+      color: $ug-black;
+    }
+
+    &--active {
+      color: $ug-black;
+      border-bottom-color: $ug-black;
+    }
+  }
+
+  // ---- Tab Content ----
+  &__content {
+    padding: var(--ug-leading) 0;
+  }
+
+  &__panel {
+    display: none;
+
+    &--active {
+      display: block;
+    }
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Bordered tabs (box around active tab)
+  &--bordered {
+    .ug-tabs__nav {
+      border-bottom: 1px solid $ug-light-gray;
+    }
+
+    .ug-tabs__link {
+      border: 1px solid transparent;
+      border-bottom: none;
+      margin-bottom: -1px;
+      padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
+
+      &--active {
+        border-color: $ug-light-gray;
+        background-color: $ug-white;
+        // Hide bottom border by overlapping the nav border
+        box-shadow: 0 1px 0 0 $ug-white;
+      }
+    }
+  }
+
+  // Pill tabs (rounded backgrounds)
+  &--pills {
+    .ug-tabs__nav {
+      border-bottom: none;
+      gap: calc(var(--ug-leading) * 0.25);
+    }
+
+    .ug-tabs__link {
+      border-bottom: none;
+      margin-bottom: 0;
+      border-radius: 2px;
+
+      &:hover {
+        background-color: $ug-warm-gray;
+      }
+
+      &--active {
+        background-color: $ug-black;
+        color: $ug-white;
+
+        &:hover {
+          background-color: $ug-dark-gray;
+        }
+      }
+    }
+  }
+
+  // Vertical tabs (sidebar layout)
+  &--vertical {
+    display: flex;
+    gap: var(--ug-leading);
+
+    .ug-tabs__nav {
+      flex-direction: column;
+      border-bottom: none;
+      border-right: 2px solid $ug-light-gray;
+      flex-shrink: 0;
+      min-width: calc(var(--ug-leading) * 8);
+    }
+
+    .ug-tabs__link {
+      margin-bottom: 0;
+      margin-right: -2px;
+      border-bottom: none;
+      border-right: 2px solid transparent;
+
+      &--active {
+        border-right-color: $ug-black;
+        border-bottom-color: transparent;
+      }
+    }
+
+    .ug-tabs__content {
+      flex: 1;
+      padding: 0;
+    }
+
+    @include ug-breakpoint-down("md") {
+      flex-direction: column;
+
+      .ug-tabs__nav {
+        flex-direction: row;
+        border-right: none;
+        border-bottom: 2px solid $ug-light-gray;
+        min-width: 0;
+        overflow-x: auto;
+      }
+
+      .ug-tabs__link {
+        margin-right: 0;
+        margin-bottom: -2px;
+        border-right: none;
+        border-bottom: 2px solid transparent;
+        white-space: nowrap;
+
+        &--active {
+          border-right-color: transparent;
+          border-bottom-color: $ug-black;
+        }
+      }
+    }
+  }
+}

package/src/scss/_typography.scss

@@ -0,0 +1,105 @@
+// ==========================================================================
+// Unigrid CSS Framework — Typography (BEM)
+//
+// Utility classes for typography. Vertical spacing aligned to the
+// Gutenberg leading ($ug-leading-rem) for consistent rhythm.
+// ==========================================================================
+
+@use "sass:list";
+@use "sass:map";
+@use "variables" as *;
+@use "mixins" as *;
+
+// ---- Headings (from $ug-headings map) ----
+// Styles applied to both the HTML element (h1-h6) and the utility class (.ug-h1-.ug-h6).
+// The .ug-h* classes are for non-heading elements that need heading styling.
+
+@each $heading, $props in $ug-headings {
+  #{$heading},
+  .ug-#{$heading} {
+    @include ug-rhythm-font-size(list.nth($props, 1));
+    @include ug-rhythm-line-height(list.nth($props, 2));
+    @include ug-font-weight("bold");
+    @include ug-rhythm-margin-bottom(0.5);
+    margin-top: 0;
+
+    @if $heading == "h1" {
+      @include ug-font-weight("extra-bold");
+      letter-spacing: -0.02em;
+    }
+  }
+}
+
+// ---- Body Text ----
+
+.ug-body {
+  @include ug-font-size("base");
+  @include ug-font-weight("regular");
+  @include ug-rhythm-line-height(1);
+
+  &--sm {
+    @include ug-font-size("sm");
+  }
+
+  &--lg {
+    @include ug-font-size("lg");
+  }
+}
+
+// ---- Lead / Intro Text ----
+
+.ug-lead {
+  @include ug-rhythm-font-size(1.2);
+  @include ug-font-weight("light");
+  @include ug-rhythm-line-height(1);
+  @include ug-rhythm-margin-bottom(0.5);
+  margin-top: 0;
+}
+
+// ---- Caption ----
+
+.ug-caption {
+  @include ug-font-size("xs");
+  @include ug-font-weight("regular");
+  @include ug-rhythm-line-height(1);
+  color: $ug-medium-gray;
+}
+
+// ---- Label ----
+
+.ug-label {
+  @include ug-font-size("xs");
+  @include ug-font-weight("bold");
+  @include ug-rhythm-line-height(1);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+// ---- Text Alignment ----
+
+.ug-text {
+  &--left { text-align: left; }
+  &--center { text-align: center; }
+  &--right { text-align: right; }
+}
+
+// ---- Text Colors ----
+
+@each $name, $color in $ug-colors {
+  .ug-text--#{$name} {
+    color: $color;
+  }
+}
+
+// ---- Multi-Column Text ----
+
+@for $i from 2 through 4 {
+  .ug-text--cols-#{$i} {
+    columns: $i;
+    column-gap: calc(var(--ug-leading) * 1.5);
+
+    @include ug-breakpoint-down("md") {
+      columns: 1;
+    }
+  }
+}

package/src/scss/_utilities.scss

@@ -0,0 +1,79 @@
+// ==========================================================================
+// Unigrid CSS Framework — Utilities (BEM-compatible)
+// ==========================================================================
+
+// ---- Full Width ----
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-full-width {
+  grid-column: 1 / -1;
+}
+
+// ---- Background Colors ----
+
+@each $name, $color in $ug-colors {
+  .ug-bg--#{$name} {
+    background-color: $color;
+
+    // Auto light text on dark backgrounds
+    @if $name == "black" or $name == "brown" or $name == "red" or $name == "green" or $name == "blue" or $name == "dark-gray" {
+      color: $ug-white;
+    }
+  }
+}
+
+// ---- Spacing Utilities ----
+// Uses var(--ug-leading) so values adapt at the desktop breakpoint.
+// Multipliers: 0=0, 1=0.25, 2=0.5, 3=1, 4=1.5, 5=2, 6=3, 7=4, 8=6
+
+$_ug-space-multipliers: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 2, 6: 3, 7: 4, 8: 6);
+
+@each $n, $mult in $_ug-space-multipliers {
+  @if $n == 0 {
+    .ug-p--0  { padding: 0; }
+    .ug-m--0  { margin: 0; }
+    .ug-mt--0 { margin-top: 0; }
+    .ug-mb--0 { margin-bottom: 0; }
+    .ug-ml--0 { margin-left: 0; }
+    .ug-mr--0 { margin-right: 0; }
+    .ug-pt--0 { padding-top: 0; }
+    .ug-pb--0 { padding-bottom: 0; }
+    .ug-pl--0 { padding-left: 0; }
+    .ug-pr--0 { padding-right: 0; }
+  } @else {
+    .ug-p--#{$n}  { padding: calc(var(--ug-leading) * #{$mult}); }
+    .ug-m--#{$n}  { margin: calc(var(--ug-leading) * #{$mult}); }
+    .ug-mt--#{$n} { margin-top: calc(var(--ug-leading) * #{$mult}); }
+    .ug-mb--#{$n} { margin-bottom: calc(var(--ug-leading) * #{$mult}); }
+    .ug-ml--#{$n} { margin-left: calc(var(--ug-leading) * #{$mult}); }
+    .ug-mr--#{$n} { margin-right: calc(var(--ug-leading) * #{$mult}); }
+    .ug-pt--#{$n} { padding-top: calc(var(--ug-leading) * #{$mult}); }
+    .ug-pb--#{$n} { padding-bottom: calc(var(--ug-leading) * #{$mult}); }
+    .ug-pl--#{$n} { padding-left: calc(var(--ug-leading) * #{$mult}); }
+    .ug-pr--#{$n} { padding-right: calc(var(--ug-leading) * #{$mult}); }
+  }
+}
+
+// ---- Display ----
+
+.ug-hidden { display: none; }
+.ug-block { display: block; }
+
+// ---- Responsive visibility ----
+
+@each $bp-name, $bp-value in $ug-breakpoints {
+  .ug-hidden--#{$bp-name}-up {
+    @media (min-width: $bp-value) {
+      display: none;
+    }
+  }
+
+  .ug-hidden--#{$bp-name}-down {
+    @media (max-width: $bp-value - 1px) {
+      display: none;
+    }
+  }
+}