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:
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) |