Migrate from Foundation to boodoo

Foundation by ZURB pioneered responsive web design and typographic grids, but its active maintenance has slowed down and it relies on legacy Sass setups and jQuery. Learn how to migrate Foundation projects to boodoo for modern CSS, active maintenance, and vanilla JavaScript.

Compare features first?

Review our feature and architectural breakdown between boodoo and Foundation.

View boodoo vs Foundation →

Key Benefits of Upgrading from Foundation

Drop jQuery: Eliminate the 85+ KB jQuery runtime dependency. Boodoo's components run on modern vanilla ES modules.
Native Flexbox & 2D CSS Grid: Replace legacy float-based and older flex grids with modern .container, .row, .col-*, and .grid layouts.
Modern Color & Dark Mode Tokens: Built-in CSS custom properties and automatic prefers-color-scheme dark theme switching.

Foundation to boodoo Class Mapping

Foundation 6 Class	boodoo Equivalent	Description
`.grid-container`	`.container`	Fixed-width responsive layout container
`.grid-x`	`.row`	Horizontal flexbox container
`.cell.small-12.medium-6`	`.col-12.col-md-6`	Responsive column spans across breakpoints
`.button.primary`	`.btn.btn-primary`	Primary action button
`.callout.primary`	`.alert.alert-primary` / `.bd-callout`	Callout and notification boxes
`.badge`	`.badge`	Status and tag badges
`.reveal`	`.modal`	Dialog modal overlays
`.top-bar`	`.navbar`	Main navigation header bar

Replacing Foundation JavaScript Plugins

Foundation relied on $(document).foundation();. In boodoo, plugins initialize automatically:

<!-- Drop in boodoo JS: No jQuery, no init call required -->
<script src="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo-22f6ff5d.js"></script>