Skip to content
PolyFish CSS
Get the files

The page core

Everything between the header and the footer, in the order you'd usually build it: sections, cards, decision tables, forms and the closing band.

  • 12 KBContent module, minified
  • 13Component families inside it
  • 0Scripts required
  • 1Dependency, which is Core

Cards and features

Three card weights

A default surface card, a facet card with one clipped corner, and an accent card. Use the facet for the card you want read first, not for all of them.

Default

Surface tint, hairline border, large radius. The icon slot is optional.

Facet

One clipped corner, sized by --pf-cut. Set that to zero and it becomes a rectangle.

Accent link card

The whole card is the anchor, with hover and focus handled.

Feature blocks

Icon, heading, one line. For the grid of six that every landing page has.

Checklists

Triangle bullets aligned to the first line, wrapping cleanly.

Steps

Numbered markers, used only where the content is a real sequence.

  • Checklist item with a facet bullet
  • A second item, long enough to wrap onto another line so you can see the alignment hold
  • A third

Decisions

Tables and plan cards

Tables scroll horizontally inside .pf-table-wrap rather than squashing columns to unreadable widths on a phone.

Minimal

Core only.

11 KB one file

  • Tokens and reset
  • Layout primitives
  • Buttons and pills
What's inside
Common

Landing page

Core, Headers, Content, Footers.

33 KB four files

  • Nav, hero, announcement bar
  • Cards, plans, tables, forms
  • Column footer
See it built

Everything

All five, concatenated.

36 KB one bundle

  • Good for prototyping
  • Swap to the split files later
  • Still no build step
Download
Page typeCoreHeadersContentFootersUtilities
Marketing landingYesYesYesYesYes
DocumentationYesYesYesSkipYes
Application shellYesYesYesSkipYes
Sign-in screenYesSkipYesSkipSkip

Input and feedback

Forms, alerts and code

Used in the page title.

Default

Left rule in the accent colour.

Success

Deployed. The file is live at the path you set.

Careful

Utilities loads last. Move it above Content and its helpers stop winning ties.

Broken

Core is missing. Every other file reads its properties and renders unstyled without it.

card.htmlhtml
<article class="pf-card pf-card--facet">
  <h3 class="pf-card__title">Facet card</h3>
  <p class="pf-card__body">Two classes, no wrapper.</p>
</article>
Native details element

Open and close state is the browser's. No script, and it prints expanded.

Second panel

Wrap them in .pf-accordion for the spacing and the marker.

A framework you can read end to end in an afternoon is a framework you can fix at 2am.
Design note, PolyFish 0.1.0

The band that closes a page.

Mesh background, one masked edge of contrast, two actions. It sits above the footer.

Footers next Full reference