Nothing on this page has a class
View source. The body is plain semantic HTML — headings, paragraphs, a table, a form, a disclosure, a dialog — and two stylesheets make it look finished: Core for the tokens and type, Classless for the elements.
Why this exists
Classless frameworks are loved for documentation and prototypes, and they usually stop there.
The first time a page needs a card grid, you switch frameworks. Here you would add the Content
module and put pf-grid on a div, and this page would keep working, because
every classless rule has zero specificity and only touches elements without a class.
One link and semantic HTML looks finished. Two links and it grows into anything.
A table
| File | Minified | Needed here |
|---|---|---|
| PolyFishCSS-Core | 20 KB | Yes |
| PolyFishCSS-Classless | 5 KB | Yes |
| Everything else | 85 KB | No |
Code
Inline code, a Ctrl + K shortcut, and a block:
<link rel="stylesheet" href="PolyFishCSS-Core.min.css">
<link rel="stylesheet" href="PolyFishCSS-Classless.min.css">Disclosure and dialog
What does the dialog need?
Nothing but HTML: command="show-modal" on the button.
And these two are exclusive
Because they share a name. Opening one closes the other.
A form
Try it: add the Content module and class="pf-card" to any element above. It becomes a card, and nothing around it changes.