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.
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, ~56 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
| 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 |
| Docs | Static site built with boodoo itself (dogfooding) |