How to read this
“Declares” lists the properties a rule sets, not its values — the values are tokens and you can change them. “Applies when” names the media or container query a class sits inside; an empty cell means it always applies. Families of more than a dozen near-identical classes are printed as a list of names rather than a table of eighty identical rows.
Components
Application UI: badges, groups, pagination, progress, lists, avatars, switches, tabs, menus, dialogs, drawers, toasts.
PolyFishCSS-Components.css · 98 public classes
Components
Sets display, align-items, gap, background, border… — 92 classes.
pf-badge pf-badge--accent pf-badge--secondary pf-badge--danger pf-badge--muted pf-badge--outline pf-badge--count pf-chip pf-chip__x pf-btn-group pf-btn pf-btn-group--square pf-btn-group--block pf-pagination pf-pagination__item pf-pagination__gap pf-progress pf-progress__bar pf-progress--lg pf-progress--secondary pf-meter pf-meter__seg pf-meter__seg--on pf-meter__seg--warn pf-spinner pf-spinner--lg pf-list pf-list__item pf-list__item--link pf-list__title pf-list__meta pf-avatar pf-avatar--sm pf-avatar--lg pf-avatar--accent pf-avatars pf-switch pf-switch__track pf-input-group pf-input pf-input-group__addon pf-tabs pf-tabs__panel pf-tabs__radio pf-tabs__label pf-menu pf-menu__trigger pf-menu__list pf-menu--end pf-menu__item pf-menu__item--danger pf-menu__sep pf-dialog pf-dialog-target pf-dialog__panel pf-dialog__close pf-dialog__title pf-dialog__foot pf-tooltip pf-tooltip--end pf-ratio pf-ratio--1x1 pf-ratio--4x3 pf-ratio--16x9 pf-ratio--21x9 pf-skeleton pf-skeleton--title pf-skeleton--text pf-skeleton--block pf-skeleton--circle pf-empty pf-empty__mark pf-empty__title pf-empty__body pf-drawer pf-drawer__scrim pf-drawer__panel pf-drawer--end pf-drawer--bottom pf-drawer__head pf-drawer__title pf-drawer__body pf-drawer__foot pf-toasts pf-toast pf-toast--accent pf-toast--danger pf-toast__close pf-toolbar pf-toolbar__group pf-toolbar__group--end pf-toolbar--bordered
Misc effects
| Class | Declares | Applies when |
|---|---|---|
pf-list--flush | border, border-radius | — |
Layout helpers
| Class | Declares | Applies when |
|---|---|---|
pf-divider | display, align-items, gap, color, font-size | — |
Position
| Class | Declares | Applies when |
|---|---|---|
pf-bottombar | position, inset, z-index, display, justify-content… | — |
pf-bottombar__item | display, justify-items, gap, flex, min-height… | — |
pf-bottombar__mark | width, height, background, clip-path | — |
Sizing
| Class | Declares | Applies when |
|---|---|---|
pf-has-bottombar | padding-bottom | — |
Content
Sections, cards, plans, stats, tables, alerts, code, forms, accordions, sidebars and CTA bands.
PolyFishCSS-Content.css · 90 public classes
Components
Sets padding-block — 82 classes.
pf-section pf-section--tight pf-section--roomy pf-section--vast pf-section--alt pf-section--raised pf-section__head pf-section__head--center pf-eyebrow pf-lede pf-muted pf-prose pf-table-wrap pf-code pf-alert pf-card pf-card__title pf-card__body pf-card__foot pf-card--facet pf-card--accent pf-card--flat pf-card--link pf-card__icon pf-card__icon--accent-2 pf-feature pf-checks pf-checks--accent-2 pf-checks--muted pf-plan pf-plan--featured pf-plan__name pf-plan__note pf-plan__price pf-plan__badge pf-plan__foot pf-stats pf-stat pf-stat__value pf-stat__label pf-table pf-table--zebra pf-table--compact pf-table--roomy pf-table--bordered pf-table--hover pf-table--fixed pf-table-wrap--tall pf-table--sticky pf-table--stack pf-alert__title pf-alert--info pf-alert--success pf-alert--warn pf-alert--danger pf-quote pf-code__bar pf-code__copy pf-th-sort pf-tag pf-attr pf-str pf-comment pf-field pf-label pf-input pf-choice pf-accordion pf-sidenav pf-sidenav--sticky pf-sidenav__group pf-sidenav__heading pf-sidenav__links pf-gallery pf-tile pf-steps pf-screen pf-screen__panel pf-tile__fill pf-specimen pf-cta pf-cta__inner
Sizing
| Class | Declares | Applies when |
|---|---|---|
pf-help | color, font-size, line-height | — |
Layout helpers
| Class | Declares | Applies when |
|---|---|---|
pf-select | width, background, border, border-radius, color… | — |
pf-inline-form | display, flex-wrap, gap | — |
Typography
| Class | Declares | Applies when |
|---|---|---|
pf-textarea | width, background, border, border-radius, color… | — |
Scroll
| Class | Declares | Applies when |
|---|---|---|
pf-scroller | display, grid-auto-flow, grid-auto-columns, gap, overflow-x… | — |
pf-scroller--sm | --pf-scroller-item | — |
pf-scroller--lg | --pf-scroller-item | — |
pf-scroller--stop | grid-auto-flow, grid-template-columns, overflow | (min-width: 900px) |
Core
Required. Tokens, reset, type, layout primitives, buttons, brand lockups and focus handling.
PolyFishCSS-Core.css · 72 public classes
Components
Sets --pf-bg, --pf-bg-deep, --pf-surface, --pf-surface-raised, --pf-text… — 64 classes.
pf-invert pf-prose pf-container pf-container--narrow pf-container--wide pf-stack pf-stack--sm pf-stack--lg pf-cluster pf-cluster--between pf-cluster--center pf-grid pf-grid--2 pf-grid--3 pf-grid--4 pf-grid--auto pf-grid--auto-sm pf-grid--auto-md pf-grid--auto-lg pf-grid--auto-xl pf-shell pf-shell--narrow pf-shell--aside pf-split pf-logo pf-logo--sm pf-lockup pf-brand-well pf-brand-rule pf-stretched-link pf-facet pf-facet--sw pf-btn pf-btn--secondary pf-btn--ghost pf-btn--accent-2 pf-btn--icon pf-btn--square pf-btn--sm pf-btn--link pf-btn--lg pf-btn--block pf-pill pf-pill--accent pf-pill--accent-2 pf-mark pf-mark--accent-2 pf-dot pf-skip pf-visually-hidden pf-nav__links pf-footer__links pf-sidenav__links pf-breadcrumb pf-social pf-totop pf-choice pf-input pf-input--sm pf-card pf-plan pf-alert pf-table-wrap pf-code
Typography
| Class | Declares | Applies when |
|---|---|---|
pf-measure-prose | max-width | — |
pf-measure-wide | max-width | — |
pf-textarea | font-size | (pointer: coarse) |
Colour
| Class | Declares | Applies when |
|---|---|---|
pf-fg-brand | color | — |
Grid spans
| Class | Declares | Applies when |
|---|---|---|
pf-span-full | grid-column | — |
Scroll
| Class | Declares | Applies when |
|---|---|---|
pf-scroll-lock | overflow, scrollbar-gutter | — |
Layout helpers
| Class | Declares | Applies when |
|---|---|---|
pf-select | font-size | (pointer: coarse) |
pf-select--sm | font-size | (pointer: coarse) |
Effects
Transforms, filters, gradients, rings, animations, scroll behaviour and the group hover pattern.
PolyFishCSS-Effects.css · 95 public classes
Transforms
Sets transform — 21 classes.
pf-transform pf-translate-x-1 pf-translate-x-2 pf-translate-x-4 pf-translate-y-1 pf-translate-y-2 pf-translate-y-4 pf-translate-y-up-1 pf-translate-y-up-2 pf-translate-center pf-rotate-45 pf-rotate-90 pf-rotate-180 pf-rotate-back-45 pf-scale-95 pf-scale-105 pf-scale-110 pf-flip-x pf-origin-top pf-origin-bottom pf-origin-left
Filters
| Class | Declares | Applies when |
|---|---|---|
pf-blur-sm | filter | — |
pf-blur | filter | — |
pf-blur-lg | filter | — |
pf-grayscale | filter | — |
pf-dim | filter | — |
pf-bright | filter | — |
pf-saturate | filter | — |
pf-desaturate | filter | — |
pf-filter-none | filter | — |
pf-backdrop-blur | -webkit-backdrop-filter, backdrop-filter | — |
pf-backdrop-blur-lg | -webkit-backdrop-filter, backdrop-filter | — |
pf-frost | background | — |
Gradients
| Class | Declares | Applies when |
|---|---|---|
pf-gradient-surface | background-image | — |
pf-gradient-deep | background-image | — |
pf-gradient-accent | background-image | — |
pf-gradient-edge | background-image | — |
pf-gradient-text | color | — |
pf-rule-fade | height, border, background-image | — |
Rings
| Class | Declares | Applies when |
|---|---|---|
pf-ring-1 | box-shadow | — |
pf-ring-2 | box-shadow | — |
pf-ring-accent | --pf-ring-color | — |
pf-ring-danger | --pf-ring-color | — |
pf-ring-offset | box-shadow | — |
Animations
| Class | Declares | Applies when |
|---|---|---|
pf-animate-spin | animation | (prefers-reduced-motion: no-preference) |
pf-animate-pulse | animation | (prefers-reduced-motion: no-preference) |
pf-animate-bounce | animation | (prefers-reduced-motion: no-preference) |
pf-animate-fade | animation | (prefers-reduced-motion: no-preference) |
pf-animate-rise | animation | (prefers-reduced-motion: no-preference) |
pf-animate-slide-in | animation | (prefers-reduced-motion: no-preference) |
pf-delay-1 | animation-delay | (prefers-reduced-motion: no-preference) |
pf-delay-2 | animation-delay | (prefers-reduced-motion: no-preference) |
pf-delay-3 | animation-delay | (prefers-reduced-motion: no-preference) |
pf-delay-4 | animation-delay | (prefers-reduced-motion: no-preference) |
Transitions
| Class | Declares | Applies when |
|---|---|---|
pf-duration-fast | transition-duration | — |
pf-duration-slow | transition-duration | — |
pf-duration-slower | transition-duration | — |
pf-ease-out | transition-timing-function | — |
pf-ease-in | transition-timing-function | — |
pf-ease-spring | transition-timing-function | — |
pf-transition-transform | transition | — |
pf-transition-opacity | transition | — |
pf-transition-shadow | transition | — |
Scroll
| Class | Declares | Applies when |
|---|---|---|
pf-snap-x | scroll-snap-type, overscroll-behavior-x | — |
pf-snap-y | scroll-snap-type, overscroll-behavior-y | — |
pf-snap-start | scroll-snap-align | — |
pf-snap-center | scroll-snap-align | — |
pf-snap-none | scroll-snap-align | — |
pf-scroll-smooth | scroll-behavior | — |
pf-scroll-contain | overscroll-behavior | — |
pf-scrollbar-thin | scrollbar-width | — |
pf-scrollbar-none | scrollbar-width | — |
pf-scroll-mt | scroll-margin-top | — |
Group and focus-within
| Class | Declares | Applies when |
|---|---|---|
pf-group-show | opacity | — |
pf-group-hide | opacity | — |
pf-group | opacity, transition | (hover: hover) |
pf-group-slide | transform | (hover: hover) |
pf-focus-ring | box-shadow | — |
pf-focus-border | border-color | — |
Misc effects
Sets isolation — 16 classes.
pf-isolate pf-blend-multiply pf-blend-screen pf-blend-overlay pf-will-change-transform pf-will-change-opacity pf-resize-none pf-resize-y pf-appearance-none pf-accent-color pf-caret-accent pf-list-none pf-list-disc pf-list-decimal pf-fade-bottom pf-fade-right
Fonts
Self-hosted @font-face declarations only — it defines no classes.
PolyFishCSS-Fonts.css · 0 public classes
This module declares no classes.
Forms
Sizes, floating labels, validation feedback, fieldsets, range, file inputs and form layout.
PolyFishCSS-Forms.css · 36 public classes
Components
Sets font-size, padding — 31 classes.
pf-input--sm pf-input--lg pf-float pf-input pf-float__label pf-feedback pf-feedback--error pf-feedback--ok pf-feedback--hint pf-label--required pf-fieldset pf-fieldset--plain pf-legend pf-range pf-file pf-checks-group pf-checks-group--inline pf-choice-card pf-choice-card__title pf-choice-card__body pf-form pf-form__row pf-form__row--2 pf-form__row--3 pf-form__row--split pf-form__actions pf-btn pf-field--horizontal pf-label-row pf-counter pf-counter--over
Layout helpers
| Class | Declares | Applies when |
|---|---|---|
pf-select--sm | font-size, padding | — |
pf-select--lg | font-size, padding | — |
pf-select | padding-top, padding-bottom | — |
Typography
| Class | Declares | Applies when |
|---|---|---|
pf-textarea | padding-top, padding-bottom | — |
Sizing
| Class | Declares | Applies when |
|---|---|---|
pf-help | grid-column | — |
Grid
A twelve-column responsive grid for layouts whose proportions change per breakpoint.
PolyFishCSS-Grid.css · 271 public classes
Rows
Sets --pf-row-cols, display, grid-template-columns, column-gap, row-gap — 31 classes.
pf-row pf-row--top pf-row--middle pf-row--bottom pf-row--stretch pf-row--equal pf-row-cols-1 pf-row-cols-2 pf-row-cols-3 pf-row-cols-4 pf-row-cols-6 pf-row-cols-sm-1 pf-row-cols-sm-2 pf-row-cols-sm-3 pf-row-cols-sm-4 pf-row-cols-sm-6 pf-row-cols-md-1 pf-row-cols-md-2 pf-row-cols-md-3 pf-row-cols-md-4 pf-row-cols-md-6 pf-row-cols-lg-1 pf-row-cols-lg-2 pf-row-cols-lg-3 pf-row-cols-lg-4 pf-row-cols-lg-6 pf-row-cols-xl-1 pf-row-cols-xl-2 pf-row-cols-xl-3 pf-row-cols-xl-4 pf-row-cols-xl-6
Components
| Class | Declares | Applies when |
|---|---|---|
pf-col | grid-column | — |
Columns
Sets grid-column — 78 classes.
pf-col-auto pf-col-1 pf-col-2 pf-col-3 pf-col-4 pf-col-5 pf-col-6 pf-col-7 pf-col-8 pf-col-9 pf-col-10 pf-col-11 pf-col-12 pf-col-sm-auto pf-col-sm-1 pf-col-sm-2 pf-col-sm-3 pf-col-sm-4 pf-col-sm-5 pf-col-sm-6 pf-col-sm-7 pf-col-sm-8 pf-col-sm-9 pf-col-sm-10 pf-col-sm-11 pf-col-sm-12 pf-col-md-auto pf-col-md-1 pf-col-md-2 pf-col-md-3 pf-col-md-4 pf-col-md-5 pf-col-md-6 pf-col-md-7 pf-col-md-8 pf-col-md-9 pf-col-md-10 pf-col-md-11 pf-col-md-12 pf-col-lg-auto pf-col-lg-1 pf-col-lg-2 pf-col-lg-3 pf-col-lg-4 pf-col-lg-5 pf-col-lg-6 pf-col-lg-7 pf-col-lg-8 pf-col-lg-9 pf-col-lg-10 pf-col-lg-11 pf-col-lg-12 pf-col-xl-auto pf-col-xl-1 pf-col-xl-2 pf-col-xl-3 pf-col-xl-4 pf-col-xl-5 pf-col-xl-6 pf-col-xl-7 pf-col-xl-8 pf-col-xl-9 pf-col-xl-10 pf-col-xl-11 pf-col-xl-12 pf-col-xxl-auto pf-col-xxl-1 pf-col-xxl-2 pf-col-xxl-3 pf-col-xxl-4 pf-col-xxl-5 pf-col-xxl-6 pf-col-xxl-7 pf-col-xxl-8 pf-col-xxl-9 pf-col-xxl-10 pf-col-xxl-11 pf-col-xxl-12
Offsets
Sets margin-left — 72 classes.
pf-offset-0 pf-offset-1 pf-offset-2 pf-offset-3 pf-offset-4 pf-offset-5 pf-offset-6 pf-offset-7 pf-offset-8 pf-offset-9 pf-offset-10 pf-offset-11 pf-offset-sm-1 pf-offset-sm-2 pf-offset-sm-3 pf-offset-sm-4 pf-offset-sm-5 pf-offset-sm-6 pf-offset-sm-7 pf-offset-sm-8 pf-offset-sm-9 pf-offset-sm-10 pf-offset-sm-11 pf-offset-sm-0 pf-offset-md-1 pf-offset-md-2 pf-offset-md-3 pf-offset-md-4 pf-offset-md-5 pf-offset-md-6 pf-offset-md-7 pf-offset-md-8 pf-offset-md-9 pf-offset-md-10 pf-offset-md-11 pf-offset-md-0 pf-offset-lg-1 pf-offset-lg-2 pf-offset-lg-3 pf-offset-lg-4 pf-offset-lg-5 pf-offset-lg-6 pf-offset-lg-7 pf-offset-lg-8 pf-offset-lg-9 pf-offset-lg-10 pf-offset-lg-11 pf-offset-lg-0 pf-offset-xl-1 pf-offset-xl-2 pf-offset-xl-3 pf-offset-xl-4 pf-offset-xl-5 pf-offset-xl-6 pf-offset-xl-7 pf-offset-xl-8 pf-offset-xl-9 pf-offset-xl-10 pf-offset-xl-11 pf-offset-xl-0 pf-offset-xxl-1 pf-offset-xxl-2 pf-offset-xxl-3 pf-offset-xxl-4 pf-offset-xxl-5 pf-offset-xxl-6 pf-offset-xxl-7 pf-offset-xxl-8 pf-offset-xxl-9 pf-offset-xxl-10 pf-offset-xxl-11 pf-offset-xxl-0
Order
Sets order — 74 classes.
pf-order-first pf-order-last pf-order-1 pf-order-2 pf-order-3 pf-order-4 pf-order-5 pf-order-6 pf-order-7 pf-order-8 pf-order-9 pf-order-10 pf-order-11 pf-order-12 pf-order-sm-1 pf-order-sm-2 pf-order-sm-3 pf-order-sm-4 pf-order-sm-5 pf-order-sm-6 pf-order-sm-7 pf-order-sm-8 pf-order-sm-9 pf-order-sm-10 pf-order-sm-11 pf-order-sm-12 pf-order-md-1 pf-order-md-2 pf-order-md-3 pf-order-md-4 pf-order-md-5 pf-order-md-6 pf-order-md-7 pf-order-md-8 pf-order-md-9 pf-order-md-10 pf-order-md-11 pf-order-md-12 pf-order-lg-1 pf-order-lg-2 pf-order-lg-3 pf-order-lg-4 pf-order-lg-5 pf-order-lg-6 pf-order-lg-7 pf-order-lg-8 pf-order-lg-9 pf-order-lg-10 pf-order-lg-11 pf-order-lg-12 pf-order-xl-1 pf-order-xl-2 pf-order-xl-3 pf-order-xl-4 pf-order-xl-5 pf-order-xl-6 pf-order-xl-7 pf-order-xl-8 pf-order-xl-9 pf-order-xl-10 pf-order-xl-11 pf-order-xl-12 pf-order-xxl-1 pf-order-xxl-2 pf-order-xxl-3 pf-order-xxl-4 pf-order-xxl-5 pf-order-xxl-6 pf-order-xxl-7 pf-order-xxl-8 pf-order-xxl-9 pf-order-xxl-10 pf-order-xxl-11 pf-order-xxl-12
Row gutters
Sets --pf-gutter-x, --pf-gutter-y — 15 classes.
pf-g-0 pf-g-1 pf-g-2 pf-g-3 pf-g-4 pf-g-5 pf-g-6 pf-gx-0 pf-gx-2 pf-gx-4 pf-gx-6 pf-gy-0 pf-gy-2 pf-gy-4 pf-gy-6
Headers
Announcement bars, navigation, hero variants, page headers and breadcrumbs.
PolyFishCSS-Headers.css · 29 public classes
Position
| Class | Declares | Applies when |
|---|---|---|
pf-topbar | background, border-bottom, color, font-size | — |
pf-topbar__inner | display, flex-wrap, align-items, justify-content, gap… | — |
pf-topbar--accent | background, border-color, color | — |
Components
Sets position, top, z-index, background, -webkit-backdrop-filter… — 15 classes.
pf-nav pf-nav--static pf-nav--flush pf-nav__inner pf-nav__brand pf-nav__menu pf-nav__links pf-nav__actions pf-nav__checkbox pf-nav__burger pf-pagehead pf-pagehead__inner pf-pagehead__title pf-pagehead__lede pf-breadcrumb
Sizing
| Class | Declares | Applies when |
|---|---|---|
pf-hero | position, overflow, background, padding-block | — |
pf-hero__inner | display, gap | — |
pf-hero--center | justify-items, text-align | — |
pf-hero__lede | margin-inline | — |
pf-hero__eyebrow | display, align-items, gap, background, border… | — |
pf-hero__title | font-size, line-height, letter-spacing, max-width | — |
pf-hero__actions | display, flex-wrap, gap, margin-top | — |
pf-hero__meta | display, flex-wrap, gap, margin-top, color… | — |
pf-hero--split | grid-template-columns, gap, align-items | — |
pf-hero__media | border, border-radius, background, overflow, box-shadow | — |
pf-hero--photo | --pf-hero-image | — |
Space
Padding, margin, gap, grid tracks, flex sizing and placement, with four responsive breakpoints.
PolyFishCSS-Space.css · 545 public classes
Padding
Sets padding — 77 classes.
pf-p-0 pf-p-1 pf-p-2 pf-p-3 pf-p-4 pf-p-5 pf-p-6 pf-p-7 pf-p-8 pf-p-9 pf-p-px pf-px-0 pf-px-1 pf-px-2 pf-px-3 pf-px-4 pf-px-5 pf-px-6 pf-px-7 pf-px-8 pf-px-9 pf-px-px pf-py-0 pf-py-1 pf-py-2 pf-py-3 pf-py-4 pf-py-5 pf-py-6 pf-py-7 pf-py-8 pf-py-9 pf-py-px pf-pt-0 pf-pt-1 pf-pt-2 pf-pt-3 pf-pt-4 pf-pt-5 pf-pt-6 pf-pt-7 pf-pt-8 pf-pt-9 pf-pt-px pf-pe-0 pf-pe-1 pf-pe-2 pf-pe-3 pf-pe-4 pf-pe-5 pf-pe-6 pf-pe-7 pf-pe-8 pf-pe-9 pf-pe-px pf-pb-0 pf-pb-1 pf-pb-2 pf-pb-3 pf-pb-4 pf-pb-5 pf-pb-6 pf-pb-7 pf-pb-8 pf-pb-9 pf-pb-px pf-ps-0 pf-ps-1 pf-ps-2 pf-ps-3 pf-ps-4 pf-ps-5 pf-ps-6 pf-ps-7 pf-ps-8 pf-ps-9 pf-ps-px
Margin
Sets margin — 84 classes.
pf-m-0 pf-m-1 pf-m-2 pf-m-3 pf-m-4 pf-m-5 pf-m-6 pf-m-7 pf-m-8 pf-m-9 pf-m-auto pf-m-px pf-mx-0 pf-mx-1 pf-mx-2 pf-mx-3 pf-mx-4 pf-mx-5 pf-mx-6 pf-mx-7 pf-mx-8 pf-mx-9 pf-mx-auto pf-mx-px pf-my-0 pf-my-1 pf-my-2 pf-my-3 pf-my-4 pf-my-5 pf-my-6 pf-my-7 pf-my-8 pf-my-9 pf-my-auto pf-my-px pf-mt-0 pf-mt-1 pf-mt-2 pf-mt-3 pf-mt-4 pf-mt-5 pf-mt-6 pf-mt-7 pf-mt-8 pf-mt-9 pf-mt-auto pf-mt-px pf-me-0 pf-me-1 pf-me-2 pf-me-3 pf-me-4 pf-me-5 pf-me-6 pf-me-7 pf-me-8 pf-me-9 pf-me-auto pf-me-px pf-mb-0 pf-mb-1 pf-mb-2 pf-mb-3 pf-mb-4 pf-mb-5 pf-mb-6 pf-mb-7 pf-mb-8 pf-mb-9 pf-mb-auto pf-mb-px pf-ms-0 pf-ms-1 pf-ms-2 pf-ms-3 pf-ms-4 pf-ms-5 pf-ms-6 pf-ms-7 pf-ms-8 pf-ms-9 pf-ms-auto pf-ms-px
Gap
Sets gap — 35 classes.
pf-gap-0 pf-gap-1 pf-gap-2 pf-gap-3 pf-gap-4 pf-gap-5 pf-gap-6 pf-gap-7 pf-gap-8 pf-gap-9 pf-gap-px pf-gap-x-0 pf-gap-x-1 pf-gap-x-2 pf-gap-x-3 pf-gap-x-4 pf-gap-x-5 pf-gap-x-6 pf-gap-x-7 pf-gap-x-8 pf-gap-x-9 pf-gap-x-px pf-gap-y-0 pf-gap-y-1 pf-gap-y-2 pf-gap-y-3 pf-gap-y-4 pf-gap-y-5 pf-gap-y-6 pf-gap-y-7 pf-gap-y-8 pf-gap-y-9 pf-gap-y-px pf-gap-fluid pf-gap-fluid-lg
Grid tracks
| Class | Declares | Applies when |
|---|---|---|
pf-cols-1 | display, grid-template-columns | — |
pf-cols-2 | display, grid-template-columns | — |
pf-cols-3 | display, grid-template-columns | — |
pf-cols-4 | display, grid-template-columns | — |
pf-cols-5 | display, grid-template-columns | — |
pf-cols-6 | display, grid-template-columns | — |
pf-cols-12 | display, grid-template-columns | — |
pf-cols-auto | display, grid-template-columns | — |
pf-cols-sidebar | display, grid-template-columns | — |
Grid spans
| Class | Declares | Applies when |
|---|---|---|
pf-span-1 | grid-column | — |
pf-span-2 | grid-column | — |
pf-span-3 | grid-column | — |
pf-span-4 | grid-column | — |
pf-span-6 | grid-column | — |
pf-row-span-2 | grid-row | — |
Placement
| Class | Declares | Applies when |
|---|---|---|
pf-place-center | place-items | — |
pf-place-start | place-items | — |
pf-place-end | place-items | — |
pf-self-start | align-self | — |
pf-self-center | align-self | — |
pf-self-end | align-self | — |
pf-self-stretch | align-self | — |
pf-content-between | align-content | — |
pf-content-start | align-content | — |
Sizing
Sets width — 30 classes.
pf-w-0 pf-w-5 pf-w-10 pf-w-15 pf-w-20 pf-w-25 pf-w-30 pf-w-35 pf-w-40 pf-w-45 pf-w-50 pf-w-55 pf-w-60 pf-w-65 pf-w-70 pf-w-75 pf-w-80 pf-w-85 pf-w-90 pf-w-95 pf-w-100 pf-w-1-2 pf-w-1-3 pf-w-2-3 pf-w-1-4 pf-w-3-4 pf-w-1-5 pf-w-2-5 pf-w-3-5 pf-w-4-5
Flex sizing
| Class | Declares | Applies when |
|---|---|---|
pf-flex-1 | flex | — |
pf-flex-auto | flex | — |
pf-flex-initial | flex | — |
pf-flex-none | flex | — |
pf-grow-0 | flex-grow | — |
pf-grow-1 | flex-grow | — |
pf-shrink-1 | flex-shrink | — |
pf-basis-0 | flex-basis | — |
pf-basis-auto | flex-basis | — |
pf-basis-full | flex-basis | — |
pf-basis-half | flex-basis | — |
Responsive variants
Sets padding — 284 classes.
pf-sm-p-0 pf-sm-px-0 pf-sm-py-0 pf-sm-mt-0 pf-sm-mb-0 pf-sm-gap-0 pf-sm-p-1 pf-sm-px-1 pf-sm-py-1 pf-sm-mt-1 pf-sm-mb-1 pf-sm-gap-1 pf-sm-p-2 pf-sm-px-2 pf-sm-py-2 pf-sm-mt-2 pf-sm-mb-2 pf-sm-gap-2 pf-sm-p-3 pf-sm-px-3 pf-sm-py-3 pf-sm-mt-3 pf-sm-mb-3 pf-sm-gap-3 pf-sm-p-4 pf-sm-px-4 pf-sm-py-4 pf-sm-mt-4 pf-sm-mb-4 pf-sm-gap-4 pf-sm-p-5 pf-sm-px-5 pf-sm-py-5 pf-sm-mt-5 pf-sm-mb-5 pf-sm-gap-5 pf-sm-p-6 pf-sm-px-6 pf-sm-py-6 pf-sm-mt-6 pf-sm-mb-6 pf-sm-gap-6 pf-sm-p-7 pf-sm-px-7 pf-sm-py-7 pf-sm-mt-7 pf-sm-mb-7 pf-sm-gap-7 pf-sm-p-8 pf-sm-px-8 pf-sm-py-8 pf-sm-mt-8 pf-sm-mb-8 pf-sm-gap-8 pf-sm-p-9 pf-sm-px-9 pf-sm-py-9 pf-sm-mt-9 pf-sm-mb-9 pf-sm-gap-9 pf-sm-p-px pf-sm-px-px pf-sm-py-px pf-sm-mt-px pf-sm-mb-px pf-sm-gap-px pf-sm-cols-1 pf-sm-cols-2 pf-sm-cols-3 pf-sm-cols-4 pf-sm-cols-6 pf-md-p-0 pf-md-px-0 pf-md-py-0 pf-md-mt-0 pf-md-mb-0 pf-md-gap-0 pf-md-p-1 pf-md-px-1 pf-md-py-1 pf-md-mt-1 pf-md-mb-1 pf-md-gap-1 pf-md-p-2 pf-md-px-2 pf-md-py-2 pf-md-mt-2 pf-md-mb-2 pf-md-gap-2 pf-md-p-3 pf-md-px-3 pf-md-py-3 pf-md-mt-3 pf-md-mb-3 pf-md-gap-3 pf-md-p-4 pf-md-px-4 pf-md-py-4 pf-md-mt-4 pf-md-mb-4 pf-md-gap-4 pf-md-p-5 pf-md-px-5 pf-md-py-5 pf-md-mt-5 pf-md-mb-5 pf-md-gap-5 pf-md-p-6 pf-md-px-6 pf-md-py-6 pf-md-mt-6 pf-md-mb-6 pf-md-gap-6 pf-md-p-7 pf-md-px-7 pf-md-py-7 pf-md-mt-7 pf-md-mb-7 pf-md-gap-7 pf-md-p-8 pf-md-px-8 pf-md-py-8 pf-md-mt-8 pf-md-mb-8 pf-md-gap-8 pf-md-p-9 pf-md-px-9 pf-md-py-9 pf-md-mt-9 pf-md-mb-9 pf-md-gap-9 pf-md-p-px pf-md-px-px pf-md-py-px pf-md-mt-px pf-md-mb-px pf-md-gap-px pf-md-cols-1 pf-md-cols-2 pf-md-cols-3 pf-md-cols-4 pf-md-cols-6 pf-lg-p-0 pf-lg-px-0 pf-lg-py-0 pf-lg-mt-0 pf-lg-mb-0 pf-lg-gap-0 pf-lg-p-1 pf-lg-px-1 pf-lg-py-1 pf-lg-mt-1 pf-lg-mb-1 pf-lg-gap-1 pf-lg-p-2 pf-lg-px-2 pf-lg-py-2 pf-lg-mt-2 pf-lg-mb-2 pf-lg-gap-2 pf-lg-p-3 pf-lg-px-3 pf-lg-py-3 pf-lg-mt-3 pf-lg-mb-3 pf-lg-gap-3 pf-lg-p-4 pf-lg-px-4 pf-lg-py-4 pf-lg-mt-4 pf-lg-mb-4 pf-lg-gap-4 pf-lg-p-5 pf-lg-px-5 pf-lg-py-5 pf-lg-mt-5 pf-lg-mb-5 pf-lg-gap-5 pf-lg-p-6 pf-lg-px-6 pf-lg-py-6 pf-lg-mt-6 pf-lg-mb-6 pf-lg-gap-6 pf-lg-p-7 pf-lg-px-7 pf-lg-py-7 pf-lg-mt-7 pf-lg-mb-7 pf-lg-gap-7 pf-lg-p-8 pf-lg-px-8 pf-lg-py-8 pf-lg-mt-8 pf-lg-mb-8 pf-lg-gap-8 pf-lg-p-9 pf-lg-px-9 pf-lg-py-9 pf-lg-mt-9 pf-lg-mb-9 pf-lg-gap-9 pf-lg-p-px pf-lg-px-px pf-lg-py-px pf-lg-mt-px pf-lg-mb-px pf-lg-gap-px pf-lg-cols-1 pf-lg-cols-2 pf-lg-cols-3 pf-lg-cols-4 pf-lg-cols-6 pf-xl-p-0 pf-xl-px-0 pf-xl-py-0 pf-xl-mt-0 pf-xl-mb-0 pf-xl-gap-0 pf-xl-p-1 pf-xl-px-1 pf-xl-py-1 pf-xl-mt-1 pf-xl-mb-1 pf-xl-gap-1 pf-xl-p-2 pf-xl-px-2 pf-xl-py-2 pf-xl-mt-2 pf-xl-mb-2 pf-xl-gap-2 pf-xl-p-3 pf-xl-px-3 pf-xl-py-3 pf-xl-mt-3 pf-xl-mb-3 pf-xl-gap-3 pf-xl-p-4 pf-xl-px-4 pf-xl-py-4 pf-xl-mt-4 pf-xl-mb-4 pf-xl-gap-4 pf-xl-p-5 pf-xl-px-5 pf-xl-py-5 pf-xl-mt-5 pf-xl-mb-5 pf-xl-gap-5 pf-xl-p-6 pf-xl-px-6 pf-xl-py-6 pf-xl-mt-6 pf-xl-mb-6 pf-xl-gap-6 pf-xl-p-7 pf-xl-px-7 pf-xl-py-7 pf-xl-mt-7 pf-xl-mb-7 pf-xl-gap-7 pf-xl-p-8 pf-xl-px-8 pf-xl-py-8 pf-xl-mt-8 pf-xl-mb-8 pf-xl-gap-8 pf-xl-p-9 pf-xl-px-9 pf-xl-py-9 pf-xl-mt-9 pf-xl-mb-9 pf-xl-gap-9 pf-xl-p-px pf-xl-px-px pf-xl-py-px pf-xl-mt-px pf-xl-mb-px pf-xl-gap-px pf-xl-cols-1 pf-xl-cols-2 pf-xl-cols-3 pf-xl-cols-4 pf-xl-cols-6
Utilities
Display, sizing, position, typography, colour and visibility helpers.
PolyFishCSS-Utilities.css · 218 public classes
Layout helpers
Sets display — 39 classes.
pf-block pf-inline-block pf-flex pf-inline-flex pf-grid-d pf-none pf-nowrap pf-items-start pf-items-center pf-items-end pf-justify-start pf-justify-center pf-justify-between pf-justify-end pf-sticky pf-sticky-top pf-sticky-nav pf-overflow-hidden pf-overflow-auto pf-overflow-x-auto pf-overflow-visible pf-object-cover pf-object-contain pf-aspect-square pf-aspect-video pf-cursor-pointer pf-select-none pf-pointer-none pf-divide-y pf-divide-x pf-vr pf-container-q pf-cq-row pf-cq-2 pf-cq-side pf-cq-show pf-cq-hide pf-cq-3 pf-cq-4
Sizing
Sets flex-wrap — 25 classes.
pf-wrap pf-weight-500 pf-weight-600 pf-weight-700 pf-w-full pf-w-auto pf-w-half pf-w-min pf-w-max pf-w-fit pf-max-w-none pf-max-w-xs pf-max-w-sm pf-max-w-md pf-max-w-lg pf-max-w-xl pf-h-full pf-h-screen pf-min-h-0 pf-min-w-0 pf-hover-lift pf-hover-border pf-hover-bright pf-hide-sm pf-hide-lg
Flex sizing
| Class | Declares | Applies when |
|---|---|---|
pf-flex-col | flex-direction | — |
pf-flex-row | flex-direction | — |
pf-shrink-0 | flex | — |
Components
| Class | Declares | Applies when |
|---|---|---|
pf-grow | flex | — |
pf-nav | display | |
pf-footer | display | |
pf-cta | display |
Typography
Sets text-align — 25 classes.
pf-text-start pf-text-center pf-text-end pf-text-xs pf-text-sm pf-text-lg pf-text-xl pf-text-2xl pf-text-3xl pf-text-4xl pf-text-5xl pf-display pf-mono pf-balance pf-measure pf-measure-none pf-uppercase pf-capitalize pf-normal-case pf-underline pf-no-underline pf-italic pf-tabular pf-leading-tight pf-leading-snug pf-leading-normal pf-truncate pf-clamp-2 pf-clamp-3
Colour
| Class | Declares | Applies when |
|---|---|---|
pf-fg-accent | color | — |
pf-fg-accent-2 | color | — |
pf-fg-paper | color | — |
pf-fg-muted | color | — |
pf-bg-deep | background | — |
pf-bg-base | background | — |
pf-bg-surface | background | — |
pf-bg-accent-wash | background | — |
pf-bg-accent-2-wash | background | — |
pf-bg-mesh | background-image | — |
Border and depth
Sets border-radius — 18 classes.
pf-round pf-round-lg pf-round-pill pf-bordered pf-bordered-accent pf-lift pf-border-0 pf-border-t pf-border-b pf-round-none pf-round-sm pf-circle pf-opacity-50 pf-opacity-75 pf-shadow-sm pf-shadow pf-shadow-lg pf-shadow-none
Position
Sets position — 15 classes.
pf-relative pf-absolute pf-fixed pf-static pf-inset-0 pf-top-0 pf-right-0 pf-bottom-0 pf-left-0 pf-z-0 pf-z-10 pf-z-20 pf-z-40 pf-z-60 pf-topbar
Rings
| Class | Declares | Applies when |
|---|---|---|
pf-ring | box-shadow | — |
Transitions
| Class | Declares | Applies when |
|---|---|---|
pf-transition | transition | — |
pf-transition-colors | transition | — |
Responsive variants
Sets display — 76 classes.
pf-sm-hidden pf-sm-block pf-sm-flex pf-sm-grid-d pf-sm-inline-flex pf-sm-flex-col pf-sm-flex-row pf-sm-text-left pf-sm-text-center pf-sm-text-right pf-sm-items-center pf-sm-items-start pf-sm-justify-between pf-sm-justify-center pf-sm-w-full pf-sm-w-auto pf-sm-order-first pf-sm-order-last pf-sm-span-full pf-md-hidden pf-md-block pf-md-flex pf-md-grid-d pf-md-inline-flex pf-md-flex-col pf-md-flex-row pf-md-text-left pf-md-text-center pf-md-text-right pf-md-items-center pf-md-items-start pf-md-justify-between pf-md-justify-center pf-md-w-full pf-md-w-auto pf-md-order-first pf-md-order-last pf-md-span-full pf-lg-hidden pf-lg-block pf-lg-flex pf-lg-grid-d pf-lg-inline-flex pf-lg-flex-col pf-lg-flex-row pf-lg-text-left pf-lg-text-center pf-lg-text-right pf-lg-items-center pf-lg-items-start pf-lg-justify-between pf-lg-justify-center pf-lg-w-full pf-lg-w-auto pf-lg-order-first pf-lg-order-last pf-lg-span-full pf-xl-hidden pf-xl-block pf-xl-flex pf-xl-grid-d pf-xl-inline-flex pf-xl-flex-col pf-xl-flex-row pf-xl-text-left pf-xl-text-center pf-xl-text-right pf-xl-items-center pf-xl-items-start pf-xl-justify-between pf-xl-justify-center pf-xl-w-full pf-xl-w-auto pf-xl-order-first pf-xl-order-last pf-xl-span-full