unigrid.css 0.3.0

package/src/scss/_accordion.scss

@@ -0,0 +1,123 @@
+// ==========================================================================
+// Unigrid CSS Framework — Accordion (BEM)
+//
+// Pure HTML/CSS accordion using <details>/<summary>. No JS required.
+// Caret rotates when open.
+//
+// Block: .ug-accordion
+// Elements: __item, __header, __caret, __body
+// Modifiers: --bordered, --flush, --dark
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-accordion {
+
+  // ---- Item (details element) ----
+  &__item {
+    border-bottom: 1px solid $ug-light-gray;
+
+    &[open] > .ug-accordion__header .ug-accordion__caret {
+      transform: rotate(-135deg);
+    }
+  }
+
+  // ---- Header (summary element) ----
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--ug-leading) * 0.5) 0;
+    @include ug-font-size("base");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+    transition: color 0.15s;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      content: "";
+    }
+
+    &:hover {
+      color: $ug-medium-gray;
+    }
+  }
+
+  // ---- Caret ----
+  &__caret {
+    display: inline-block;
+    width: 0.6em;
+    height: 0.6em;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 0.2s;
+    flex-shrink: 0;
+    margin-left: var(--ug-leading);
+  }
+
+  // ---- Body ----
+  &__body {
+    padding: 0 0 var(--ug-leading) 0;
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-dark-gray;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Bordered: border on all sides
+  &--bordered {
+    border: 1px solid $ug-light-gray;
+
+    .ug-accordion__item {
+      border-bottom: 1px solid $ug-light-gray;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .ug-accordion__header {
+      padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
+    }
+
+    .ug-accordion__body {
+      padding: 0 var(--ug-leading) var(--ug-leading);
+    }
+  }
+
+  // Flush: no borders at all
+  &--flush {
+    .ug-accordion__item {
+      border-bottom: none;
+    }
+  }
+
+  // Dark
+  &--dark {
+    background-color: $ug-black;
+    color: $ug-white;
+
+    .ug-accordion__item {
+      border-bottom-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .ug-accordion__header:hover {
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    .ug-accordion__body {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}

package/src/scss/_broadside.scss

@@ -0,0 +1,125 @@
+// ==========================================================================
+// Unigrid CSS Framework — Broadside & Panel Layout (BEM)
+//
+// The broadside is the fully opened, unfolded sheet.
+// A-series: 1 panel wide × N panels long → single row of panels
+// B-series: 2 panels wide × N panels long → two rows of panels
+//
+// Block: .ug-broadside
+// Elements: (children are .ug-panel blocks)
+// Modifiers: --full-height, --din, --stack
+//
+// Block: .ug-panel
+// Elements: __header, __body, __footer
+// Modifiers: --flush, --dark, --gray, --accent, --span-{n}
+// ==========================================================================
+
+// ---- Broadside Block ----
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-broadside {
+  display: grid;
+  grid-template-columns: repeat(var(--ug-format-cols, $ug-columns), 1fr);
+  gap: var(--ug-leading);
+  width: 100%;
+  min-height: 0;
+
+  &--full-height {
+    min-height: 100vh;
+  }
+
+  &--din {
+    @include ug-ratio-din(true);
+  }
+
+  &--stack {
+    @include ug-breakpoint-down("md") {
+      grid-template-columns: 1fr;
+
+      > .ug-panel {
+        grid-column: span 1;
+        display: block;
+      }
+
+      > .ug-fold {
+        display: none;
+      }
+    }
+  }
+}
+
+// ---- Panel Block ----
+
+.ug-panel {
+  grid-column: span 1;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: auto 1fr auto;
+  padding: var(--ug-leading);
+  min-height: 0;
+
+  // -- Elements --
+  &__header {
+    grid-row: 1;
+    grid-column: 1 / -1;
+  }
+
+  &__body {
+    grid-row: 2;
+    grid-column: 1 / -1;
+  }
+
+  &__footer {
+    grid-row: 3;
+    grid-column: 1 / -1;
+  }
+
+  // -- Modifiers --
+  &--flush {
+    padding: 0;
+  }
+
+  &--dark {
+    background-color: $ug-black;
+    color: $ug-white;
+  }
+
+  &--gray {
+    background-color: $ug-warm-gray;
+  }
+
+  &--accent {
+    background-color: $ug-red;
+    color: $ug-white;
+  }
+
+  // -- Span modifiers for multi-column panels --
+  @for $i from 2 through 6 {
+    &--span-#{$i} {
+      grid-column: span $i;
+    }
+  }
+}
+
+// ---- Fold Lines ----
+
+.ug-fold {
+  grid-row: 1 / -1;
+  width: 1px;
+  background-color: $ug-light-gray;
+  justify-self: end;
+  pointer-events: none;
+
+  &--dashed {
+    background: repeating-linear-gradient(
+      to bottom,
+      $ug-light-gray 0,
+      $ug-light-gray 6px,
+      transparent 6px,
+      transparent 12px
+    );
+  }
+}

package/src/scss/_buttons.scss

@@ -0,0 +1,241 @@
+// ==========================================================================
+// Unigrid CSS Framework — Buttons (BEM)
+//
+// Block: .ug-btn
+// Elements: __icon
+// Modifiers: --black, --brown, --red, --green, --blue, --light, --ghost,
+//            --sm, --lg, --block, --disabled
+// ==========================================================================
+
+@use "sass:color";
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-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("base");
+  @include ug-font-weight("bold");
+  font-family: inherit;
+  text-decoration: none;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  border: 2px solid $ug-black;
+  background-color: $ug-black;
+  color: $ug-white;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+
+  &:hover {
+    background-color: $ug-dark-gray;
+    border-color: $ug-dark-gray;
+    color: $ug-white;
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: color.adjust($ug-black, $lightness: -5%);
+    border-color: color.adjust($ug-black, $lightness: -5%);
+  }
+
+  // ==============================
+  // Color Variants
+  // ==============================
+
+  &--brown {
+    background-color: $ug-brown;
+    border-color: $ug-brown;
+
+    &:hover {
+      background-color: color.adjust($ug-brown, $lightness: 8%);
+      border-color: color.adjust($ug-brown, $lightness: 8%);
+    }
+  }
+
+  &--red {
+    background-color: $ug-red;
+    border-color: $ug-red;
+
+    &:hover {
+      background-color: color.adjust($ug-red, $lightness: 8%);
+      border-color: color.adjust($ug-red, $lightness: 8%);
+    }
+  }
+
+  &--green {
+    background-color: $ug-green;
+    border-color: $ug-green;
+
+    &:hover {
+      background-color: color.adjust($ug-green, $lightness: 8%);
+      border-color: color.adjust($ug-green, $lightness: 8%);
+    }
+  }
+
+  &--blue {
+    background-color: $ug-blue;
+    border-color: $ug-blue;
+
+    &:hover {
+      background-color: color.adjust($ug-blue, $lightness: 8%);
+      border-color: color.adjust($ug-blue, $lightness: 8%);
+    }
+  }
+
+  // Light: dark text on light bg
+  &--light {
+    background-color: $ug-warm-gray;
+    border-color: $ug-warm-gray;
+    color: $ug-black;
+
+    &:hover {
+      background-color: color.adjust($ug-warm-gray, $lightness: -5%);
+      border-color: color.adjust($ug-warm-gray, $lightness: -5%);
+      color: $ug-black;
+    }
+  }
+
+  // ==============================
+  // Outline / Ghost Variants
+  // ==============================
+
+  // Outline: transparent bg, colored border + text
+  &--outline {
+    background-color: transparent;
+    color: $ug-black;
+
+    &:hover {
+      background-color: $ug-black;
+      color: $ug-white;
+    }
+
+    // Outline color variants
+    &.ug-btn--brown {
+      border-color: $ug-brown;
+      color: $ug-brown;
+      background-color: transparent;
+      &:hover { background-color: $ug-brown; color: $ug-white; }
+    }
+
+    &.ug-btn--red {
+      border-color: $ug-red;
+      color: $ug-red;
+      background-color: transparent;
+      &:hover { background-color: $ug-red; color: $ug-white; }
+    }
+
+    &.ug-btn--green {
+      border-color: $ug-green;
+      color: $ug-green;
+      background-color: transparent;
+      &:hover { background-color: $ug-green; color: $ug-white; }
+    }
+
+    &.ug-btn--blue {
+      border-color: $ug-blue;
+      color: $ug-blue;
+      background-color: transparent;
+      &:hover { background-color: $ug-blue; color: $ug-white; }
+    }
+
+    &.ug-btn--light {
+      border-color: $ug-light-gray;
+      color: $ug-dark-gray;
+      background-color: transparent;
+      &:hover { background-color: $ug-warm-gray; color: $ug-black; }
+    }
+  }
+
+  // Ghost: no border, just text with hover bg
+  &--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: $ug-black;
+
+    &:hover {
+      background-color: $ug-warm-gray;
+      border-color: $ug-warm-gray;
+      color: $ug-black;
+    }
+  }
+
+  // ==============================
+  // Size Variants
+  // ==============================
+
+  // sm = 1 leading height
+  &--sm {
+    @include ug-font-size("sm");
+    height: var(--ug-leading);
+    padding: 0 calc(var(--ug-leading) * 0.5);
+  }
+
+  // lg = 2 leading height
+  &--lg {
+    @include ug-font-size("lg");
+    height: calc(var(--ug-leading) * 2);
+    padding: 0 calc(var(--ug-leading) * 1.5);
+  }
+
+  // ==============================
+  // Layout Variants
+  // ==============================
+
+  // Full width
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  // ==============================
+  // States
+  // ==============================
+
+  &--disabled,
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // ==============================
+  // Icon element
+  // ==============================
+
+  &__icon {
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // ==============================
+  // Button Group
+  // ==============================
+}
+
+.ug-btn-group {
+  display: inline-flex;
+  gap: 0;
+
+  .ug-btn {
+    border-radius: 0;
+
+    &:not(:last-child) {
+      border-right-width: 1px;
+    }
+
+    &:not(:first-child) {
+      border-left-width: 1px;
+    }
+  }
+}

package/src/scss/_card.scss

@@ -0,0 +1,168 @@
+// ==========================================================================
+// Unigrid CSS Framework — Card (BEM)
+//
+// Block: .ug-card
+// Elements: __image, __body, __title, __subtitle, __text, __footer, __actions
+// Modifiers: --dark, --bordered, --flat, --horizontal
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-card {
+  display: flex;
+  flex-direction: column;
+  background-color: $ug-white;
+  border: 1px solid $ug-light-gray;
+  overflow: hidden;
+
+  // ---- Image ----
+  &__image {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    // Fixed aspect ratios
+    &--square { aspect-ratio: 1; }
+    &--landscape { aspect-ratio: 16 / 9; }
+    &--din { aspect-ratio: 1.4142 / 1; }
+  }
+
+  // ---- Body ----
+  &__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+  }
+
+  // ---- Title ----
+  &__title {
+    @include ug-rhythm-font-size(1.2);
+    @include ug-rhythm-line-height(1);
+    @include ug-font-weight("bold");
+    @include ug-rhythm-margin-bottom(0.5);
+    margin-top: 0;
+  }
+
+  // ---- Subtitle ----
+  &__subtitle {
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-medium-gray;
+    margin-top: 0;
+    @include ug-rhythm-margin-bottom(0.5);
+  }
+
+  // ---- Text ----
+  &__text {
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-dark-gray;
+    flex: 1;
+  }
+
+  // ---- Footer ----
+  &__footer {
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 1.5);
+    border-top: 1px solid $ug-light-gray;
+    @include ug-font-size("xs");
+    @include ug-rhythm-line-height(1);
+    color: $ug-medium-gray;
+  }
+
+  // ---- Actions (buttons area) ----
+  &__actions {
+    display: flex;
+    gap: calc(var(--ug-leading) * 0.5);
+    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+    padding-top: 0;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Dark card
+  &--dark {
+    background-color: $ug-black;
+    border-color: $ug-black;
+    color: $ug-white;
+
+    .ug-card__text { color: rgba(255, 255, 255, 0.7); }
+    .ug-card__subtitle { color: rgba(255, 255, 255, 0.5); }
+    .ug-card__footer { border-top-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); }
+  }
+
+  // Bordered (heavier border)
+  &--bordered {
+    border-width: 2px;
+    border-color: $ug-black;
+  }
+
+  // Flat (no border, shadow instead)
+  &--flat {
+    border: none;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+  }
+
+  // Horizontal layout (image left, body right)
+  &--horizontal {
+    flex-direction: row;
+
+    .ug-card__image {
+      width: 40%;
+      flex-shrink: 0;
+
+      img { height: 100%; }
+    }
+
+    .ug-card__body {
+      flex: 1;
+    }
+
+    @include ug-breakpoint-down("md") {
+      flex-direction: column;
+
+      .ug-card__image {
+        width: 100%;
+      }
+    }
+  }
+
+  // NPS color accents (top border)
+  &--accent-red    { border-top: 3px solid $ug-red; }
+  &--accent-brown  { border-top: 3px solid $ug-brown; }
+  &--accent-green  { border-top: 3px solid $ug-green; }
+  &--accent-blue   { border-top: 3px solid $ug-blue; }
+}
+
+// ---- Card Grid Helper ----
+// Responsive card grid using CSS grid
+
+.ug-card-grid {
+  display: grid;
+  gap: var(--ug-leading);
+
+  &--2 { grid-template-columns: repeat(2, 1fr); }
+  &--3 { grid-template-columns: repeat(3, 1fr); }
+  &--4 { grid-template-columns: repeat(4, 1fr); }
+
+  @include ug-breakpoint-down("lg") {
+    &--4 { grid-template-columns: repeat(2, 1fr); }
+    &--3 { grid-template-columns: repeat(2, 1fr); }
+  }
+
+  @include ug-breakpoint-down("md") {
+    &--2,
+    &--3,
+    &--4 { grid-template-columns: 1fr; }
+  }
+}