Barefoot — no boots, no baggage

Quick start

CSS — import what you need

@import "barefoot";                            /* base   */
@import "barefoot/components/dialog.css";   /* extras */

HTML — just write plain elements

<button>Save</button>
<input type="email" placeholder="you@example.com">

Plain HTML is styled by Barefoot. No classes, no div soup, no ARIA to add.

Why Barefoot

~10KB or bust

Per-component entry points + a size budget enforced in CI. You only pay for what you import.

Theming by default

Every visual is a --bf-* variable. Re-skin in six lines — no Sass, no recompile.

JS-free

Dialogs, dropdowns, tabs, tooltips, carousels from native elements and the Popover API.

Accessible out of the box

Native semantics, focus traps, Esc-to-close — verified by an axe-core CI suite.

No Bootstrap look

Neutral by default. Ink on paper, thin borders, no shadows. The design is yours.

Modern CSS, fully

Cascade layers, container queries, light-dark(), view transitions. No transpiling.

Theming is just variables

Color tokens are light-dark() pairs, so dark mode follows the OS for free. data-bf-theme flips the palette — try it:

Theme:

:root {
  --bf-primary: #2563eb;   /* change the accent, everything follows */
  --bf-radius: 0.5rem;
  --bf-font: "Inter", system-ui, sans-serif;
}

See docs/theming.md for the full token reference, or follow docs/theming-tutorial.md to build your first theme step by step.

Tabs (opt-in, ~2.7KB)

The WAI-ARIA tabs pattern when you need arrow-key navigation. Try ←/→.

Tab one panel.

Tab two panel.

Tab three panel.

<script type="module">
  import "barefoot/js/barefoot.js";
</script>

Opt-in JavaScript modules

Zero-dependency ES modules in `dist/js/`
Module	Adds
`tabs.js`	WAI-ARIA tabs: roving tabindex, arrow keys, Home/End
`details-close.js`	Reliable Esc-close for `details[data-menu]` — deprecated 3.2
`details-tabindex.js`	WebKit tab-order fix for open `<details>` panels — removal candidate 4.0
`popover-menu.js`	Arrow-key nav + focus restore for popover menus
`popover-anchor.js`	Closes anchored popovers whose trigger is off-screen — removal candidate 4.0
`carousel.js`	Carousel autoplay + prev/next controls
`alert-dismiss.js`	Dismisses `[data-alert]` notices on click
`barefoot.js`	All seven in one import

See docs/javascript.md for markup and behavior.

Barefoot styles native elements — <button>, <dialog>, <details>, <th> — which ship focus traps, Esc-to-close, and semantics for free. The conformance demo labels every component with its WCAG level and walks each through with nothing but a keyboard.

Guaranteed: 100% keyboard navigable, visible focus rings, AA contrast, reduced-motion respected. Verified by axe-core in CI on every push.

No boots, no baggage.