boodoo

Quickly design and customize responsive mobile-first sites with boodoo, the most popular open-source front-end toolkit built with Sass and vanilla JavaScript.

v1.0.0

boodoo blends the best of the modern CSS ecosystems into one cohesive, dependency-free toolkit:

Bootstrap-style 12-column mobile-first grid, components and modifiers.
Foundation-style utility breadth, flex helpers and tidy scaffolds.
Tailwind-inspired functional utility classes with responsive variants.
Material-inspired elevation, motion tokens and a rounded, friendly look.

Zero inline styles by design: boodoo is architected so that you never need inline style="..." attributes. Layouts, responsive spacing, dimensions, elevation, motion, and theming are cleanly achieved through utility classes and design tokens.

Quick start

Looking to quickly add boodoo to your project? Use the CSS CDN. Add the following to the <head> of your HTML:

<link href="https://boodoo.dihadiwala.com/dist/css/boodoo.min.css" rel="stylesheet">
<script src="https://boodoo.dihadiwala.com/dist/js/boodoo.js"></script>

Then, you can start building with boodoo. Here's a minimal starter:

Hello, boodoo!

A mobile-first, responsive framework for everyone.

That just worked! All of boodoo's CSS and JS is loaded from a single CSS file and a single JS file. No jQuery, no build step required.

JavaScript components

boodoo's JavaScript components are vanilla, dependency-free, and initialized from data-* attributes. Everything is tree-shakeable via the ESM build.

Install via npm

Install boodoo as an npm package and compile its Sass yourself to customize everything:

npm install boodoo

Then import the Sass source:

@import "node_modules/boodoo/scss/boodoo";