About boodoo

boodoo is a modular, mobile-first CSS design framework that takes the strongest ideas from Bootstrap, Foundation, Tailwind CSS, and Material Design and weaves them into one cohesive, dependency-free toolkit.

Framework Interactive Preview

Experience Boodoo's seamless combination of clean component styling, elevation shadows, and touch interactions:

<div class="p-3 bg-light rounded-3 border elevation-2">
  <div class="d-flex align-items-center justify-content-between mb-2">
    <span class="badge bg-primary"><span>boodoo v1.1.5</span></span>
    <span class="badge bg-success"><span>Zero Dependencies</span></span>
  </div>
  <h4 class="h5 mb-2"><span>Modern UI Toolkit</span></h4>
  <p class="text-muted small mb-3"><span>Modular mobile-first framework.</span></p>
  <div class="d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-sm btn-primary"><span>Get Started</span></button>
    <button type="button" class="btn btn-sm btn-outline-secondary"><span>Documentation</span></button>
  </div>
</div>

Why boodoo?

• Four roadmaps, one toolkit. Get Bootstrap's battle-tested components and grid, Foundation's tidy scaffolds and helpers, Tailwind's utility classes, and Material's elevation and motion.
• Zero runtime dependencies. The JavaScript is vanilla, ~142 KB, tree-shakeable, SSR-safe.
• Source-first. Author in Sass (primary) or Less; override a variable or a map to retheme the whole system.
• Modern CSS, graceful fallbacks. aspect-ratio, text-wrap: balance, CSS Grid utilities, backdrop-filter — all progressively enhanced.
• Accessible & touch-friendly. 44px targets, focus-visible, reduced-motion, ARIA wiring, swipe support.

Philosophy

boodoo believes a design system should be a spark — a small, opinionated seed you can grow. Start from the tokens, compose with utilities, and reach for a component only when it earns its keep. Every piece is measurable, overridable, and removable.

Technology