unigrid.css 0.3.0 → 0.3.1

package/package.json

@@ -1,41 +1,70 @@
-{
-  "name": "unigrid.css",
-  "version": "0.3.0",
-  "description": "A CSS grid framework inspired by Massimo Vignelli's Unigrid system for the National Park Service",
-  "main": "dist/unigrid.css",
-  "style": "dist/unigrid.css",
-  "files": [
-    "dist/",
-    "src/"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "npm run build:css && npm run build:js",
-    "build:css": "sass src/scss/unigrid.scss dist/unigrid.css --style=expanded && sass src/scss/unigrid.scss dist/unigrid.min.css --style=compressed",
-    "build:js": "node scripts/build-js.mjs",
-    "watch": "npm run watch:css & npm run watch:js",
-    "watch:css": "sass src/scss/unigrid.scss dist/unigrid.css --style=expanded --watch",
-    "watch:js": "node scripts/build-js.mjs --watch",
-    "preview": "vite preview"
-  },
-  "keywords": [
-    "css",
-    "scss",
-    "grid",
-    "unigrid",
-    "vignelli",
-    "design-system",
-    "nps",
-    "bem"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tdascoli/unigrid.css.git"
-  },
-  "devDependencies": {
-    "esbuild": "^0.24.0",
-    "sass": "^1.80.0",
-    "vite": "^6.0.0"
-  }
-}
+{
+  "name": "unigrid.css",
+  "version": "0.3.1",
+  "description": "A CSS grid framework inspired by Massimo Vignelli's Unigrid system for the National Park Service. Vertical rhythm, square modules, BEM naming.",
+  "main": "dist/unigrid.css",
+  "style": "dist/unigrid.css",
+  "sass": "src/scss/unigrid.scss",
+  "unpkg": "dist/unigrid.min.css",
+  "jsdelivr": "dist/unigrid.min.css",
+  "exports": {
+    ".": {
+      "style": "./dist/unigrid.css",
+      "sass": "./src/scss/unigrid.scss",
+      "default": "./dist/unigrid.css"
+    },
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "dist/unigrid.css",
+    "dist/unigrid.min.css",
+    "dist/unigrid.js",
+    "dist/unigrid.min.js",
+    "dist/dropdown.js",
+    "dist/tabs.js",
+    "dist/scrollspy.js",
+    "src/scss/",
+    "src/js/"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:css && npm run build:js",
+    "build:css": "sass src/scss/unigrid.scss dist/unigrid.css --style=expanded && sass src/scss/unigrid.scss dist/unigrid.min.css --style=compressed",
+    "build:js": "node scripts/build-js.mjs",
+    "watch": "npm run watch:css & npm run watch:js",
+    "watch:css": "sass src/scss/unigrid.scss dist/unigrid.css --style=expanded --watch",
+    "watch:js": "node scripts/build-js.mjs --watch",
+    "prepublishOnly": "npm run build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "css",
+    "scss",
+    "grid",
+    "unigrid",
+    "vignelli",
+    "design-system",
+    "nps",
+    "bem",
+    "vertical-rhythm",
+    "gutenberg",
+    "typography",
+    "responsive"
+  ],
+  "license": "MIT",
+  "author": "tdascoli",
+  "homepage": "https://tdascoli.github.io/unigrid.css/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tdascoli/unigrid.css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/tdascoli/unigrid.css/issues"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0",
+    "sass": "^1.80.0",
+    "vite": "^6.0.0"
+  }
+}

package/src/js/dropdown.js

@@ -1,49 +1,49 @@
-/**
- * Unigrid Dropdown
- *
- * Toggles .ug-dropdown--open on click.
- * Closes all dropdowns when clicking outside.
- * Auto-initializes on DOMContentLoaded.
- */
-(function () {
-  function init() {
-    document.addEventListener('click', function (e) {
-      var trigger = e.target.closest('.ug-dropdown__trigger');
-
-      if (trigger) {
-        e.preventDefault();
-      }
-
-      // Close all other dropdowns (skip those inside .docs-example__preview)
-      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');
-        }
-      });
-
-      // Toggle clicked dropdown
-      if (trigger) {
-        var dropdown = trigger.closest('.ug-dropdown');
-        if (dropdown) {
-          dropdown.classList.toggle('ug-dropdown--open');
-        }
-      }
-    });
-
-    // Close on Escape key
-    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();
-  }
-})();
+/**
+ * Unigrid Dropdown
+ *
+ * Toggles .ug-dropdown--open on click.
+ * Closes all dropdowns when clicking outside.
+ * Auto-initializes on DOMContentLoaded.
+ */
+(function () {
+  function init() {
+    document.addEventListener('click', function (e) {
+      var trigger = e.target.closest('.ug-dropdown__trigger');
+
+      if (trigger) {
+        e.preventDefault();
+      }
+
+      // Close all other dropdowns (skip those inside .docs-example__preview)
+      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');
+        }
+      });
+
+      // Toggle clicked dropdown
+      if (trigger) {
+        var dropdown = trigger.closest('.ug-dropdown');
+        if (dropdown) {
+          dropdown.classList.toggle('ug-dropdown--open');
+        }
+      }
+    });
+
+    // Close on Escape key
+    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/src/js/index.js

@@ -1,19 +1,19 @@
-/**
- * Unigrid.js — All interactive components bundled.
- *
- * Includes: dropdown, tabs, scrollspy
- *
- * Usage:
- *   <script src="dist/unigrid.js"></script>
- *   or
- *   <script src="dist/unigrid.min.js"></script>
- *
- * Individual files also available:
- *   <script src="dist/dropdown.js"></script>
- *   <script src="dist/tabs.js"></script>
- *   <script src="dist/scrollspy.js"></script>
- */
-
-import './dropdown.js';
-import './tabs.js';
-import './scrollspy.js';
+/**
+ * Unigrid.js — All interactive components bundled.
+ *
+ * Includes: dropdown, tabs, scrollspy
+ *
+ * Usage:
+ *   <script src="dist/unigrid.js"></script>
+ *   or
+ *   <script src="dist/unigrid.min.js"></script>
+ *
+ * Individual files also available:
+ *   <script src="dist/dropdown.js"></script>
+ *   <script src="dist/tabs.js"></script>
+ *   <script src="dist/scrollspy.js"></script>
+ */
+
+import './dropdown.js';
+import './tabs.js';
+import './scrollspy.js';

package/src/js/scrollspy.js

@@ -1,87 +1,87 @@
-/**
- * Unigrid Scrollspy
- *
- * Highlights navigation links based on which section is currently
- * visible in the viewport using IntersectionObserver.
- *
- * Usage:
- *   <nav data-ug-scrollspy>
- *     <a class="ug-scrollspy__link" href="#intro">Intro</a>
- *     <a class="ug-scrollspy__link" href="#features">Features</a>
- *   </nav>
- *
- *   <section id="intro">...</section>
- *   <section id="features">...</section>
- *
- * Options (via data attributes on [data-ug-scrollspy]):
- *   data-ug-scrollspy-offset="100"   — top offset in px (default: 100)
- *   data-ug-scrollspy-class="custom" — active class (default: ug-scrollspy__link--active)
- */
-(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';
-
-      // Collect target sections
-      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: link, target: target });
-        }
-      });
-
-      if (!targets.length) return;
-
-      // Track which sections are visible
-      var visibleSections = 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);
-          }
-        });
-
-        // Find the first visible section (in DOM order)
-        var activeId = null;
-        for (var i = 0; i < targets.length; i++) {
-          if (visibleSections.has(targets[i].target.id)) {
-            activeId = targets[i].target.id;
-            break;
-          }
-        }
-
-        // Update active states
-        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();
-  }
-})();
+/**
+ * Unigrid Scrollspy
+ *
+ * Highlights navigation links based on which section is currently
+ * visible in the viewport using IntersectionObserver.
+ *
+ * Usage:
+ *   <nav data-ug-scrollspy>
+ *     <a class="ug-scrollspy__link" href="#intro">Intro</a>
+ *     <a class="ug-scrollspy__link" href="#features">Features</a>
+ *   </nav>
+ *
+ *   <section id="intro">...</section>
+ *   <section id="features">...</section>
+ *
+ * Options (via data attributes on [data-ug-scrollspy]):
+ *   data-ug-scrollspy-offset="100"   — top offset in px (default: 100)
+ *   data-ug-scrollspy-class="custom" — active class (default: ug-scrollspy__link--active)
+ */
+(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';
+
+      // Collect target sections
+      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: link, target: target });
+        }
+      });
+
+      if (!targets.length) return;
+
+      // Track which sections are visible
+      var visibleSections = 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);
+          }
+        });
+
+        // Find the first visible section (in DOM order)
+        var activeId = null;
+        for (var i = 0; i < targets.length; i++) {
+          if (visibleSections.has(targets[i].target.id)) {
+            activeId = targets[i].target.id;
+            break;
+          }
+        }
+
+        // Update active states
+        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/src/js/tabs.js

@@ -1,58 +1,58 @@
-/**
- * Unigrid Tabs
- *
- * Switches active tab link and panel on click.
- * Auto-initializes on DOMContentLoaded.
- *
- * Usage:
- *   <div class="ug-tabs" data-ug-tabs>
- *     <ul class="ug-tabs__nav">
- *       <li class="ug-tabs__item">
- *         <button class="ug-tabs__link ug-tabs__link--active" data-ug-tab="tab1">Tab 1</button>
- *       </li>
- *     </ul>
- *     <div class="ug-tabs__content">
- *       <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="tab1">...</div>
- *     </div>
- *   </div>
- */
-(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');
-
-      // Deactivate all links
-      tabs.querySelectorAll('.ug-tabs__link').forEach(function (l) {
-        l.classList.remove('ug-tabs__link--active');
-      });
-
-      // Deactivate all panels
-      tabs.querySelectorAll('.ug-tabs__panel').forEach(function (p) {
-        p.classList.remove('ug-tabs__panel--active');
-      });
-
-      // Activate clicked link
-      link.classList.add('ug-tabs__link--active');
-
-      // Activate matching panel
-      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();
-  }
-})();
+/**
+ * Unigrid Tabs
+ *
+ * Switches active tab link and panel on click.
+ * Auto-initializes on DOMContentLoaded.
+ *
+ * Usage:
+ *   <div class="ug-tabs" data-ug-tabs>
+ *     <ul class="ug-tabs__nav">
+ *       <li class="ug-tabs__item">
+ *         <button class="ug-tabs__link ug-tabs__link--active" data-ug-tab="tab1">Tab 1</button>
+ *       </li>
+ *     </ul>
+ *     <div class="ug-tabs__content">
+ *       <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="tab1">...</div>
+ *     </div>
+ *   </div>
+ */
+(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');
+
+      // Deactivate all links
+      tabs.querySelectorAll('.ug-tabs__link').forEach(function (l) {
+        l.classList.remove('ug-tabs__link--active');
+      });
+
+      // Deactivate all panels
+      tabs.querySelectorAll('.ug-tabs__panel').forEach(function (p) {
+        p.classList.remove('ug-tabs__panel--active');
+      });
+
+      // Activate clicked link
+      link.classList.add('ug-tabs__link--active');
+
+      // Activate matching panel
+      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();
+  }
+})();