Skip to main content
boodoo v{{version}} Stable • Bootstrap + Foundation + Tailwind + Material

The simplicity of Bootstrap. The flexibility of Tailwind. boodoo

Inspired by the best ideas in modern CSS frameworks. A modular, mobile-first toolkit with pre-styled accessible components, functional utilities, and zero JS framework lock-in.

Get Started CDN Installation GitHub (v{{version}}) 
$ npm install boodoo
$ sass scss/boodoo.scss css/boodoo.css
✔ Bundled {{cssMinKb}} kB → boodoo.min.css   # 12 components · 100+ utilities
⚡
Zero Runtime Deps
Pure Vanilla JS
📦
~{{jsRawKb}} KB Minified
Ultra lightweight
📱
100% Mobile-First
Flexbox & CSS Grid
🎨
Source Theming
Sass & Less Tokens
Why boodoo?

Engineered for modern web applications

Combine flexbox responsive layout power with rich UI components and accessible touch interactions.

📱

Mobile first

12-column flexbox grid from 320px to 1400px+, plus a complete 2D CSS Grid utility suite.

⚡

Fast & zero-deps

Vanilla JS, ~56 KB bundle, zero runtime dependencies. Ships modular utility & grid builds.

🛡️

Accessible & touch

44px touch targets, focus-visible outlines, ARIA wiring, and swipe gesture support out of the box.

🎨

Source-first tokens

Every color, radius, and shadow is a token. Compile custom themes with Sass or Less in seconds.

Interactive Showcase

Everything you need, ready to drop in

Explore production-ready components: cards, buttons, switches, toasts, modals, badges, and flex utility classes.

1 Cards & Surfaces

Modular Card

Cards adapt gracefully to any container with customizable headers, overlays, and body styling.

2 Buttons & Badges

Primary Soft Outline Pill

3 Form Controls

4 Modals & Dialogs

Accessible modals with backdrop blur, focus trapping, centered positioning, and Escape key handling.

5 Interactive Toasts

Stackable, auto-dismissing toast notifications. Trigger toast popups with zero external dependencies.

6 Utility-First Classes

w-75
w-50
d-flex gap-2 rounded-pill
Quick Start

Get up and running in 60 seconds

Choose your preferred workflow — drop in via high-speed CDN or compile source tokens with your favorite package manager.

<!-- Drop CSS & JS directly in your <head> -->
<link href="{{cdnCssMin}}" rel="stylesheet">
<script src="{{cdnJsRaw}}"></script>
Zero Config Production-ready minified bundle loaded in a single request.
Full installation guide
Four Pillars

Four great design systems, one cohesive toolkit

boodoo synthesizes the best ideas from top frameworks into a single lightweight library.

🅱️

Bootstrap

Component structure, 12-col grid flex, modal overlays, data-* attributes JS API.
🏛️

Foundation

Clean structural scaffolding, rich typography scales, and subtle gray scales.
🌀

Tailwind

Functional utility classes, responsive variants, precise spacing scales.
💎

Material

Elevation shadows, motion curves, touch ripple effects, floating form labels.
Open Source & MIT Licensed

Ready to build something extraordinary?

boodoo is 100% free and open source. Explore our modular components, utility classes, and theme system to craft your next project today.

Get Started Now View License