The simplicity of Bootstrap. The flexibility of Tailwind. The structure of Foundation. The polish of Material.
A modular, mobile-first CSS design framework — without JS framework lock-in. Built for developers who want pre-styled accessible UI components + utility-first power with zero build overhead.
boodoo is inspired by the best ideas in modern CSS frameworks:
- Bootstrap — 12-column mobile-first flexbox grid, battle-tested components, zero-dependency
data-*JS API - Foundation — Tidy scaffolds, typography scales, clean layout helpers
- Tailwind CSS — Functional utility classes with responsive breakpoint variants
- Material Design — Elevation tokens, motion curves, touch ripple effects, floating labels
- Zero runtime dependencies — Vanilla JS (~73 KB minified / ~16 KB gzipped), tree-shakeable, SSR-safe, no jQuery or React required
- Framework agnostic — Works seamlessly with HTML, PHP, Laravel, Rails, Django, Node, static sites, or any web stack
- Mobile-first architecture — Responsive flexbox grid from 320px to 1400px+, plus 2D CSS Grid utility suite
- Source-first authoring — Author in Sass (primary) or Less; retheme easily by overriding design tokens
- Accessible & touch-friendly — Focus-visible rings,
prefers-reduced-motioncompliance, ARIA wiring, and 44px minimum touch targets - Multiple delivery methods — High-speed CDN, npm package, Sass/Less source, or precompiled minified CSS
| Asset | Minified | Gzip | Brotli | Description |
|---|---|---|---|---|
boodoo.min.css |
~364 KB | ~50 KB | ~32 KB | Full framework (all 26+ components + utilities) |
boodoo-utilities.min.css |
~188 KB | ~21 KB | ~12 KB | Tailwind-style utility classes only |
boodoo-grid.min.css |
~13 KB | ~1.7 KB | ~1.2 KB | Flexbox grid + CSS Grid containers only |
boodoo-reboot.min.css |
~10 KB | ~3.0 KB | ~2.6 KB | Modern CSS reset & base typography |
boodoo-animations.min.css |
~3.2 KB | ~0.8 KB | ~0.7 KB | Motion utilities & keyframes |
boodoo.js |
~73 KB | ~16 KB | ~14 KB | Pure vanilla JS (zero dependencies) |
<link href="https://boodoo.dihadiwala.com/dist/css/boodoo.min.css" rel="stylesheet">
<script src="https://boodoo.dihadiwala.com/dist/js/boodoo.js"></script>npm install boodooimport boodoo from 'boodoo/dist/js/boodoo.esm.js'; // ESM, tree-shakeable
import 'boodoo/dist/css/boodoo.min.css';// Override any token before importing
$boodoo-primary: #7C3AED;
@import "node_modules/boodoo/scss/boodoo";@import "node_modules/boodoo/less/boodoo";<link href="https://boodoo.dihadiwala.com/dist/css/boodoo-grid.min.css" rel="stylesheet"> <!-- grid only -->
<link href="https://boodoo.dihadiwala.com/dist/css/boodoo-utilities.min.css" rel="stylesheet"> <!-- utilities only -->
<link href="https://boodoo.dihadiwala.com/dist/css/boodoo-reboot.min.css" rel="stylesheet"> <!-- reset only -->boodoo/
├── dist/
│ ├── css/
│ │ ├── boodoo.css / boodoo.min.css # full framework
│ │ ├── boodoo-grid.css / .min.css # grid + containers
│ │ ├── boodoo-reboot.css / .min.css # normalize + base
│ │ ├── boodoo-utilities.css / .min.css # Tailwind-style utilities
│ │ ├── boodoo-animations.css / .min.css # motion
│ │ └── boodoo.less.css # compiled from Less
│ └── js/
│ ├── boodoo.js # UMD bundle
│ └── boodoo.esm.js # ES module (SSR-safe)
├── scss/ # Sass source
├── less/ # Less build
├── js/src/ # Vanilla JS modules
└── site/ # Documentation (static)
Accordion · Alerts · Avatar · Badge · Breadcrumb · Buttons · Button group · Card · Carousel · Collapse · Dropdowns · List group · Modal · Navs & tabs · Navbar · Offcanvas · Pagination · Placeholders · Popovers · Progress · Scrollspy · Spinners · Toasts · Tooltips · Ripple (Material)
Plus forms (control, select, checks/radios/switches, range, input group, floating labels, validation) and ~150 utility classes (spacing, flex, grid, display, position, text, borders, shadows, elevation…).
npm run css # compile all Sass → dist/css
npm run css:less # compile the Less build
npm run js # bundle JS → dist/js
npm run build # css + js
npm run serve:site # serve docs at http://localhost:8080
node build/site-build.mjs # rebuild docs pagesRequirements: Node 18+, Dart Sass, optionally Less.
boodoo is token-driven. Every color, radius, shadow, and timing value is either a Sass variable or a CSS custom property:
$boodoo-primary: #7952b3;
$boodoo-border-radius: 0.375rem;:root {
--boodoo-primary: #5b2ef2;
--boodoo-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%);
}Dark mode is automatic via prefers-color-scheme: dark, and can be forced with data-boodoo-theme="light|dark" on <html>.
The full documentation site is in site/ and deployed at https://boodoo.dihadiwala.com:
- Getting started · Installation · Usage & CDN · Theming
- Layout (containers, grid, columns, gutters, CSS grid, breakpoints)
- Content (typography, images, tables, figures)
- Forms · Components · Helpers · Utilities · Motion
Each page includes live examples and copy-able code snippets.
Official brand assets (logo lockup, icon set, banner, OG image, color tokens) live in boodoo-brand-assets/ and are mirrored into the docs site under assets/brand/. See the Brand page for usage guidelines. The framework's default theme maps to the brand palette: primary #7c3aed, secondary #5b21e6, dark #17135f, ink #11143d, muted #5c6280.
- Focus ring shown only for keyboard users (
:focus-visible) - All animations disable under
prefers-reduced-motion - Modals trap focus · dropdowns close with
Esc· carousels support arrow keys - 44px minimum touch-target sizes
- Skip-links and correct ARIA roles/state across components
Latest two stable versions of Chrome, Edge, Firefox, Safari, Opera + evergreen mobile browsers. Internet Explorer is not supported. Legacy CSS features degrade gracefully via @supports.
MIT License — see LICENSE. Copyright © 2026 Pebble Benders.