unigrid.css 0.3.0 → 0.3.2

package/README.md

@@ -1,101 +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
+# 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

@@ -1,36 +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();
-    }
-  })();
-})();
+(() => {
+  (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/scrollspy.js

@@ -1,57 +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();
-    }
-  })();
-})();
+(() => {
+  (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

@@ -1,30 +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();
-    }
-  })();
-})();
+(() => {
+  (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();
+    }
+  })();
+})();