Skip to main content

About boodoo

boodoo is a modern, zero-dependency universal design system and UI toolkit engineered for consistent, high-performance interfaces across Web and React Native Mobile.

Framework Interactive Preview

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

boodoo v1.3.1 Zero Dependencies

Modern UI Toolkit

Modular universal framework engineered with accessible semantic components, universal design tokens, and tactile elevation.

<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.3.1</span></span>
    <span class="badge bg-success"><span>Zero Dependencies</span></span>
  </div>
  <h4 class="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?

  • Universal design system. Deploy the same design tokens, styling semantics, and accessibility conventions across Web, React, Vue, and React Native without fragmentation.
  • Zero runtime dependencies. The JavaScript is vanilla, ~123 KB minified (~29.0 KB gzip), 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.

Official Ecosystem & Companion Libraries

Boodoo is part of an integrated, modern frontend ecosystem engineered by Pebble Benders:

  • Haticons: The official companion icon suite featuring 569+ modular vector & font icons, 14 category-based stylesheets, and zero runtime dependencies.
  • Universal Design Tokens: Shared JSON, CJS, and ESM token scales powering web, React Native mobile, and desktop application chrome.

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

Layer Choice
CSS authoring Sass (primary) + Less build
Grid Mobile-first 12-col flexbox + CSS Grid utilities
Utils Generated from a utility API map (Tailwind-style)
JS Vanilla ES modules → UMD & ESM bundles
Icons Haticons (569+ modular vector & font icons by Pebble Benders)
Docs Static site built with boodoo itself (dogfooding)