Skip to main content
Boodoo Framework v1.0 • Bootstrap + Foundation + Tailwind + Material

Build fast, responsive sites with Boodoo

A modular, mobile-first CSS design framework that fuses four iconic design systems into one dependency-free, accessible, touch-friendly toolkit. Written in Sass, compiled for speed.

Get Started CDN Installation 
$ npm install boodoo
$ sass scss/boodoo.scss css/boodoo.css
✔ Bundled 296 kB → boodoo.min.css   # 12 components · 100+ utilities
⚡
Zero Runtime Deps
Pure Vanilla JS
📦
~56 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="https://boodoo.dihadiwala.com/dist/css/boodoo.min.css" rel="stylesheet">
<script src="https://boodoo.dihadiwala.com/dist/js/boodoo.js"></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