Unigrid

CSS Framework

Inspired by Massimo Vignelli

Build with the Unigrid System

A CSS framework with vertical rhythm, square modules, and BEM naming — inspired by the National Park Service's iconic design system.

Get Started GitHub

Installation

npm install unigrid.css

Then import in your SCSS:

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

Add to your HTML <head>:

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

Optional JavaScript (dropdowns, tabs):

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

Download the latest release from GitHub:

Download from GitHub

Features

12-Column Grid

Responsive CSS Grid with 4 breakpoints. Column spans, row spans, subgrid, and alignment utilities.

10 Unigrid Formats

A-series (1 panel wide) and B-series (2 panels wide). Based on real NPS specifications with DIN proportions.

Square Modules

Viewport-proportional module system with responsive column reduction: 12 → 8 → 6 → 4 → 3.

Vertical Rhythm

All spacing based on a single leading unit via CSS custom property. Adapts at desktop breakpoint.

BEM Naming

Consistent Block__Element--Modifier naming. All classes prefixed with ug-.

SCSS + Customizable

Full !default variables. Override colors, fonts, breakpoints, and formats before import.

Components

Header

Signature black band

Navbar

Navigation with mobile menu

Hero

Full-width hero sections

Buttons

Filled, outline, ghost

Cards

Content containers

Forms

Inputs, select, textarea

Tabs

Tab navigation

Tables

Striped, bordered, compact
View all components →

Themes

Unigrid for Bootstrap 5

Apply the Unigrid design language — NPS colors, Inter typography, sharp corners, flat navigation, and the signature section bands — on top of Bootstrap 5. Drop-in replacement for bootstrap.css.

  • Usable as compiled CSS or as SCSS source via @use "unigrid.css/src/scss/bootstrap/unigrid-bootstrap"
  • Configured via Bootstrap's native Sass variables (@use ... with)
  • All spacing, margins and padding utilities snap to --ug-leading rhythm
  • Opt-in CSS Grid layout (.grid / .g-col-*)
  • Flat pagination, tabs, forms, navbar matching .ug-* components
  • Includes .ug-header, .ug-section, .ug-sidebar-layout, .ug-footer
Live Demo Source

Compiled CSS

<link rel="stylesheet"
  href="unigrid-bootstrap.css">

SCSS Integration

npm install unigrid.css bootstrap

Then in your SCSS entry point:

@use "unigrid.css/src/scss/bootstrap/unigrid-bootstrap";

Compile with --load-path=node_modules:

sass style.scss out.css --load-path=node_modules

Quick Example

<header class="ug-header">
  <div class="ug-header__title">
    <h1>Yellowstone</h1>
    <p class="ug-header__subtitle">National Park</p>
  </div>
</header>

<div class="ug-container">
  <div class="ug-grid">
    <div class="ug-col--8">
      <h2>Welcome</h2>
      <p>Content here...</p>
    </div>
    <div class="ug-col--4">
      <div class="ug-infobox">
        <p class="ug-infobox__title">Hours</p>
        <p>Open year-round</p>
      </div>
    </div>
  </div>
</div>