Foundation CSS
By ZURB
Foundation is a responsive front-end CSS framework, originally created by ZURB, that provides a grid system, UI components, and JavaScript plugins for building websites and web applications.
Definition
Foundation is a responsive front-end CSS framework, originally created by ZURB, that provides a grid system, UI components, and JavaScript plugins for building websites and web applications.
Overview
Foundation was one of the early "responsive-first" CSS frameworks, providing a flexible grid system alongside pre-built components — navigation bars, buttons, forms, and modals — intended to work well across devices from the outset rather than being adapted afterward. It bundles optional JavaScript plugins for interactive components, similar in spirit to Bootstrap, distinguishing it from CSS-only frameworks like Bulma or DaisyUI. The framework is distributed as Sass source, letting teams customize variables for the grid, colors, and typography before compiling their own build, and it has historically offered specialized variants for email templates and interactive prototypes in addition to its core site/app framework. Foundation was widely used during the years when responsive design and grid frameworks were still maturing as a discipline, and it remains present in a number of long-running production sites, though newer projects more often reach for utility-first tools like Tailwind CSS or lighter frameworks depending on their needs.
Key Features
- Responsive-first Flexbox and XY grid system
- Pre-built UI components with optional bundled JavaScript plugins
- Sass-based customization of grid, color, and typography variables
- Separate specialized kits historically offered for email and app prototyping
- Accessibility-conscious markup patterns for many components