unigrid.css 0.3.0

package/README.md

@@ -0,0 +1,101 @@
+# Unigrid.css
+
+A CSS grid framework inspired by [Massimo Vignelli's Unigrid system](https://en.wikipedia.org/wiki/Unigrids) for the National Park Service.
+
+Built with **SCSS**, native **CSS Grid**, and **BEM** naming — no dependencies.
+
+## Concept
+
+The Unigrid is a standardized graphic and production system developed for NPS site folders:
+
+- **12-column base grid** with responsive breakpoints
+- **10 basic formats** — A-series (1 panel wide: A1–A4, A6) and B-series (2 panels wide: B1–B4, B6)
+- **Broadside approach** — layouts as flat sheets divided into foldable panels
+- **DIN proportions** (1:√2) — panel unit: 99 × 210 mm, folded size always constant
+- **Helvetica typography** with strict hierarchy
+- **Signature black header band**
+
+## Quick Start
+
+```html
+<link rel="stylesheet" href="dist/unigrid.css">
+
+<header class="ug-header">
+  <div class="ug-header__title">
+    <h1>Park Name</h1>
+    <p class="ug-header__subtitle">National Park / State</p>
+  </div>
+</header>
+
+<div class="ug-grid">
+  <div class="ug-col--4">One third</div>
+  <div class="ug-col--8">Two thirds</div>
+</div>
+
+<div class="ug-format ug-format--a4">
+  <div class="ug-broadside ug-broadside--stack">
+    <section class="ug-panel">Panel 1</section>
+    <section class="ug-panel">Panel 2</section>
+    <section class="ug-panel">Panel 3</section>
+    <section class="ug-panel">Panel 4</section>
+  </div>
+</div>
+```
+
+## Formats
+
+| Format | Wide × Long | Panel Size | Description |
+|--------|-------------|------------|-------------|
+| A1 | 1 × 1 | 99 × 210 mm | Single panel |
+| A2 | 1 × 2 | 198 × 210 mm | Letter-fold |
+| A3 | 1 × 3 | 297 × 210 mm | Tri-fold |
+| A4 | 1 × 4 | 396 × 210 mm | Most common NPS format |
+| A6 | 1 × 6 | 594 × 210 mm | Extended folder |
+| B1 | 2 × 1 | 99 × 420 mm | Double-height single |
+| B2 | 2 × 2 | 198 × 420 mm | Double-height bifold |
+| B3 | 2 × 3 | 297 × 420 mm | Double-height trifold |
+| B4 | 2 × 4 | 396 × 420 mm | Double-height quad |
+| B6 | 2 × 6 | 594 × 420 mm | DIN A2 — largest format |
+
+## Development
+
+```bash
+npm install
+npm run dev        # Start Vite dev server with hot reload
+npm run build      # Build dist/unigrid.css + dist/unigrid.min.css
+```
+
+The dev server provides pages for testing each component:
+- **Overview** — color palette, quick demo
+- **Grid** — column spans, responsive, alignment
+- **Formats** — all 10 formats with broadside examples
+- **Typography** — headings, body, captions, labels
+- **Components** — header, infobox, map, divider, panels
+- **Cheatsheet** — all CSS classes at a glance
+
+## SCSS Customization
+
+Override variables before importing:
+
+```scss
+$ug-font-family: "Frutiger", sans-serif;
+$ug-black: #222;
+$ug-gap: 1rem;
+@import "unigrid";
+```
+
+Key variables: `$ug-columns`, `$ug-gap`, `$ug-breakpoints`, `$ug-colors`, `$ug-font-sizes`, `$ug-formats`.
+
+## BEM Naming
+
+All classes follow BEM (Block__Element--Modifier):
+
+```
+.ug-header              → Block
+.ug-header__logo        → Element
+.ug-header--compact     → Modifier
+```
+
+## License
+
+MIT

package/dist/dropdown.js

@@ -0,0 +1,36 @@
+(() => {
+  (function() {
+    function init() {
+      document.addEventListener("click", function(e) {
+        var trigger = e.target.closest(".ug-dropdown__trigger");
+        if (trigger) {
+          e.preventDefault();
+        }
+        document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
+          if (dd.closest(".docs-example__preview")) return;
+          if (!trigger || dd !== trigger.closest(".ug-dropdown")) {
+            dd.classList.remove("ug-dropdown--open");
+          }
+        });
+        if (trigger) {
+          var dropdown = trigger.closest(".ug-dropdown");
+          if (dropdown) {
+            dropdown.classList.toggle("ug-dropdown--open");
+          }
+        }
+      });
+      document.addEventListener("keydown", function(e) {
+        if (e.key === "Escape") {
+          document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
+            dd.classList.remove("ug-dropdown--open");
+          });
+        }
+      });
+    }
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init);
+    } else {
+      init();
+    }
+  })();
+})();

package/dist/index.js

@@ -0,0 +1,5 @@
+(() => {
+  var import_dropdown = require("./dropdown.js");
+  var import_tabs = require("./tabs.js");
+  var import_scrollspy = require("./scrollspy.js");
+})();

package/dist/scrollspy.js

@@ -0,0 +1,57 @@
+(() => {
+  (function() {
+    function init() {
+      document.querySelectorAll("[data-ug-scrollspy]").forEach(function(nav) {
+        var links = nav.querySelectorAll(".ug-scrollspy__link, [data-ug-spy]");
+        if (!links.length) return;
+        var offset = parseInt(nav.getAttribute("data-ug-scrollspy-offset") || "100", 10);
+        var activeClass = nav.getAttribute("data-ug-scrollspy-class") || "ug-scrollspy__link--active";
+        var targets = [];
+        links.forEach(function(link) {
+          var href = link.getAttribute("href");
+          if (!href || href.charAt(0) !== "#") return;
+          var target = document.querySelector(href);
+          if (target) {
+            targets.push({ link, target });
+          }
+        });
+        if (!targets.length) return;
+        var visibleSections = /* @__PURE__ */ new Set();
+        var observer = new IntersectionObserver(function(entries) {
+          entries.forEach(function(entry) {
+            if (entry.isIntersecting) {
+              visibleSections.add(entry.target.id);
+            } else {
+              visibleSections.delete(entry.target.id);
+            }
+          });
+          var activeId = null;
+          for (var i = 0; i < targets.length; i++) {
+            if (visibleSections.has(targets[i].target.id)) {
+              activeId = targets[i].target.id;
+              break;
+            }
+          }
+          targets.forEach(function(item) {
+            if (item.target.id === activeId) {
+              item.link.classList.add(activeClass);
+            } else {
+              item.link.classList.remove(activeClass);
+            }
+          });
+        }, {
+          rootMargin: "-" + offset + "px 0px -50% 0px",
+          threshold: 0
+        });
+        targets.forEach(function(item) {
+          observer.observe(item.target);
+        });
+      });
+    }
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init);
+    } else {
+      init();
+    }
+  })();
+})();

package/dist/tabs.js

@@ -0,0 +1,30 @@
+(() => {
+  (function() {
+    function init() {
+      document.addEventListener("click", function(e) {
+        var link = e.target.closest("[data-ug-tab]");
+        if (!link) return;
+        e.preventDefault();
+        var tabs = link.closest(".ug-tabs");
+        if (!tabs) return;
+        var target = link.getAttribute("data-ug-tab");
+        tabs.querySelectorAll(".ug-tabs__link").forEach(function(l) {
+          l.classList.remove("ug-tabs__link--active");
+        });
+        tabs.querySelectorAll(".ug-tabs__panel").forEach(function(p) {
+          p.classList.remove("ug-tabs__panel--active");
+        });
+        link.classList.add("ug-tabs__link--active");
+        var panel = tabs.querySelector('[data-ug-panel="' + target + '"]');
+        if (panel) {
+          panel.classList.add("ug-tabs__panel--active");
+        }
+      });
+    }
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init);
+    } else {
+      init();
+    }
+  })();
+})();