unigrid.css 0.3.0 → 0.3.1

package/src/scss/_card.scss

@@ -1,168 +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; }
-  }
-}
+// ==========================================================================
+// 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; }
+  }
+}

package/src/scss/_components.scss

@@ -1,140 +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;
-  }
-}
+// ==========================================================================
+// 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;
+  }
+}