Baseline grid Toggle

baseline.js

(() => {
  const CLASS_B = 'bgrid';   // full baseline grid
  const CLASS_BH = 'bgridh';  // half-height baseline grid (CSS handles the size)

  const STORAGE_KEY = 'baselineGrid:last'; // stores 'bgrid' or 'bgridh'

  const body = document.body;
  const has = (c) => body.classList.contains(c);

  const getCurrent = () => (has(CLASS_B) ? CLASS_B : has(CLASS_BH) ? CLASS_BH : '');
  const clearClasses = () => body.classList.remove(CLASS_B, CLASS_BH);

  const applyMode = (mode /* 'bgrid'|'bgridh'|'' */) => {
    clearClasses();
    if (mode) body.classList.add(mode);
    if (mode) {
      try { localStorage.setItem(STORAGE_KEY, mode); } catch {}
    }
  };

  const getLast = () => {
    try {
      const v = localStorage.getItem(STORAGE_KEY) || '';
      return v === CLASS_B || v === CLASS_BH ? v : '';
    } catch { return ''; }
  };

  // --- Read URL param (do not modify URL) ---
  const getGridParamMode = () => {
    try {
      const url = new URL(location.href);
      const hasParam = url.searchParams.has('grid');
      if (!hasParam) return ''; // not present → ignore
      const val = (url.searchParams.get('grid') ?? '').toLowerCase();
      if (val === '' || val === 'bgrid') return CLASS_B;     // ?grid or ?grid=
      if (val === 'bgridh') return CLASS_BH;                  // ?grid=bgridh
      return ''; // unknown value → ignore
    } catch { return ''; }
  };

  // --- Init: respect body; else honor ?grid; else stay empty ---
  const initial = getCurrent();
  if (initial) {
    applyMode(initial);
  } else {
    const fromParam = getGridParamMode();
    if (fromParam) applyMode(fromParam);
    // else: do nothing (stay empty)
  }

  // Toggle rule:
  // - If same mode key pressed while active -> clear.
  // - If other mode active -> clear (don't switch).
  // - If empty -> restore last; if none, use the key's default.
  const handleToggle = (desired, defaultMode) => {
    const cur = getCurrent();
    const last = getLast();

    if (cur === desired) { applyMode(''); return; }
    if (cur && cur !== desired) { applyMode(''); return; }
    applyMode(last || defaultMode);
  };

  // --- Shortcuts (Ctrl or Cmd) ---
  document.addEventListener('keydown', (e) => {
    const mod = e.ctrlKey || e.metaKey;
    if (!mod) return;

    if (e.key === ';') {
      handleToggle(CLASS_B, CLASS_B); // default: bgrid
      e.preventDefault();
    }
    if (e.key === "'") {
      handleToggle(CLASS_BH, CLASS_BH); // default: bgridh
      e.preventDefault();
    }
  });
})();

Add a Baseline Grid

Instructions

1. Toggle Baseline Grid with Keyboard Shortcut:

   • Press Ctrl + ; to toggle the baseline grid on and off.

2. Add bgrid Class to Body (optional):

   • The bgrid class is used to show the baseline grid.
   • Ensure your CSS defines styles for the .bgrid class to display the grid.

3. Persistent Baseline Grid with URL Parameter (optional):

   • Add ?grid to the URL.
   • If ?grid is present, the baseline grid will be displayed.
   • ?grid=bgridh - to show halfwidth

Baseline Grid CSS Styles

CSS Variables

--step-0

• Purpose: Base size for paragraph text.
• Value: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem)
• Source: Utopia typography system

--lh

• Purpose: Line height.
• Value: 1.7

--step-0: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);
 --lh: 1.7;

Baseline CSS

.bgrid {
  position: relative;

  &::after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    pointer-events: none;
    user-select: none;
    top: 0;
    height: 100%;
    background: linear-gradient(to bottom, rgba(92, 222, 255, 0.793) 1px, transparent 1px);
    background-size: 100% calc(var(--step-0) * var(--lh));
  }
}