
Why use it
npm or CDN. Class-based or classless. Dark is a build, not a theme script.
Style real elements. Pages without a class on every heading and form.
Point at bullframe-classless.css for plain HTML. No .bf-* classes in that build.
Always-dark builds, or system-default builds wired to prefers-color-scheme.
When to use
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.
Docs, blogs, landings, help centers, and forms.
Reset, type, forms, layout. npm or CDN.
Class-based (.bf-*) or classless. Utilities are optional.
Dense app shells, data grids, or a JS component library.
Examples
Live HTML on the published builds.
Classless article with sidebar TOC.
bullframe-classless.min.css
Full-viewport landing, dark build.
bullframe-dark.min.css
Three plans and a compare table.
bullframe.min.css
Photo grid with filters and captions.
bullframe.min.css
Centered auth form, light build.
bullframe.min.css
Default build plus a short custom.css.
bullframe.min.css + custom.css
Install
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">Seven builds
Markup mode and theme are in the filename. Same tokens in every build.
| File | Use when |
|---|---|
bullframe.css | Class-based · light |
bullframe-dark.css | Class-based · always dark |
bullframe-system-default.css | Class-based · OS theme |
bullframe-classless.css | Classless · light |
bullframe-classless-dark.css | Classless · always dark |
bullframe-classless-system-default.css | Classless · OS theme |
bullframe-utilities.css | Utilities only |
Specs
PostCSS builds to plain CSS. No Sass. No JS runtime.
Focus-visible, reduced-motion, WCAG AA on links and primary buttons.
Class-based + classless × light / dark / system, plus utilities.
Default build. One file for reset, type, forms, layout.