Getting Started

Installation

Two ways to use ply. Pick whichever fits your project.

Prototype

CDN — Just the CSS

One link tag. No install, no build step. You get the full grid, typography, buttons, forms, tables, navigation, dark mode, and WCAG AA contrast — all in one stylesheet.

Add this to your <head>: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plygrid@1/dist/css/ply.min.css">

What's included

  • Ratio-based flexbox grid (unit-25, unit-50, etc.)
  • Responsive prefixes for every breakpoint
  • Type scale from text-xs to text-5xl
  • Buttons, button groups, and form controls
  • Navbar, pills, tabs, and breadcrumbs
  • Bordered, striped, and hoverable tables
  • Dark mode via data-theme attribute
  • Print styles and reduced-motion support

How it works

ply automatically styles semantic HTML elements — <nav>, <table>, <code>, <blockquote>, <details>, <dialog>, headings, and forms all get styled out of the box.

Start with semantic HTML before reaching for classes. ply gives you a lot for free — use native elements first, then add classes only when you need customization.

For layout, wrap content in units-container for max-width centering, then use units-row with unit-* children. That's the entire grid model.

Starter template result

Sidebar

This stacks on mobile.

Hello ply

Semantic HTML, styled automatically.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plygrid@1/dist/css/ply.min.css">
  <title>My App</title>
</head>
<body>
  <nav class="navbar">
    <ul>
      <li class="active"><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>

  <div class="units-container">
    <div class="units-row">
      <div class="unit-25 phone-unit-100">
        <h3>Sidebar</h3>
        <p>This stacks on mobile.</p>
      </div>
      <div class="unit-75 phone-unit-100">
        <h1>Hello ply</h1>
        <p>Semantic HTML, styled automatically.</p>
        <button class="btn btn-blue">Get Started</button>
      </div>
    </div>
  </div>
</body>
</html>

Customize

Sass — Build Your Own

Install ply as a dependency and import the SCSS source. This gives you full access to the color palette, spacing variables, mixins, and the ability to extend ply at the Sass level.

Install

npm install plygrid

Import

In your main stylesheet:

@use 'plygrid/src/scss/ply' as *;

This gives you all compiled classes plus Sass variables, color maps, and mixins.

Use variables and mixins

Import individual modules to access the full color palette, spacing scale, breakpoints, and utility mixins. 

@use "plygrid/src/scss/components/colors" as colors;
@use "plygrid/src/scss/components/variables" as variables;
@use "plygrid/src/scss/components/mixins" as mixins;

.custom-card {
  background: colors.$color-blue-pastel;
  padding: variables.$base-spacing;
  border-radius: variables.$border-radius;
}

.custom-btn {
  @include mixins.button-variant(colors.$color-green, #fff);
}

Project structure

src/
  scss/
    components/
      _colors.scss      — Full color palette, brand colors, dark/light/pastel variants
      _variables.scss   — Spacing, font sizes, breakpoints, border radius
      _mixins.scss      — Button generator, clearfix, gradients, animations
      _grid.scss        — Grid system (units-container, units-row, unit-*)
      _buttons.scss     — Button styles and variants
      _forms.scss       — Form controls and styling
      _navigation.scss  — Navbar, pills, tabs, breadcrumbs
      _tables.scss      — Table styling
      _helpers.scss     — Utility classes
    ply.scss            — Main entry point (imports everything)

Theming

Dark Mode

ply automatically respects prefers-color-scheme. To manually control the theme, set the data-theme attribute on <html>. 

<!-- Force light mode -->
<html data-theme="light">

<!-- Force dark mode -->
<html data-theme="dark">

<!-- Follow system preference (default) -->
<html>

All ply colors use CSS custom properties (var(--ply-*)) that automatically adapt. Never hard-code color values — always use the provided variables or utility classes.

Next

Next Steps

See what ply styles for free in Semantic HTML, or set up your AI agent with AI Agents.