Get started

Custom CSS Compiler

Generate optimized, tree-shaken, customized Boobstrap CSS bundles with token overrides, palette cherry-picking, custom breakpoints, and static inlining.

CLI & APITree-shakingv0.7.0 current

Get started

Custom compiler overview

Boobstrap provides a programmatic Node.js API (@boobstrap/boobstrap/compiler) and an executable CLI tool (npx boobstrap build) to produce custom stylesheets tailored specifically to your design requirements.

CLI Usage

Run the build command to generate a customized stylesheet directly:

Terminal · CLI build

# Build minimal bundle with only button and card components
npx boobstrap build -c button,card -p violet -o src/boobstrap-custom.css

# Build full bundle with minification and static token inlining
npx boobstrap build --minify --static -o dist/custom.min.css

Configuration file

Place a boobstrap.config.json (or .mjs / .ts) in your project root. Use the official JSON Schema or TypeScript helper for instant IDE autocompletion:

JSON · boobstrap.config.json

{
  "$schema": "./node_modules/@boobstrap/boobstrap/schema.json",
  "palettes": ["violet", "rose"],
  "radii": ["md"],
  "components": ["button", "card", "dialog", "navbar", "form"],
  "tokens": {
    "--bs-color-primary": "#8b5cf6",
    "--bs-radius-md": "0.5rem"
  },
  "minify": true,
  "output": "src/styles/boobstrap.css"
}

Programmatic API

Import compileCss in build scripts, Vite plugins, or custom server setups:

JavaScript · Programmatic compiler

import { compileCss } from "@boobstrap/boobstrap/compiler";

const { css, minified, gzipBytes, classCount } = await compileCss({
  palettes: ["violet"],
  components: ["button", "card", "dialog"],
  tokens: {
    "--bs-color-primary": "#7c3aed"
  },
  minify: true
});

console.log(`Generated ${classCount} classes (${gzipBytes} bytes gzipped)`);

Developer tooling

Boobstrap includes built-in commands for project setup and editor integration:

Terminal · Tooling commands

# Interactive project initializer
npx boobstrap init

# Generate VS Code and Cursor HTML/CSS custom data
npx boobstrap custom-data