Baseline grid Toggle

baseline.js

        var urlParams = new URLSearchParams(window.location.search);

        if (urlParams.has('grid')) {
            document.body.classList.add("bgrid");
        }

        /* + BGRID
         ======================================================================*/

        // Keyboard event listener for Ctrl + ;
        document.addEventListener('keydown', function (event) {
            // Check if Ctrl is pressed and the key is ';'
            if (event.ctrlKey && event.key === ';') {
                document.body.classList.toggle('bgrid');
                event.preventDefault(); // Prevent any default action for this key combination
            }
        });

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.

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));
  }
}