unigrid.css 0.3.0

package/src/scss/_prose.scss

@@ -0,0 +1,393 @@
+// ==========================================================================
+// Unigrid CSS Framework — Prose (BEM)
+//
+// Long-form typographic content with vertical rhythm, based on Gutenberg
+// by Matej Latin. Apply .ug-prose to a container to get beautiful defaults
+// for all HTML elements within it.
+//
+// Features:
+// - Vertical rhythm based on leading (line-height as unit)
+// - Configurable heading sizes via $ug-headings map
+// - Mobile-first with desktop breakpoint at $ug-prose-max-width
+// - Typography normalization (abbr, em, sub, sup, mark, etc.)
+// - Blockquote, figcaption, code, list, table styling
+// - Optional paragraph indent mode
+// - Baseline grid debug overlay
+//
+// Block: .ug-prose
+// Modifiers: --indent, --grid, --grid-double
+//
+// Credit: Based on Gutenberg (github.com/matejlatin/Gutenberg)
+//         Creative Commons Attribution 3.0
+// ==========================================================================
+
+@use "sass:list";
+@use "sass:map";
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-prose {
+  font-family: $ug-font-family;
+  color: $ug-color-font-body;
+  font-size: #{$ug-base}px;
+  font-size: #{$ug-base-font-size};
+  @include ug-rhythm-line-height(1);
+
+  @media screen and (min-width: #{$ug-prose-max-width}) {
+    font-size: #{$ug-base-desktop}px;
+    font-size: #{$ug-base-font-size-desktop};
+  }
+
+  @supports (font-variation-settings: normal) {
+    font-family: $ug-font-family-variable;
+  }
+
+  // ---- All elements: reset vertical spacing ----
+  * {
+    @include ug-rhythm-line-height(1);
+    @include ug-rhythm-margin-bottom(1);
+    margin-top: 0;
+  }
+
+
+
+  // ---- Max reading width ----
+  > * {
+    max-width: #{$ug-prose-max-width};
+
+    @media screen and (min-width: #{$ug-prose-max-width}) {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  // ---- Headings ----
+  @each $heading, $props in $ug-headings {
+    #{$heading} {
+      @include ug-rhythm-font-size(list.nth($props, 1));
+      @include ug-rhythm-line-height(list.nth($props, 2));
+      @include ug-rhythm-margin-top(list.nth($props, 3));
+      @include ug-rhythm-margin-bottom(list.nth($props, 4));
+      @include ug-font-weight("bold");
+
+      @if $heading == "h1" {
+        @include ug-font-weight("black");
+        letter-spacing: -0.02em;
+      }
+    }
+  }
+
+  // Tighter margins between adjacent headings
+  h1 + h2 { @include ug-rhythm-margin-top(1); }
+  h2 + h3,
+  h3 + h4,
+  h4 + h5 { @include ug-rhythm-margin-top(0.5); }
+  h5 + h6 { @include ug-rhythm-margin-top(-0.5); }
+
+  h6 {
+    font-style: italic;
+    font-weight: normal;
+  }
+
+  // ---- Paragraph ----
+  p {
+    @include ug-rhythm-margin-bottom(1);
+  }
+
+  // Attention grabber / lead
+  .ug-prose__lead,
+  .attention-grabber {
+    @include ug-rhythm-font-size(1.2);
+  }
+
+  // ---- Links ----
+  a {
+    color: $ug-color-link;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $ug-color-link-hover;
+    }
+
+    &:visited {
+      color: $ug-color-link-visited;
+
+      &:hover {
+        color: $ug-color-link-hover;
+      }
+    }
+  }
+
+  // ---- Inline elements ----
+  br {
+    margin-bottom: 0;
+  }
+
+  abbr {
+    letter-spacing: 0.1em;
+  }
+
+  abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+  }
+
+  b,
+  strong {
+    @include ug-font-weight("bold");
+  }
+
+  dfn {
+    font-style: italic;
+  }
+
+  em,
+  i {
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  mark {
+    background: #ff0;
+    color: #000;
+    padding: 0 0.2em;
+  }
+
+  small {
+    font-size: 70%;
+    @include ug-rhythm-line-height(0.5);
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sup { top: -0.5em; }
+  sub { bottom: -0.25em; }
+
+  // ---- Blockquote ----
+  blockquote {
+    font-style: italic;
+    padding-left: 1.4375rem;
+    @include ug-rhythm-margin-top(1);
+    @include ug-rhythm-margin-bottom(1);
+
+    @media screen and (min-width: #{$ug-prose-max-width}) {
+      padding-left: 2rem;
+    }
+
+    cite {
+      display: block;
+      font-style: normal;
+      @include ug-font-size("sm");
+      color: $ug-color-font-light;
+    }
+  }
+
+  // Pull quote (in a figure)
+  figure blockquote {
+    @include ug-rhythm-padding(1, 0);
+    text-align: center;
+
+    p {
+      @include ug-rhythm-font-size(1.6875);
+      @include ug-rhythm-line-height(1.5);
+    }
+  }
+
+  // ---- Lists ----
+  ul,
+  ol {
+    padding-left: 1.5rem;
+
+    li {
+      margin-bottom: 0;
+    }
+  }
+
+  // ---- Code ----
+  pre {
+    overflow: auto;
+    @include ug-rhythm-padding(1, 1);
+    background-color: $ug-warm-gray;
+    border: 1px solid $ug-light-gray;
+  }
+
+  code,
+  kbd,
+  samp {
+    font-family: "SF Mono", "Fira Code", Consolas, monospace;
+    @include ug-font-size("sm");
+  }
+
+  :not(pre) > code {
+    background-color: $ug-warm-gray;
+    padding: 0.15em 0.4em;
+    border-radius: 2px;
+  }
+
+  // ---- Table ----
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    @include ug-rhythm-margin-bottom(1);
+
+    th,
+    td {
+      padding: 0.5em 0.75em;
+      text-align: left;
+      border-bottom: 1px solid $ug-light-gray;
+    }
+
+    th {
+      @include ug-font-weight("bold");
+      @include ug-font-size("sm");
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+  }
+
+  // ---- Horizontal Rule ----
+  hr {
+    border: none;
+    border-bottom: 1px solid $ug-light-gray;
+    padding-top: calc(var(--ug-leading) - 1px);
+    @include ug-rhythm-margin-top(1);
+    @include ug-rhythm-margin-bottom(1);
+
+    &.ug-divider--bold {
+      border-bottom: 3px solid $ug-black;
+      padding-top: calc(var(--ug-leading) - 3px);
+    }
+  }
+
+  // ---- Figure & Image ----
+  figure {
+    display: block;
+    @include ug-rhythm-margin-bottom(1);
+    max-width: 100%;
+  }
+
+  figcaption {
+    display: block;
+    @include ug-font-size("xs");
+    @include ug-rhythm-line-height(1);
+    color: $ug-color-font-figcaption;
+    font-style: italic;
+    text-align: center;
+    margin-bottom: 0;
+    margin-top: 0.5rem;
+  }
+
+  img {
+    border: 0;
+    max-width: 100%;
+    display: block;
+    height: auto;
+  }
+
+  // ---- Form ----
+  input,
+  textarea,
+  select {
+    font: inherit;
+    color: inherit;
+    @include ug-rhythm-margin-bottom(1);
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // ---- Paragraph Indent Mode ----
+  &--indent {
+    p + p {
+      @include ug-rhythm-margin-top(-1);
+      text-indent: var(--ug-leading);
+      text-indent: var(--ug-leading);
+    }
+  }
+
+  // ---- Baseline Grid Debug Overlay ----
+  &--grid {
+    background-image: linear-gradient(
+      to bottom,
+      hsla(200, 100%, 50%, 0.3) 1px,
+      transparent 1px
+    );
+    background-position: left top;
+    background-repeat: repeat;
+    background-size: 100% var(--ug-leading);
+    background-size: 100% var(--ug-leading);
+  }
+
+  &--grid-double {
+    background-image: linear-gradient(
+      to bottom,
+      hsla(200, 100%, 50%, 0.3) 1px,
+      transparent 1px,
+      transparent calc(var(--ug-leading) * 0.5),
+      hsla(200, 100%, 50%, 0.15) calc(var(--ug-leading) * 0.5),
+      transparent calc(var(--ug-leading) * 0.5 + 1px),
+      transparent var(--ug-leading)
+    );
+    background-position: left top;
+    background-repeat: repeat;
+    background-size: 100% var(--ug-leading);
+    background-size: 100% var(--ug-leading);
+  }
+
+  // ---- Debug: Show Margins & Padding ----
+  // Blue outline = content box
+  // Orange = margins (top/bottom)
+  // Green = padding
+  &--debug {
+    > * {
+      outline: 1px solid hsla(210, 80%, 60%, 0.5);
+      position: relative;
+
+      // Margin visualization (orange glow)
+      box-shadow:
+        0 calc(-1 * var(--debug-mt, 0px)) 0 0 hsla(30, 100%, 60%, 0.15),
+        0 calc(var(--debug-mb, 0px)) 0 0 hsla(30, 100%, 60%, 0.15);
+
+      // Padding visualization (green tint) via inset box-shadow on ::before
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        // Green inset shadow matching the element's padding
+        box-shadow: inset 0 var(--debug-pt, 0px) 0 0 hsla(140, 70%, 50%, 0.1),
+                    inset 0 calc(-1 * var(--debug-pb, 0px)) 0 0 hsla(140, 70%, 50%, 0.1),
+                    inset var(--debug-pl, 0px) 0 0 0 hsla(140, 70%, 50%, 0.1),
+                    inset calc(-1 * var(--debug-pr, 0px)) 0 0 0 hsla(140, 70%, 50%, 0.1);
+      }
+    }
+
+    // Margin vars per element
+    h1 { --debug-mt: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h1), 3)}); --debug-mb: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h1), 4)}); }
+    h2 { --debug-mt: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h2), 3)}); --debug-mb: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h2), 4)}); }
+    h3 { --debug-mt: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h3), 3)}); --debug-mb: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h3), 4)}); }
+    h4 { --debug-mt: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h4), 3)}); --debug-mb: calc(var(--ug-leading) * #{list.nth(map.get($ug-headings, h4), 4)}); }
+    p, ul, ol, table, figure, hr { --debug-mt: 0px; --debug-mb: var(--ug-leading); }
+
+    // Padding vars for elements that have padding
+    blockquote { --debug-pl: 1.4375rem; --debug-pt: 0px; --debug-pb: 0px; --debug-pr: 0px; --debug-mt: var(--ug-leading); --debug-mb: var(--ug-leading); }
+    pre { --debug-pt: var(--ug-leading); --debug-pr: var(--ug-leading); --debug-pb: var(--ug-leading); --debug-pl: var(--ug-leading); --debug-mt: 0px; --debug-mb: var(--ug-leading); }
+    ul, ol { --debug-pl: 1.5rem; }
+  }
+
+  // ---- Combined: Grid + Debug ----
+  &--grid#{&}--debug,
+  &--grid-double#{&}--debug {
+    > * {
+      outline: 1px solid hsla(210, 80%, 60%, 0.5);
+    }
+  }
+}

package/src/scss/_reset.scss

@@ -0,0 +1,82 @@
+// ==========================================================================
+// Unigrid CSS Framework — Reset / Base
+//
+// Line-height and font sizing aligned to Gutenberg vertical rhythm.
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: $ug-font-family;
+  font-feature-settings: 'liga' 1, 'calt' 1, 'ss07' 1; /* fix for Chrome */
+}
+@supports (font-variation-settings: normal) {
+  :root { font-family: $ug-font-family-variable; }
+}
+
+html {
+  font-size: #{$ug-base}px;
+  font-size: #{$ug-base-font-size};
+  -webkit-text-size-adjust: 100%;
+  --ug-leading: #{$ug-leading}px;
+  line-height: var(--ug-leading);
+
+  @media screen and (min-width: #{$ug-prose-max-width}) {
+    font-size: #{$ug-base-desktop}px;
+    font-size: #{$ug-base-font-size-desktop};
+    --ug-leading: #{$ug-leading-desktop}px;
+  }
+}
+
+body {
+  font-family: $ug-font-family;
+  font-feature-settings: 'liga' 1, 'calt' 1, 'ss07' 1;
+  @include ug-font-size("base");
+  @include ug-font-weight("regular");
+  color: $ug-black;
+  background-color: $ug-white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@supports (font-variation-settings: normal) {
+  body {
+    font-family: $ug-font-family-variable;
+  }
+}
+
+img,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}

package/src/scss/_scrollspy.scss

@@ -0,0 +1,62 @@
+// ==========================================================================
+// Unigrid CSS Framework — Scrollspy (BEM)
+//
+// Highlights navigation links based on scroll position.
+// Requires scrollspy.js for IntersectionObserver-based tracking.
+//
+// Block: .ug-scrollspy
+// Elements: __nav, __link
+// Modifiers: __link--active
+//
+// Usage:
+//   <nav class="ug-scrollspy" data-ug-scrollspy>
+//     <a class="ug-scrollspy__link" href="#section1">Section 1</a>
+//     <a class="ug-scrollspy__link" href="#section2">Section 2</a>
+//   </nav>
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-scrollspy {
+  position: sticky;
+  top: var(--ug-leading);
+  align-self: flex-start;
+
+  &__nav {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-left: 2px solid $ug-light-gray;
+  }
+
+  &__link {
+    display: block;
+    padding: calc(var(--ug-leading) * 0.25) var(--ug-leading);
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-medium-gray;
+    text-decoration: none;
+    border-left: 2px solid transparent;
+    margin-left: -2px;
+    transition: color 0.15s, border-color 0.15s;
+
+    &:hover {
+      color: $ug-black;
+    }
+
+    &--active {
+      color: $ug-black;
+      @include ug-font-weight("bold");
+      border-left-color: $ug-black;
+    }
+  }
+
+  // Nested (indented sub-sections)
+  &__link--nested {
+    padding-left: calc(var(--ug-leading) * 1.5);
+    @include ug-font-size("xs");
+  }
+}

package/src/scss/_section.scss

@@ -0,0 +1,91 @@
+// ==========================================================================
+// Unigrid CSS Framework — Section Title (BEM)
+//
+// The signature black band with white heading spanning the full width.
+// Padding aligned to the vertical rhythm (leading multiples).
+//
+// Block: .ug-section
+// Elements: __title, __subtitle
+// Modifiers: --brown, --red, --green, --blue, --light, --compact, --large
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-section {
+  width: 100%;
+  background-color: $ug-black;
+  color: $ug-white;
+  padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+
+  // -- Title --
+  &__title {
+    @include ug-rhythm-font-size(1.6875);
+    @include ug-rhythm-line-height(1.5);
+    @include ug-font-weight("black");
+    letter-spacing: -0.01em;
+    margin: 0;
+  }
+
+  // -- Subtitle --
+  &__subtitle {
+    @include ug-font-size("sm");
+    @include ug-font-weight("light");
+    @include ug-rhythm-line-height(1);
+    opacity: 0.7;
+    margin: 0;
+  }
+
+  // ==============================
+  // Size Modifiers
+  // ==============================
+
+  &--compact {
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 1.5);
+
+    .ug-section__title {
+      @include ug-rhythm-font-size(1.2);
+      @include ug-rhythm-line-height(1);
+    }
+  }
+
+  &--large {
+    padding: calc(var(--ug-leading) * 2) calc(var(--ug-leading) * 1.5);
+
+    .ug-section__title {
+      @include ug-rhythm-font-size(2.5);
+      @include ug-rhythm-line-height(2);
+    }
+  }
+
+  // ==============================
+  // Color Modifiers
+  // ==============================
+
+  &--brown { background-color: $ug-brown; }
+  &--red   { background-color: $ug-red; }
+  &--green { background-color: $ug-green; }
+  &--blue  { background-color: $ug-blue; }
+
+  &--light {
+    background-color: $ug-warm-gray;
+    color: $ug-black;
+  }
+
+  // ==============================
+  // Responsive
+  // ==============================
+
+  @include ug-breakpoint-down("md") {
+    padding: var(--ug-leading) var(--ug-leading);
+
+    &--large {
+      padding: calc(var(--ug-leading) * 1.5) var(--ug-leading);
+    }
+
+    &--compact {
+      padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
+    }
+  }
+}