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;
}

Example