Spacing

Assign responsive-friendly margin or padding values to an element or a subset of its sides with simple classes, based on a 5-step spacing scale.

Notation

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query.

The classes are named using the format {property}{sides}-{size}:

<div class="p-2"><span>padding 2.25rem</span></div>
<div class="p-4"><span>padding 4.25rem</span></div>
<div class="mt-3"><span>margin-top 3.25rem</span></div>

Negative margin

Negative margin works exactly as positive, using - before the size: .m-n1, .-mt-2 naming (mt-n2, mx-n3, etc.). Works for m, mx, my, mt, me, mb, ms.

<div class="mt-n2 mx-auto">
  <span>Negative top margin overlaps previous block</span>
</div>

Responsive

Add the breakpoint suffix to apply only from that breakpoint up: .mt-md-4, .px-lg-3, .py-xl-0, .ms-xxl-2.

<div class="p-2 p-md-4 p-lg-5">
  <span>Responsive padding scaling with viewport</span>
</div>

The scale

The $boodoo-spacers map defines a generous, expansive 0–5 (plus 0.5–10) scale engineered for high-comfort breathing room across modern cards and sections:

Customizing the spacing scale

boodoo provides zero-effort customization of the spacing scale across any tech stack:

1. Pure CSS / CDN / Runtime Custom Properties

Override CSS custom properties on :root or any container element to reshape spacing dynamically:

:root {
  --boodoo-spacer: 1rem;
  --boodoo-spacer-1: 1rem;
  --boodoo-spacer-2: 1.5rem;
  --boodoo-spacer-3: 2rem;
  --boodoo-spacer-4: 3rem;
  --boodoo-spacer-5: 4rem;
}

2. Sass / SCSS (npm / yarn / Vite / Next.js)

Override $boodoo-spacer or merge custom steps into $boodoo-spacers before importing boodoo:

// Custom base spacer
$boodoo-spacer: 1.125rem;

// Or customize individual steps
$boodoo-spacers: (
  0: 0,
  1: 0.5rem,
  2: 1rem,
  3: 1.5rem,
  4: 2.5rem,
  5: 4rem
);

@import "boodoo/scss/boodoo";

3. LESS

Override @boodoo-spacer in your Less configuration:

@boodoo-spacer: 1.2rem;
@import "boodoo/less/boodoo.less";

4. JavaScript / TypeScript & React Native Mobile

Use createSpacing() or pass a customized spacing map into <BoodooProvider>:

import { createSpacing } from 'boodoo/tokens';
import { BoodooProvider } from 'boodoo/react-native';

const mySpacing = createSpacing(14); // Generates custom scale from 14px base

function App() {
  return (
    <BoodooProvider customTheme={{ spacing: mySpacing }}>
      {/* App components */}
    </BoodooProvider>
  );
}