Foundation — Responsive Front-End Framework by Zurb

Introduction

Foundation is a responsive front-end framework created by Zurb that provides a grid system, UI components, and utility classes for building professional websites. It was one of the first frameworks to adopt a mobile-first approach and continues to offer a Sass-based architecture for deep customization.

What Foundation Does

• Provides a flexible 12-column responsive grid system (XY Grid) that handles complex layouts
• Ships accessible HTML/CSS/JS components including modals, tabs, accordions, and navigation menus
• Offers a Sass-based theming system with variables, mixins, and functions for full customization
• Includes Foundation for Emails, a separate framework for building responsive HTML email templates
• Delivers built-in motion UI library for transitions and animations

Architecture Overview

Foundation is built on Sass and follows a modular architecture. Each component is a standalone Sass partial that can be included or excluded from the final build. The JavaScript layer uses a plugin system where each component registers itself through a central Foundation core object. The XY Grid uses a combination of flexbox and CSS grid for layout, replacing the older Float Grid.

Self-Hosting & Configuration

• Install via npm, Yarn, or download the compiled CSS/JS bundle directly
• Use the Foundation CLI (foundation new) to scaffold projects with Gulp-based build pipeline
• Customize through _settings.scss which exposes hundreds of Sass variables for colors, spacing, and breakpoints
• Include only the components you need by importing individual Sass partials to reduce bundle size
• Integrates with Webpack, Vite, or any Sass-compatible build tool

Key Features

• Mobile-first XY Grid with both flexbox and CSS grid support for responsive layouts
• Accessibility baked into every component following WCAG guidelines
• Foundation for Emails enables building responsive email templates that render across all clients
• Motion UI library provides pre-built CSS transitions and animations
• Sass-first design allows deep customization without overriding compiled CSS

Comparison with Similar Tools

• Bootstrap — more popular with a larger ecosystem; Foundation offers more flexibility in grid layout and deeper Sass customization
• Tailwind CSS — utility-first approach versus Foundation's component-based model; Tailwind gives more granular control but requires more markup
• Bulma — CSS-only framework that is simpler but lacks Foundation's JavaScript components and email framework
• Semantic UI — more opinionated styling with natural language class names; Foundation is more neutral and customizable

FAQ

Q: Is Foundation still actively maintained? A: Foundation receives maintenance updates and security patches. The core framework is stable and production-ready, though new feature development has slowed compared to its earlier years.

Q: Can I use Foundation with React or Vue? A: Yes. You can import Foundation's Sass files into any framework. For JavaScript components, community wrappers exist, or you can initialize Foundation plugins manually in lifecycle hooks.

Q: How does Foundation compare to Bootstrap for accessibility? A: Foundation has historically placed strong emphasis on accessibility, with ARIA attributes and keyboard navigation built into components by default. Both frameworks now prioritize accessibility, but Foundation was an early leader in this area.

Q: What is Foundation for Emails? A: A separate framework (formerly Inky) that provides responsive email-safe HTML components. It compiles custom tags into the table-based layouts required by email clients like Outlook.

Sources

• https://github.com/zurb/foundation-sites
• https://get.foundation/sites/docs/