Release 1.0.1

ply v1.0.1 Release Notes

Bug Fixes

• Outline button dark mode — Fixed white-on-white hover text on .btn-outline in dark mode by adding --ply-color-text-inverse to dark theme
• Square/straight buttons — Fixed .btn-straight and .btn-square not overriding border-radius due to specificity issue with button.btn

Navbar Modernization

• Default border changed from bold 2px black to subtle 1px gray — cleaner, less opinionated
• Removed forced letter-spacing and small font-size from default navbar
• Active state now uses a colored bottom-border indicator (like GitHub/Apple tabs) instead of muted gray text
• New border variants: navbar--thick, navbar--borderless, navbar--border-blue, navbar--border-green, navbar--border-red, navbar--border-yellow
• Mobile overflow: Navbar now scrolls horizontally on mobile with a hidden scrollbar instead of wrapping. Use navbar--stack to opt into wrapping behavior
• Vertical variant updated with thinner border and cleaner active state

New Utilities

• equal-height — Add to units-row to make all cards/children stretch to the same height automatically
• text-primary, text-secondary, text-tertiary / text-muted, text-inverse — Theme-aware text color hierarchy
• text-balance — Balances line lengths for headings (text-wrap: balance)
• no-orphan — Prevents orphaned words at the end of text blocks (text-wrap: pretty)
• gap-xs, gap-sm, gap, gap-lg, gap-xl — Gap utilities for flex/grid children
• no-link-style — Suppresses link color and underline on all <a> inside a container

AI Instructions Improvements

• Added "Start Semantic" philosophy section — emphasizes using semantic HTML before reaching for divs or custom classes
• Added rule: ply is standalone — do not use alongside Tailwind, Bootstrap, or other frameworks
• Added rule: only use documented class names — don't invent utilities
• Added rule: use CSS custom properties for colors to preserve dark mode
• Added Feather Icons as recommended icon library
• Documented new common patterns section in CLAUDE.md (equal-height, gap, text-balance, no-link-style, navbar variants, text color hierarchy)
• Updated anti-patterns with concrete examples
• Updated ply-classes.json with all new classes

ply v1.0.0 — AI-Ready CSS Framework

ply v1.0.0 — AI-Ready CSS Framework

The first stable release of ply: a ratio-based CSS framework built for AI agents, accessible by default, and small enough to ship anywhere.

~18KB gzipped. No JavaScript. No build step. One <link> tag.

What's in 1.0.0

AI Integration

• PLY.md — complete class reference, usage rules, anti-patterns, and copy-paste snippets for AI agents (Claude, Cursor, Copilot, Replit AI)
• ply-classes.json — machine-readable class map for programmatic tool use
• snippets/ — 11 ready-to-use HTML templates (dashboard, login, contact form, pricing cards, etc.)
• Predictable class names that LLMs guess correctly on first try: .alert-blue, .btn-sm, .unit-50

Accessibility

• :focus-visible outlines on all interactive elements
• prefers-reduced-motion globally respected
• prefers-color-scheme dark mode — automatic, no configuration
• Semantic HTML elements styled out of the box: <details>, <dialog>, <progress>, <meter>
• WCAG AA contrast verified across light and dark themes

Theming System

• All colors, borders, shadows, and layers use --ply-* CSS custom properties
• Create custom themes by overriding tokens on [data-theme="your-name"] — no Sass, no build step
• Light and dark modes built in; custom themes are pure CSS

Elevation System

• --ply-layer-0 through --ply-layer-3 background tokens
• --ply-shadow-1 through --ply-shadow-3 shadow tokens
• .layer-* and .shadow-* utility classes
• All adapt automatically across themes and dark mode

Naming Aliases

• .alert alongside .tools-alert
• .btn-lg / .btn-sm / .btn-xs alongside .btn-big / .btn-small / .btn-smaller
• .input-lg / .input-sm / .input-xs for form inputs
• .active alongside .on for navigation

Bundles

Bundle	File	Size (gzip)
Full	ply.min.css	~18KB
Core	ply-core.min.css	~16KB
Essentials	ply-essentials.min.css	~5KB

Install

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

npm install plygrid

Ply v0.9.0 - Modernize Build Pipeline

Drop the legacy Gulp/node-sass toolchain in favor of modern Sass CLI +
PostCSS. Migrate all SCSS to the Sass module system (@use/@forward) and
eliminate every deprecation warning.

What changed

Build toolchain

• Replaced Gulp 3.x + node-sass with the sass CLI (Dart Sass) +
  postcss-cli + autoprefixer
• Removed 11 unused devDependencies (Babel, React, gulp-*, etc.)
• Build is now driven by simple npm scripts (npm run build, npm run watch)
• Added engines field requiring Node >= 18
• Added .nvmrc pinning Node 22

SCSS module migration

• Converted all @import statements to @use/@forward (Sass module system)
• Converted / division to math.div() via @use "sass:math"
• Converted darken()/desaturate()/mix() to color.adjust()/color.mix() via
  @use "sass:color"
• Converted red()/green()/blue() to color.channel()
• Result: zero deprecation warnings

Quality & CI

• Added Stylelint with stylelint-config-standard-scss (npm run lint)
• Added GitHub Actions CI workflow — builds and lints on every push/PR to
  master

Removed files

• gulpfile.js
• .babelrc

Added files

• postcss.config.js
• .nvmrc
• .stylelintrc.json
• .github/workflows/ci.yml

Minor fixes to nav and border-radius

This release makes border radius based on an em rather than pixel (we want all values to be flexible). It also makes a change of nav span to nav > span to not duplicate padding on nested spans.

Initial flexbox implementation

This is the initial switch to the flexbox grid. Included with the flexbox implementation are several new mixins and helpers including:

• Cursor helpers
• Square mixin
• Color opacity mixin
• Box-sizing mixin