Getting started

Install Bullframe, pick a markup mode and a theme, link one CSS file. Default build is ~8 KB gzipped. No runtime JS.

Markup modes

Two ways to write HTML. Element-level a11y (focus rings, ARIA cursors, contrast preferences) ships in both. .bf-* helpers are class-based and utilities only.

Class-based

Use .bf-* for layout, buttons, forms, skip links, and other helpers.

<link rel="stylesheet" href="…/bullframe.min.css" />

<div class="bf-container">
  <h1 class="bf-t-center">Hello</h1>
  <button class="bf-btn bf-btn--primary">Go</button>
</div>

Classless

Element selectors only. No .bf-* classes in the stylesheet.

<link rel="stylesheet" href="…/bullframe-classless.min.css" />

<h1>Hello</h1>
<p>Just semantic HTML.</p>
<form>…</form>

Themes

Each markup mode has three theme files:

Theme	Suffix	Behavior
Light	(none)	Always light
Dark	-dark	Always dark
System	-system-default	prefers-color-scheme

Examples: bullframe-dark.css, bullframe-classless-system-default.css.

Utilities companion

bullframe-utilities.css is not a markup mode. Add it when you already have a reset and only need .bf-* helpers.

<link rel="stylesheet" href="…/bullframe-utilities.min.css" />

<div class="bf-m-t-3 bf-t-center">
  <h1 class="bf-t-weight-700">Hello</h1>
</div>

CDN

Quick drop-in (latest published package entry):

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

Recommended for production: pin an exact version, point at a published .min.css file, and add Subresource Integrity plus crossorigin. Package-root / unversioned CDN URLs are not SRI-safe.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@6.4.2/dist/css/bullframe.min.css" integrity="sha384-a95D+zT/9Sb4nr2SxVPlUwJ0Yq8IJXsOtthfFQ5BWB2Hk3qBXlzOkwTuiIUyL5n0" crossorigin="anonymous" />

Swap the filename for another build (bullframe-classless.min.css, bullframe-dark.min.css, …). Hashes for all seven builds: sri.json.

npm

Subpath exports for every variant:

npm install bullframe.css

@import 'bullframe.css';
@import 'bullframe.css/dark';
@import 'bullframe.css/system';
@import 'bullframe.css/classless';
@import 'bullframe.css/classless/dark';
@import 'bullframe.css/classless/system';
@import 'bullframe.css/utilities';

import 'bullframe.css';
import 'bullframe.css/dark';
import 'bullframe.css/system';
import 'bullframe.css/classless';
import 'bullframe.css/classless/dark';
import 'bullframe.css/classless/system';
import 'bullframe.css/utilities';

Download

Self-host from the v6.4.0 archive. Source maps ship beside the minified CSS in dist/css/.

Starter HTML

Class-based

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Bullframe CSS Starter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@6.4.2/dist/css/bullframe.min.css" integrity="sha384-a95D+zT/9Sb4nr2SxVPlUwJ0Yq8IJXsOtthfFQ5BWB2Hk3qBXlzOkwTuiIUyL5n0" crossorigin="anonymous" />
  </head>
  <body>
    <a class="bf-skip-link" href="#main">Skip to content</a>
    <main id="main" class="bf-container">
      <h1>Hello, Bullframe CSS!</h1>
      <p>Class-based starter.</p>
    </main>
  </body>
</html>

Classless

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Bullframe CSS Classless Starter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css@6.4.2/dist/css/bullframe-classless.min.css" integrity="sha384-Ticlxp2ESFCQeFf0Go9TWz11IagrPbxkZmiVkJ/y0ZmzeRGj0n3QVNBdWkEl5Pnx" crossorigin="anonymous" />
    <style>
      body {
        margin-left: auto;
        margin-right: auto;
        padding: 1.5rem;
        max-width: 80rem;
      }
    </style>
  </head>
  <body>
    <main id="main">
      <h1>Hello, Bullframe CSS!</h1>
      <p>Semantic HTML only; no utility classes.</p>
    </main>
  </body>
</html>

Builds

Seven builds. Default build is about 8 KB gzipped. No JavaScript runtime.

File	Use when
bullframe.css	Class-based, light
bullframe-dark.css	Class-based, always dark
bullframe-system-default.css	Class-based, prefers-color-scheme
bullframe-classless.css	Classless, light (elements only)
bullframe-classless-dark.css	Classless, always dark
bullframe-classless-system-default.css	Classless, prefers-color-scheme
bullframe-utilities.css	.bf-* helpers only, no base styles

Upgrading from v5: Migration.

Next

• CSS Variables
• Utilities
• Examples
• Kitchen sink