Customize with Less

Prefer Less over Sass? boodoo ships a maintained Less build in the less/ folder covering the design tokens, mobile-first grid, core components, and utilities.

The Less build exposes the same public API as the Sass build — it declares the CSS custom properties (design tokens) on :root, then provides the grid, typography, buttons, cards, forms, and a core component set. You can import it and extend it with your own Less.

Usage

@import "node_modules/boodoo/less/boodoo";

Or compile it directly with the Less CLI:

lessc less/boodoo.less css/boodoo.css

The compiled output is also available prebuilt as dist/css/boodoo.less.css if you just want the CSS.

Variables

At the top of less/boodoo.less you'll find the design tokens as CSS custom properties. Override any of them to retheme the framework:

:root {
  --boodoo-primary: #7C3AED;
  --boodoo-border-radius: 0.375rem;
}

Sass is the primary source. For the full, every-component-feature set (all CSS Grid utilities, Material elevation, extended components), use the Sass build or the precompiled dist/css. The Less build is intentionally a well-rounded subset.

Example

Pill

<div class="d-flex flex-wrap gap-3 align-items-center">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-outline-primary">Outline</button>
  <span class="badge badge-pill">Pill</span>
  <span class="spinner-border text-primary spinner-border-sm"></span>
</div>