Skip to documentation
Boobstrap v0.1.4
Documentation

Look good.
Ship fast.

Boobstrap is a lightweight, class-based CSS framework with responsive layout primitives, polished components, practical utilities, and themeable design tokens.

Download starter Open playground
148 classes 79 tokens 0 JavaScript dependencies
Get started

Installation

Install the same npm registry package with your preferred package manager, then import the compiled stylesheet once at your application entry point.

npm · Terminal
npm install @boobstrap/boobstrap
JavaScript
import "@boobstrap/boobstrap/dist/boobstrap.css";

Use from a CDN

For a plain HTML project, load the version-pinned stylesheet directly from jsDelivr:

HTML · jsDelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@boobstrap/boobstrap@0.1.4/dist/boobstrap.css" />

To self-host instead, copy dist/boobstrap.css from the installed package into your assets.

Prefix guarantee

Every public framework class starts with bs-. Boobstrap does apply a small element reset and base typography, but component and utility styles stay namespaced.

Start shipping

Starter template

Download a minimal Vite project that imports @boobstrap/boobstrap from npm. It includes a responsive landing page, theme-token overrides, components, a labeled form, dependency-free inline SVG icons, and a production validation check.

Ready for npm, pnpm, Yarn, or Bun

A real project, not just a snippet

Install, run the Vite dev server, customize the semantic tokens, then validate the production bundle with one command.

Download ZIP Browse source Try it first
index.html src/main.js src/styles.css scripts/validate.mjs package.json
Terminal
npm install
npm run dev
npm run validate
Foundations

Theming

Dark mode is the default. Set data-bs-theme="light" on any ancestor to switch that subtree to the built-in light palette. Theme attributes can live on <html>, a page shell, or an individual preview.

Dark

Night by default

Deep plum surfaces with warm pink accents.

Light

Bright when needed

The same semantic tokens, remapped for light surfaces.

HTML
<html data-bs-theme="light">

Customize semantic tokens

Override variables after importing Boobstrap. Components consume semantic tokens such as --bs-color-primary, so a small override updates the whole system.

CSS
:root {
  --bs-color-primary: #8b5cf6;
  --bs-color-primary-hover: #a78bfa;
  --bs-radius-md: 0.5rem;
}
Foundations

Typography

Headings and body copy receive sensible defaults. Use .bs-display for oversized hero text and .bs-lead for introductory copy.

Boobstrap

Heading one

Heading two

Heading three

Lead copy introduces a section with a larger, muted treatment.

Body copy inherits the framework text color and a comfortable 1.6 line height.

HTML
<h1 class="bs-display bs-text-gradient">Build boldly.</h1>
<p class="bs-lead">Thoughtful defaults, ready to ship.</p>
Foundations

Layout & grid

.bs-container centers content with a fluid gutter and a 90rem ceiling. Add a size modifier for narrower content. .bs-section provides fluid vertical rhythm.

ClassMaximum width
.bs-container--bs-container-2xl · 90rem
.bs-container-sm40rem
.bs-container-md48rem
.bs-container-lg64rem
.bs-container-xl76rem

12-column grid

Use .bs-grid or its alias .bs-row, then assign column spans. Unprefixed columns work at every width; md begins at 48rem and lg at 64rem.

12 / md 6 / lg 4
12 / md 6 / lg 4
12 / lg 4
HTML
<div class="bs-grid bs-gap-4">
  <div class="bs-col-12 bs-col-md-6 bs-col-lg-4">...</div>
  <div class="bs-col-12 bs-col-md-6 bs-col-lg-8">...</div>
</div>
Foundations

Responsive layout composition

Start every region at 12 columns, then opt into wider arrangements at md and lg. The markup stays in a useful reading order at every width.

Featured

A wide story at large screens

This region spans the full row on mobile and eight columns from the large breakpoint.

Supporting detail

Two equal cards from the medium breakpoint.

Another detail

Source order remains the mobile reading order.

HTML · Complete example
<section class="bs-container bs-section" aria-labelledby="features-title">
  <h2 id="features-title">Features</h2>
  <div class="bs-grid bs-gap-4">
    <article class="bs-card bs-col-12 bs-col-lg-8">…</article>
    <aside class="bs-card bs-col-12 bs-col-md-6 bs-col-lg-4">…</aside>
  </div>
</section>

Classes: .bs-grid creates 12 tracks; column utilities change spans at the mobile-first breakpoints.

Accessibility: arrange the DOM in a logical small-screen reading order. CSS columns should change presentation, never meaning.

Components

Buttons

Start with .bs-btn, add one visual variant, and optionally add a size or icon modifier. The same classes work on buttons and links.

HTML · Complete example
<button class="bs-btn bs-btn-primary" type="button">Save changes</button>
<a class="bs-btn bs-btn-secondary" href="/docs.html">Read docs</a>
<button class="bs-btn bs-btn-secondary bs-btn-icon" type="button" aria-label="Favorite">…</button>

Classes: .bs-btn supplies structure; pair it with one variant. .bs-btn-icon makes the control square.

Accessibility: use buttons for actions and links for navigation. Icon-only buttons need an aria-label, while their decorative SVG uses aria-hidden="true".

Components

Badges

Badges are compact status and metadata labels. Use the base class alone for a neutral badge or add the primary modifier.

Draft New release Loved
HTML
<span class="bs-badge bs-badge-primary">New release</span>
Components

Cards

Cards establish a contained surface. Structure content with the body, title, and text classes; add .bs-card-raised when the card needs more visual elevation.

Standard

A thoughtful default

Contained content with a subtle border and surface treatment.

Explore the API →
Raised

Extra elevation

The raised modifier adds a stronger shadow without changing structure.

HTML · Complete example
<article class="bs-card bs-card-raised" aria-labelledby="launch-card-title">
  <div class="bs-card-body">
    <h3 class="bs-card-title" id="launch-card-title">Launch ready</h3>
    <p class="bs-card-text">Supporting copy.</p>
    <a class="bs-btn bs-btn-primary bs-btn-sm" href="/details">View details</a>
  </div>
</article>

Classes: .bs-card creates the surface, .bs-card-body provides inset spacing, and .bs-card-raised adds elevation.

Accessibility: use an article only when the card stands on its own. Give repeated cards headings, and do not turn the entire surface into a link when it contains other controls.

Components

Alerts

Alerts communicate inline feedback. Pair .bs-alert with a state modifier and use .bs-alert-title for a clear lead-in.

Heads upThis preview is ready for your custom theme.
SavedYour changes were published successfully.
Neutral noteThe base alert works without a state modifier.
HTML · Complete example
<div class="bs-alert bs-alert-success" role="status">
  <svg class="bs-icon bs-icon-lg" aria-hidden="true">…</svg>
  <span><strong class="bs-alert-title">Saved</strong> Your changes were published.</span>
</div>

Classes: start with .bs-alert, then add a state modifier; .bs-alert-title creates a clear text lead-in.

Accessibility: apply role="status" only when success feedback appears dynamically. Use role="alert" sparingly for urgent errors, and never communicate state by color alone.

Components

Forms

Boobstrap styles native controls without replacing their semantics. Keep labels associated with controls and use .bs-form-group to establish consistent spacing.

HTML · Complete example
<form action="/contact" method="post">
  <div class="bs-form-group">
    <label class="bs-label" for="email">Email</label>
    <input class="bs-input" id="email" name="email" type="email" required />
  </div>
  <button class="bs-btn bs-btn-primary bs-mt-4" type="submit">Subscribe</button>
</form>

Classes: .bs-form-group spaces a label and control; use the matching input, select, or textarea class on the native control.

Accessibility: keep a visible label associated through matching for and id values. Use the correct input type, autocomplete token, name, and required state.

Components

Code windows

The code-window family provides a complete presentation shell and optional syntax-color helpers. It does not perform syntax highlighting; apply the token classes in server-rendered or hand-authored markup.

example.html
<!-- Build boldly -->
<button class="bs-btn bs-btn-primary">
  Ship it
</button>
const ready = true;
Composition: use .bs-code-window as the shell, .bs-code-toolbar for chrome, .bs-code-dots and three .bs-code-dot elements for the controls, and .bs-code-body on the <pre>.
Utilities

Icons

Boobstrap keeps icons library-agnostic. Add .bs-icon to any inline SVG to normalize its size, alignment, and current-color stroke; use .bs-icon-sm, .bs-icon-lg, or .bs-icon-xl for scale.

HTML · inline SVG
<svg class="bs-icon bs-icon-lg" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 3v18m9-9H3" />
</svg>

If you want a ready-made icon set, install one separately. For example, Lucide can replace matching SVG elements at runtime while Boobstrap remains CSS-only:

Shell · JavaScript
npm install lucide

import { createIcons, icons } from "lucide";
createIcons({ icons });
Accessibility: decorative icons should use aria-hidden="true"; meaningful icons need an accessible label or visible text.
Reference

Utilities

Utilities are single-purpose helpers designed for composition. Responsive display helpers use the md breakpoint at 48rem.

Display & flex

.bs-block, .bs-inline-block, .bs-flex, .bs-inline-flex, .bs-hidden, .bs-stack, .bs-flex-wrap, .bs-flex-1.

Alignment

.bs-items-start, .bs-items-center, .bs-items-end, .bs-justify-start, .bs-justify-center, .bs-justify-between, .bs-justify-end, .bs-self-center.

Sizing & position

.bs-w-full, .bs-h-full, .bs-relative, .bs-overflow-hidden.

Responsive display

.bs-md-flex, .bs-md-block, and .bs-md-hidden apply from 48rem upward.

Gap

.bs-gap-{n} supports 1, 2, 3, 4, 5, 6, 8, 10, 12 and maps directly to spacing tokens.

Margin

.bs-m-0, .bs-mx-auto, .bs-mt-{n} for 2, 3, 4, 6, 8, 10, and .bs-mb-{n} for 0, 2, 4, 6.

Padding

.bs-p-{n} for 0, 2, 3, 4, 5, 6, 8; .bs-px-{n} for 4, 6; .bs-py-{n} for 2, 4, 6, 8.

Text

Sizes .bs-text-xs through .bs-text-3xl; alignment, semantic colors, gradient text, font weights, italic, link decoration, and screen-reader-only helpers.

Spacing scale

Reference

Design tokens

All framework decisions are exposed as CSS custom properties. Color tokens may be remapped by a theme; typography, spacing, radius, elevation, container, and motion tokens are shared.

Reference

All classes

This index is generated from the exact compiled stylesheet used by this site. It includes every public bs- selector and its core declaration.

Guidance

Accessibility

Boobstrap supplies visible focus treatment, reduced-motion safeguards, accessible color foundations, and .bs-sr-only. Your markup still owns semantics and behavior.

  • Use native elements first: <button> for actions and <a> for navigation.
  • Associate every form control with a visible <label>, or use .bs-sr-only when the visual design cannot accommodate one.
  • Add aria-label to icon-only buttons.
  • Use role="status" for non-urgent dynamic alerts and role="alert" for urgent messages.
  • Do not rely on color alone to communicate state; pair it with text or an icon.
  • When overriding tokens, re-check text and focus-ring contrast in both themes.
Motion preference built in

The base reset reduces animation and transition durations when the user enables prefers-reduced-motion: reduce.