Foundation is not only a grid kit. It is a full UI stack: normalized typography, form patterns, navigation chrome, and JavaScript plugins—historically tuned for agency and enterprise marketing sites where Zurb’s patterns were the default choice.
Compared to writing CSS files
Hand-rolled CSS means inventing .site-header, re-solving responsive nav, and debating gutter math on every project. Foundation gives you top-bar, grid-x, and button variants so you spend effort on content and brand overrides—not rebuilding panels from scratch.
Compared to Bootstrap
Bootstrap uses a 12-column flex grid with col-md-6 and Bootstrap 5 dropped jQuery. Foundation’s XY grid uses grid-x + cell with breakpoint-prefixed widths (medium-6). Both solve layout; the class vocabulary and JS initialization differ—learn the one your codebase inherited.
Important interview questions and answers
- Q: What problem does Foundation solve?
A: It standardizes responsive layout, typography, and common marketing UI so teams ship consistent pages faster without reinventing grids and nav patterns. - Q: Is Foundation only CSS?
A: Core styling is CSS; accordions, dropdowns, modals, and the top bar need Foundation’s JS plus jQuery and$(document).foundation()after DOM ready. - Q: When would you avoid Foundation?
A: Greenfield apps standardized on Bootstrap or Tailwind, teams that forbid jQuery, or design systems where every component is bespoke with no Zurb legacy.
Self-check
- Name one thing Foundation gives you that inline
style=""does not. - How does Foundation’s JS dependency differ from Bulma’s CSS-only approach?