Getting Started

Unigrid.css is a CSS framework inspired by Massimo Vignelli's Unigrid system for the National Park Service. Built with SCSS, native CSS Grid, vertical rhythm, and BEM naming.

Installation

npm

npm install unigrid.css

Import in your SCSS:

@use "unigrid.css/src/scss/unigrid" as *;

CDN

Add to your HTML <head>:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/unigrid.css/dist/unigrid.min.css">

JavaScript (optional)

For dropdowns and tabs:

<script src="https://cdn.jsdelivr.net/npm/unigrid.css/dist/unigrid.min.js"></script>

Quick Start

Basic page structure

Site Name

Main content

Sidebar

<header class="ug-header">
  <div class="ug-header__title">
    <h1>Site Name</h1>
  </div>
</header>

<div class="ug-container">
  <div class="ug-grid">
    <div class="ug-col--8">Main content</div>
    <div class="ug-col--4">Sidebar</div>
  </div>
</div>

SCSS Customization

Override variables before importing:

// Custom overrides
$ug-black: #222;
$ug-font-family: "Frutiger", sans-serif;
$ug-base-leading: 1.5;
$ug-border-radius: 0.25rem;

@use "unigrid.css/src/scss/unigrid" as *;

Key Variables

Variable	Default	Description
`$ug-columns`	12	Grid column count
`$ug-font-family`	Inter, sans-serif	Base font
`$ug-black`	#1a1a1a	Primary dark color
`$ug-red`	#c1272d	Accent color
`$ug-base-leading`	1.625	Mobile line-height multiplier
`$ug-base-leading-desktop`	1.7	Desktop line-height multiplier
`$ug-prose-max-width`	35rem	Optimal reading measure
`$ug-container-max-width`	1280px	Container max-width
`$ug-border-radius`	0	Border radius for buttons, inputs, cards, modals, dropdowns
`$ug-border-radius-sm`	inherits	Smaller border radius
`$ug-border-radius-lg`	inherits	Larger border radius
`$ug-border-radius-pill`	9999px	Fully rounded (pill shape)

Border Radius

By default, all components have sharp corners (0 border-radius), true to the Unigrid style. Override $ug-border-radius for rounded UI:

// Sharp corners (default)
$ug-border-radius: 0;

// Subtle rounding
$ug-border-radius: 0.25rem;

// More rounded
$ug-border-radius: 0.5rem;

@use "unigrid.css/src/scss/unigrid" as *;

Applied to: buttons, inputs, select, textarea, cards, modal dialog, dropdown menu, tabs pills, infobox, prose inline code.

Vertical Rhythm

All spacing is based on a single CSS custom property --ug-leading that adapts at the desktop breakpoint:

Breakpoint	Base font	Leading	--ug-leading
Mobile (default)	16px	× 1.625	26px
Desktop (≥ 35rem)	18px	× 1.7	31px

Every margin, padding, line-height, and height uses calc(var(--ug-leading) * N) to stay on the baseline grid.