How this Foundation track works
- Real Foundation Sites 6 in the playground — CSS, jQuery, and Foundation JS load from CDN so the XY grid, top bar, and plugins behave like legacy marketing sites.
- Original lesson copy — we explain patterns and trade-offs in our own words; use Zurb/get.foundation docs as reference, not a script to paste.
- Prerequisites — finish HTML and CSS (flexbox, responsive design). Compare with Bootstrap when you inherit a different grid mental model.
Foundation targets marketing and enterprise sites; plugins rely on jQuery + $(document).foundation() initialization.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Foundation Sites (Zurb Foundation 6.8) is a responsive front-end framework built for marketing sites, product landing pages, and enterprise dashboards. You compose layouts with the XY grid (grid-container, grid-x, cell) and layer opinionated components—buttons, callouts, top bars—on top of normalized base styles.
How this track differs from plain CSS
If you completed HTML and CSS, you already understand flexbox, breakpoints, and the box model. Foundation does not replace that knowledge—it names recurring layout and UI patterns so teams ship consistent pages faster.
Compare with Bootstrap (12-column row/col grid, vanilla JS plugins) or utility-first tracks. Foundation 6 keeps jQuery for plugin initialization and favors semantic grid class names like medium-6 on cell elements.
Playground setup
Each lesson ships a full HTML document with Foundation Sites 6.8 CSS, jQuery, and Foundation JS from CDN. Edit markup and classes; interactive widgets (accordion, top bar toggle) work when the lesson loads $(document).foundation().
What you will learn
- The XY grid: containers, rows, and responsive cells
- Helper classes for typography, color, visibility, and flex
- Core components: buttons, callouts, cards, top bar, tables
- Breakpoint prefixes (
small-,medium-,large-) - When to customize Sass settings vs override in your stylesheet
Self-check
- In one sentence, what is the XY grid?
- Why do we still need solid HTML and CSS before leaning on Foundation?
Interview prep
- What is Foundation in one sentence?
Zurb’s responsive front-end framework: XY flex grid, UI components, and jQuery-powered plugins for marketing and enterprise sites.
- Why learn Foundation in 2026?
Many agencies and legacy codebases still maintain Foundation Sites—reading the grid and plugins beats guessing in inherited HTML.