Skip to content

Bullframe CSSSemantic by default. Any stack.

Bullframe CSS

Why use it

Semantic by default. Any stack.

npm or CDN. Class-based or classless. Dark is a build, not a theme script.

  • Semantic HTML

    Style real elements. Pages without a class on every heading and form.

  • Classless build

    Point at bullframe-classless.css for plain HTML. No .bf-* classes in that build.

  • Dark without JS

    Always-dark builds, or system-default builds wired to prefers-color-scheme.

When to use

Use Bullframe for pages, not apps.

Good for docs, blogs, landings, help centers, and forms. If you need a dashboard shell, data grid, or design-system components, use a UI kit instead.

  • Good fit

    Docs, blogs, landings, help centers, and forms.

  • One CSS file

    Reset, type, forms, layout. npm or CDN.

  • Two markup modes

    Class-based (.bf-*) or classless. Utilities are optional.

  • Skip when

    Dense app shells, data grids, or a JS component library.

Examples

Example pages

Live HTML on the published builds.

Install

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">

Seven builds

Seven CSS builds

Markup mode and theme are in the filename. Same tokens in every build.

FileUse when
bullframe.cssClass-based · light
bullframe-dark.cssClass-based · always dark
bullframe-system-default.cssClass-based · OS theme
bullframe-classless.cssClassless · light
bullframe-classless-dark.cssClassless · always dark
bullframe-classless-system-default.cssClassless · OS theme
bullframe-utilities.cssUtilities only

Specs

Package defaults

0
Runtime deps

PostCSS builds to plain CSS. No Sass. No JS runtime.

AA
Defaults

Focus-visible, reduced-motion, WCAG AA on links and primary buttons.

7
Builds

Class-based + classless × light / dark / system, plus utilities.

~8
kB gzip

Default build. One file for reset, type, forms, layout.

Next steps

Bullframe CSSCopyright © 2026 Marco Pontili