Customize with Less

Prefer Less over Sass? boodoo ships a fully modular Less architecture in the less/ folder mirroring the Sass build, covering design tokens, the mobile-first grid, core and advanced components, forms, and utilities.

The Less build exposes the exact same public API as the Sass build — it declares CSS custom properties on :root, supports dark mode theme inversion, and organizes styles into modular partials (_variables.less, _root.less, _reboot.less, _grid.less, forms/*, components/*, and _utilities.less).

Usage

Import the full framework bundle:

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

Or import individual modular subpaths or partials for leaner builds:

// Standalone subpath builds
@import "node_modules/boodoo/less/boodoo-grid";
@import "node_modules/boodoo/less/boodoo-reboot";
@import "node_modules/boodoo/less/boodoo-utilities";
@import "node_modules/boodoo/less/boodoo-animations";

// Or cherry-pick specific components
@import "node_modules/boodoo/less/_variables";
@import "node_modules/boodoo/less/_root";
@import "node_modules/boodoo/less/components/_modal";
@import "node_modules/boodoo/less/components/_buttons";
@import "node_modules/boodoo/less/forms/_control";

Compile your Less 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 prefer precompiled CSS.

Variables & Theming

Design tokens are defined in less/_variables.less and bound to CSS custom properties in less/_root.less. Override them in Less or at runtime in CSS:

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

Full Modular Parity. The Less source features a 1:1 modular architecture with Sass, organizing 50+ components, forms, and layout utilities into dedicated partials for tree-shaking and custom pipeline integration.

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>