Bullframe CSS

Semantic by default. Any stack.

---

One-stylesheet CSS framework for plain HTML: no build step, no JavaScript. Typography, forms, tables, buttons, and layout out of the box.

Light or dark. Built for pages and forms: landings, docs, help centers, and marketing microsites.

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

Check the docs →

Features

• Plain HTML looks finished before you write a class
• Classless when you want clean markup; classes when you need layout control
• Light and dark out of the box, no theme script
• One stylesheet, about 8 kB gzipped: type, forms, tables, buttons, layout
• Restyle the whole page by changing a few colour tokens
• Accessibility built in: clear focus, reduced motion respect, WCAG AA defaults
• Works with any stack: drop it on a landing, docs site, or help center
• npm or CDN; nothing to compile to use it
• Agent skills for coding agents

Examples

Ready to copy: landings, blogs, forms, docs. Plain HTML, one stylesheet.

Browse all examples →

Install

npm install bullframe.css

import 'bullframe.css';

Install docs →

CDN

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

CDN docs →

Agent skills

Markdown skills for Claude, Cursor, and Codex. No server. No API key.

npx bullframe.css skills install

Agent skills docs →

Builds

See all 7 variants

Seven files in dist/css/, each with a minified twin and a source map. Pick one; do not combine them, except utilities on top of another build.

Build	npm subpath	Use when
bullframe.css	bullframe.css	Class-based, light
bullframe-dark.css	bullframe.css/dark	Class-based, always dark
bullframe-system-default.css	bullframe.css/system	Class-based, prefers-color-scheme
bullframe-classless.css	bullframe.css/classless	Classless, light
bullframe-classless-dark.css	bullframe.css/classless/dark	Classless, always dark
bullframe-classless-system-default.css	bullframe.css/classless/system	Classless, prefers-color-scheme
bullframe-utilities.css	bullframe.css/utilities	.bf-* helpers only, no base styles

Classless styles HTML tags only (no .bf-* classes). Class-based adds .bf-* grid, spacing, and helpers on top.

Documentation

Topic
Docs	Home
Getting started	Install and pick a build
Examples	Page templates
Kitchen sink	Every element in one place
Variables	--bf-* tokens
Components	Cards, modals, navigation, buttons
Theming	Colours and dark mode
API reference	Full token and class list
Agent skills	Skills for coding agents
Changelog	Release notes

Contributing

See CONTRIBUTING.md.

Bugs → issues.

License

MIT

Author

Marco Pontili