The guide, split into six pages by topic. Components and the class reference have pages of their own.
Start here
Depending on whether you want to ship something today, understand the architecture, or look up a class.
Copy the files, link what your page contains, write ordinary HTML. The module picker assembles your link block for you.
Installation · 5 minutes
Two layers of tokens, eleven roles, and why a theme is a stylesheet rather than a fork. Change the type scale live while you read.
Tokens, theming, modules
All 690 classes, grouped by module and family, with the properties each one sets. Generated from the CSS on every build.
Class reference
Quick start
Core defines the tokens every other file reads, so it always loads first. Utilities loads last so its helpers win a specificity tie.
pf- and collide with nothing<link rel="stylesheet" href="/PolyFishCSS-Core.css?v=d3e4d1db">
<link rel="stylesheet" href="/PolyFishCSS-Headers.css?v=2b121128">
<link rel="stylesheet" href="/PolyFishCSS-Content.css?v=6e21fa2f">
<section class="pf-section">
<div class="pf-container">…</div>
</section>Download or self-host, load order, fonts, folder layout, a production server config — and what lives in each module.
Container and measure, the intrinsic primitives, breakpoints, every form control, and the spacing scale.
Every custom property, retheme from eleven roles, scoped palettes, and the reduced-motion policy.
A ten-step scale, the 66-character measure, three families — plus contrast, limits and right-to-left.
The one optional script, measured sizes and budgets, and the recipes and fixes that do not fit elsewhere.
Class by class from Bootstrap, Tailwind and earlier PolyFish releases, and what has no equivalent.
Every component rendered live, grouped by the file it lives in.
Every public class, grouped by module and family, with the properties each one sets.
Fifty stroke-style SVGs on a 24-pixel grid — copy the markup, size with font-size, colour with currentColor.
Whole sections to copy — hero and stats, an app shell, a settings page, empty states, pricing — built from existing classes.
Swap the header, hero, body and footer of a live page and change the tokens underneath.
Every release and what changed, including the bugs caught before they shipped.
Complete pages, each with a different file load, plus every palette side by side.
Load order matters
Core, then Headers, Content and Footers in any order, then Utilities. Loading Utilities early is the single most common mistake — its helpers stop overriding component rules.
Interactive
Fifteen panels across the documentation, all of them radio inputs,
checkboxes and :has(). No script runs any of it.
Swap the header, hero, body and footer of a live page, then retint it.
Theme, accent, facet depth, radius and density on one stage.
Scale, measure and leading against a real specimen.
Tick files and watch which components are available.
Drag a container narrower and watch real components respond.
Measured file sizes and gzipped totals per scenario.
44px targets, high contrast and reduced motion, switchable.
Default, focus, disabled, busy and invalid on real markup.
Tick enhancements, get the markup you need.
Variant, size and width, with the class string assembling alongside.
Stack, cluster, grid, split and shell, with a live gap control.
Five components with the HTML that produced them one toggle away.
Which breakpoint your window is in, and what it changes.
Tick what your page has; the head assembles itself.
How the pieces fit
Core is the only required file. Everything else maps to a part of a page, so the answer is usually visible from the design.
| Page you are building | Files to link | Minified | Why |
|---|---|---|---|
| Sign-in or error screen | Core, Content | 39 KB | One panel, no navigation, no footer |
| Marketing or landing page | Core, Headers, Content, Footers | 54 KB | Hero, sections, column footer |
| Documentation page | Core, Headers, Content, Footers, Space | 56 KB | Adds sidebar navigation and spacing helpers |
| Application screen | Core, Headers, Content, Forms, Components | 75 KB | Tables, tabs, menus, validation states |
| Anything using most of it | The bundle | 99 KB | Fewer requests and smaller gzipped past six files |
A palette names colours. Roles name jobs — background, surface, text, accent, border. Components only ever read roles, so a theme is eleven redeclared properties rather than a fork of the framework.
That indirection is why light mode is a palette swap with no component rule touched, and why the playground can retint a live page from radio inputs.
No carousel, no toast queue, no combobox, no scroll-animation library. Anything that only works when a script runs would break the rule the optional layer is built on: every component functions without it.
A horizontally snapping .pf-scroller replaces the carousel. It has no autoplay and no hidden slides, and every card is reachable by scroll, keyboard and screen reader.
Baseline
| Feature | Used for | From | Without it |
|---|---|---|---|
| Custom properties | Every token | 2016 | Nothing works — this is the floor |
| Grid and gap | All layout primitives | 2017 | Nothing works |
clamp() | Fluid type and rhythm | Chrome 79 | Type stops scaling; layout holds |
:has() | Option cards, playground | Chrome 105, Safari 15.4 | Selected-state styling is skipped |
@container | Container-query helpers | Chrome 105, Safari 16 | Components keep their stacked layout |
animation-timeline | Scroll reveal | Chrome 115 | Content is simply visible |
color-mix() | Frosted panels, brand tints | Chrome 111, Safari 16.2 | Falls back to a solid colour |
Roughly Chrome 105, Safari 15.4 and Firefox 103. Every feature past that floor is behind @supports or has a declared fallback, so an older engine does less rather than breaking.
Beyond the floor
| Feature | Used for | From | Without it |
|---|---|---|---|
<dialog> | Modals, drawers | Baseline 2022 | data-pf-dialog script or a server-rendered page |
popover + invoker commands | Menus and dialog triggers in markup | Baseline 2025 | Buttons do nothing — keep a scripted or server fallback |
@starting-style | Dialog and overlay transitions | Baseline 2024 | Overlays appear instantly |
| Anchor positioning | .pf-popover placement next to its button | Chrome 125, Safari 26 | The popover opens in a fixed spot instead |
field-sizing | .pf-textarea--auto | Chrome 123, Safari 18.4 | The textarea keeps a fixed height |
animation-timeline: scroll() | Reading progress on blog posts | Chrome 115, Safari 26 | The progress bar hides itself |
@view-transition | Cross-fade between pages | Chrome 126, Safari 18.2 | Navigation is instant |
| Service worker | Offline reading of docs you have visited | Every evergreen engine | Offline hits a browser error page |
The same honesty the blog posts argue for, applied to this site: every progressive feature here names the engine it needs and what happens without it. Firefox versions trail the Chromium/Safari edge by a release or two on most of these.