unigrid.css 0.3.0

package/src/scss/_variables.scss

@@ -0,0 +1,183 @@
+// ==========================================================================
+// Unigrid CSS Framework — Variables & Configuration
+// Based on Massimo Vignelli's Unigrid system for the National Park Service
+//
+// Override these variables before importing unigrid.scss to customize.
+// ==========================================================================
+
+// ---- DIN Proportions ----
+// The key ratio is 1:√2 (≈ 1:1.414). Each time the paper is folded in half,
+// the proportions remain the same.
+$ug-ratio: 1.4142135 !default;
+
+// ---- Grid Configuration ----
+$ug-columns: 12 !default;
+$ug-rows: 20 !default;
+$ug-gap: 0.5rem !default; // overridden below after leading is calculated
+
+// ---- Panel Unit ----
+// The basic Unigrid "leaf" is 99 × 210 mm. All formats are multiples of this.
+$ug-panel-width: 99mm !default;
+$ug-panel-height: 210mm !default;
+
+// ---- Breakpoints ----
+// Based on panel fold widths of the broadside.
+$ug-breakpoints: (
+  "sm": 480px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+) !default;
+
+// ---- Container ----
+$ug-container-padding: 2rem !default; // ug-space(5)
+$ug-container-max-width: 1280px !default;
+
+// ---- NPS Color Palette ----
+$ug-black: #1a1a1a !default;
+$ug-white: #ffffff !default;
+$ug-warm-gray: #f5f2ed !default;
+$ug-dark-gray: #333333 !default;
+$ug-medium-gray: #666666 !default;
+$ug-light-gray: #e8e5e0 !default;
+$ug-red: #c1272d !default;
+$ug-brown: #4a3728 !default;
+$ug-green: #2d5a27 !default;
+$ug-blue: #274a5a !default;
+
+$ug-colors: (
+  "black": $ug-black,
+  "white": $ug-white,
+  "warm-gray": $ug-warm-gray,
+  "dark-gray": $ug-dark-gray,
+  "medium-gray": $ug-medium-gray,
+  "light-gray": $ug-light-gray,
+  "red": $ug-red,
+  "brown": $ug-brown,
+  "green": $ug-green,
+  "blue": $ug-blue,
+) !default;
+
+// ---- Typography ----
+// The original Unigrid uses Helvetica exclusively.
+// Current NPS standard uses Frutiger and NPS Rawlinson.
+$ug-font-family: Inter, sans-serif !default;
+$ug-font-family-variable: InterVariable, sans-serif !default;
+
+$ug-font-sizes: (
+  "xs": 0.75rem,
+  "sm": 0.875rem,
+  "base": 1rem,
+  "lg": 1.25rem,
+  "xl": 1.5rem,
+  "2xl": 2rem,
+  "3xl": 3rem,
+) !default;
+
+$ug-font-weights: (
+  "thin": 100,
+  "extra-light": 200,
+  "light": 300,
+  "regular": 400,
+  "medium": 500,
+  "semi-bold": 600,
+  "bold": 700,
+  "extra-bold": 800,
+  "black": 900,
+) !default;
+
+$ug-line-height: 1.5 !default;
+$ug-line-height-tight: 1.2 !default;
+
+// ---- Vertical Rhythm (from Gutenberg) ----
+// The leading (line-height in px) is the base unit for all vertical spacing.
+// This creates consistent vertical rhythm across all text elements.
+$ug-base-font-size: 100% !default;         // Mobile base (100% = 16px)
+$ug-base-font-size-desktop: 112.5% !default; // Desktop base (112.5% = 18px)
+$ug-base-leading: 1.625 !default;           // Mobile line-height multiplier
+$ug-base-leading-desktop: 1.7 !default;     // Desktop line-height multiplier
+$ug-prose-max-width: 35rem !default;         // Optimal reading measure (~65 chars)
+$ug-paragraph-indent: false !default;        // Use indent instead of margin between paragraphs
+
+// Calculated values (used by rhythm mixins)
+@use "sass:math" as vars-math;
+$ug-base: 16 * vars-math.div($ug-base-font-size, 100%) !default;
+$ug-base-desktop: 16 * vars-math.div($ug-base-font-size-desktop, 100%) !default;
+$ug-leading: round($ug-base * $ug-base-leading) !default;
+$ug-leading-desktop: round($ug-base-desktop * $ug-base-leading-desktop) !default;
+$ug-leading-rem: vars-math.div($ug-leading, $ug-base) !default;
+$ug-leading-rem-desktop: vars-math.div($ug-leading-desktop, $ug-base-desktop) !default;
+
+// Override gap — uses rem for Sass compilation, matches mobile leading.
+// At runtime the grid gap won't auto-adapt to desktop (acceptable trade-off
+// since grid gaps are horizontal and less critical for vertical rhythm).
+$ug-gap: #{$ug-leading-rem}rem;
+
+// ---- Modular Scale (from Gutenberg) ----
+// Used for proportional type sizing in prose context.
+$ug-modular-scale: (
+  "xxxs": 0.8125,
+  "xxs": 0.875,
+  "xs": 1,
+  "sm": 1.2,
+  "md": 1.375,
+  "lg": 1.6875,
+  "xl": 2.5,
+  "xxl": 3.5,
+  "xxxl": 4.3,
+) !default;
+
+// ---- Heading Configuration (from Gutenberg) ----
+// Each heading: (font-size in rem, line-height × leading, margin-top × leading, margin-bottom × leading)
+$ug-headings: (
+  h1: (2.5,   2,   4,   1),
+  h2: (1.6875, 2,  3,   1),
+  h3: (1.375,  1,  2,   1),
+  h4: (1.2,    1,  2,   1),
+  h5: (1,      1,  2,   1),
+  h6: (1,      1,  2,   1),
+) !default;
+
+// ---- Prose Colors ----
+$ug-color-font-body: $ug-black !default;
+$ug-color-font-light: #888 !default;
+$ug-color-font-figcaption: $ug-medium-gray !default;
+$ug-color-link: $ug-black !default;
+$ug-color-link-hover: $ug-black !default;
+$ug-color-link-visited: $ug-medium-gray !default;
+
+// ---- Spacing Scale ----
+// Based on leading multiples for vertical rhythm consistency.
+// 1 leading = $ug-leading-rem (≈ 1.625rem mobile).
+$ug-spaces: (
+  0: 0,
+  1: #{$ug-leading-rem * 0.25}rem,   // ~0.41rem
+  2: #{$ug-leading-rem * 0.5}rem,    // ~0.81rem
+  3: #{$ug-leading-rem}rem,          // ~1.63rem  = 1 leading
+  4: #{$ug-leading-rem * 1.5}rem,    // ~2.44rem
+  5: #{$ug-leading-rem * 2}rem,      // ~3.25rem  = 2 leading
+  6: #{$ug-leading-rem * 3}rem,      // ~4.88rem  = 3 leading
+  7: #{$ug-leading-rem * 4}rem,      // ~6.50rem  = 4 leading
+  8: #{$ug-leading-rem * 6}rem,      // ~9.75rem  = 6 leading
+) !default;
+
+// ---- Format Definitions ----
+// Real Unigrid specs: A-series = 1 panel wide, B-series = 2 panels wide.
+// Format number = panels long. A5/B5 are intentionally skipped.
+// Panel unit: 99 × 210 mm. Folded size always 99 × 210 mm.
+$ug-formats: (
+  "a1": (panels-wide: 1, panels-long: 1),
+  "a2": (panels-wide: 1, panels-long: 2),
+  "a3": (panels-wide: 1, panels-long: 3),
+  "a4": (panels-wide: 1, panels-long: 4),
+  "a6": (panels-wide: 1, panels-long: 6),
+  "b1": (panels-wide: 2, panels-long: 1),
+  "b2": (panels-wide: 2, panels-long: 2),
+  "b3": (panels-wide: 2, panels-long: 3),
+  "b4": (panels-wide: 2, panels-long: 4),
+  "b6": (panels-wide: 2, panels-long: 6),
+) !default;
+
+
+// ---- z-Index Definitions ----
+$ug-navbar-toggle-z-index: 1000;

package/src/scss/unigrid.scss

@@ -0,0 +1,49 @@
+// ==========================================================================
+// Unigrid CSS Framework v0.3.0
+// A CSS grid framework inspired by Massimo Vignelli's Unigrid system
+// for the National Park Service.
+//
+// Uses the Sass module system (@use/@forward) — no deprecated @import.
+//
+// Usage:
+//   @use "unigrid";
+//
+// With custom overrides:
+//   @use "unigrid" with (
+//     $ug-black: #222,
+//     $ug-font-family: "Frutiger", sans-serif
+//   );
+//
+// https://github.com/tdascoli/unigrid.css
+// ==========================================================================
+
+@forward "variables";
+@forward "mixins";
+
+@use "variables" as *;
+@use "mixins" as *;
+@use "reset";
+@use "container";
+@use "grid";
+@use "formats";
+@use "broadside";
+@use "header";
+@use "navbar";
+@use "footer";
+@use "hero";
+@use "section";
+@use "typography";
+@use "prose";
+@use "buttons";
+@use "dropdown";
+@use "tabs";
+@use "accordion";
+@use "pagination";
+@use "scrollspy";
+@use "table";
+@use "card";
+@use "sidebar";
+@use "forms";
+@use "components";
+@use "modules";
+@use "utilities";