Skip to content
PolyFish CSS
Get the files

Sections to copy whole

Components are the parts; these are the assemblies. Each recipe renders live, then gives you the markup — a landing hero, an app shell, a settings page, an empty state and a pricing band, built from classes you already have.

Documentation menu

Landing hero

Eyebrow, title, lede, two actions and a stat row — the top of every marketing page on this site.

Now in beta

Ship the page, leave the toolchain.

One required file, eleven optional ones, and a theme that is a handful of custom properties.

Get the files See the parts
  • 20 KBCore module
  • 0Dependencies
  • 11Themes
  • MITLicence
hero.htmlhtml
<section class="pf-hero">
  <div class="pf-container pf-hero__inner">
    <p class="pf-hero__eyebrow"><span class="pf-dot"></span> Now in beta</p>
    <h1 class="pf-hero__title">Ship the page, <em>leave the toolchain.</em></h1>
    <p class="pf-hero__lede">One required file, eleven optional ones.</p>
    <div class="pf-hero__actions">
      <a class="pf-btn" href="/docs/install">Get the files</a>
      <a class="pf-btn pf-btn--secondary" href="/docs/components">See the parts</a>
    </div>
    <ul class="pf-stats">
      <li class="pf-stat"><span class="pf-stat__value">20 KB</span><span class="pf-stat__label">Core module</span></li>
      <li class="pf-stat"><span class="pf-stat__value">0</span><span class="pf-stat__label">Dependencies</span></li>
    </ul>
  </div>
</section>

App shell

A two-region workspace: pf-sidebar collapses the rail under the main column on a phone, so the same markup is the desktop shell and the mobile stack.

RunStatusDuration
nightly-scanPassed4m 12s
deploy-prodPassed51s
seed-dbFailed9s
shell.htmlhtml
<div class="pf-sidebar">
  <nav class="pf-sidebar__side">
    <ul class="pf-sidenav__links">
      <li><a href="#" aria-current="page">Overview</a></li>
      <li><a href="#">Runs</a></li>
    </ul>
  </nav>
  <div class="pf-sidebar__main">
    <div class="pf-table-wrap">
      <table class="pf-table"> … </table>
    </div>
  </div>
</div>

Settings page

Field rows, a segmented control and switches — the shape of every account page.

Density
settings.htmlhtml
<form class="pf-form">
  <div class="pf-field">
    <label for="name">Display name</label>
    <input id="name" type="text">
  </div>
  <div class="pf-field">
    <span id="density-label">Density</span>
    <div class="pf-segment" role="radiogroup" aria-labelledby="density-label">
      <input type="radio" name="density" id="d-compact"><label for="d-compact">Compact</label>
      <input type="radio" name="density" id="d-default" checked><label for="d-default">Default</label>
      <input type="radio" name="density" id="d-airy"><label for="d-airy">Airy</label>
    </div>
  </div>
  <label class="pf-switch"><input type="checkbox" checked><span class="pf-switch__track"></span> Weekly digest</label>
  <button class="pf-btn" type="submit">Save changes</button>
</form>

Empty and error states

The screens nobody budgets time for. pf-empty is the nothing-yet case; the alert pair covers the something-broke case.

No monitors yet

Point the watcher at a URL and results land here.

Add the first monitor

The build failed

Step 4 exited 1. The log keeps the last 200 lines.

Deploy queued

Two releases ahead of this one. Nothing to do.

states.htmlhtml
<div class="pf-empty">
  <span class="pf-empty__mark" aria-hidden="true"></span>
  <h3 class="pf-empty__title">No monitors yet</h3>
  <p class="pf-empty__body">Point the watcher at a URL and results land here.</p>
  <a class="pf-btn pf-btn--sm" href="#">Add the first monitor</a>
</div>

<div class="pf-alert pf-alert--danger">
  <p class="pf-alert__title">The build failed</p>
  <p>Step 4 exited 1. The log keeps the last 200 lines.</p>
</div>

Pricing band

Two tiers, one of them the recommendation — pf-plan--featured and its badge say which without a word of copy.

Solo

$0 a month

  • Three projects
  • Community themes
  • Export to plain CSS
Start free
Recommended

Team

$12 a month

  • Unlimited projects
  • Shared token themes
  • Priority support
Go team
pricing.htmlhtml
<div class="pf-grid pf-grid--2">
  <article class="pf-plan">
    <h3 class="pf-plan__name">Solo</h3>
    <p class="pf-plan__price">$0 <span>a month</span></p>
    <ul class="pf-checks"><li>Three projects</li></ul>
    <div class="pf-plan__foot"><a class="pf-btn pf-btn--secondary pf-btn--block" href="/signup">Start free</a></div>
  </article>
  <article class="pf-plan pf-plan--featured">
    <span class="pf-plan__badge">Recommended</span>
    <h3 class="pf-plan__name">Team</h3>
    <p class="pf-plan__price">$12 <span>a month</span></p>
    <ul class="pf-checks pf-checks--accent-2"><li>Unlimited projects</li></ul>
    <div class="pf-plan__foot"><a class="pf-btn pf-btn--block" href="/signup?plan=team">Go team</a></div>
  </article>
</div>

Steps

Numbered onboarding — the counter styles itself, so adding a step is adding a list item.

  1. Link the file

    Core is the only required stylesheet; every other module is opt-in.

  2. Write plain HTML

    Buttons, cards and heroes come from classes on the elements you already wrote.

  3. Ship it

    No build, no purge, no toolchain — the file on the server is the file you wrote.

steps.htmlhtml
<ol class="pf-steps">
  <li><h3>Link the file</h3><p>Core is the only required stylesheet.</p></li>
  <li><h3>Write plain HTML</h3><p>Classes on the elements you already wrote.</p></li>
  <li><h3>Ship it</h3><p>No build, no purge, no toolchain.</p></li>
</ol>