Foundation layers global styles (typography, forms), the XY flex grid, component CSS, and optional JavaScript plugins that attach via data attributes and expect jQuery.
What loads in the browser
- foundation.min.css — grid, helpers, components, and settings-derived variables
- jQuery — DOM helpers plugins still rely on in Foundation 6
- foundation.min.js — accordion, dropdown, reveal, top bar, etc.
- Initialization —
$(document).foundation();on DOM ready wires plugins to markup
The playground uses CDN links for convenience. Production apps often install via npm, import Sass partials, and tune $breakpoints and palette variables before compile—same motivation as compiling Bootstrap from source.
Important interview questions and answers
- Q: Why does Foundation 6 still use jQuery?
A: Historical plugin architecture and enterprise codebases already on jQuery; Foundation 6.8 maintains that contract while the ecosystem moves toward vanilla JS elsewhere. - Q: What happens if you skip
foundation()?
A: CSS-only components render; JS behaviors (accordion toggle, dropdown, off-canvas) do not attach until initialized. - Q: CDN vs npm?
A: CDN suits lessons and prototypes; npm + Sass gives variable overrides, partial imports, and pinned versions in CI.
Self-check
- What does the JavaScript bundle add that CSS alone cannot?
- Why might a team compile Foundation from Sass instead of linking CDN CSS?
Interview prep
- What does $(document).foundation() do?
Initializes all Foundation plugins on the page—wires data attributes for Reveal, Dropdown, Off-canvas, etc.