CDN playgrounds teach quickly; production needs a deliberate build. Use this checklist before shipping Foundation to real users.
Production checklist
- Install via npm — pin
foundation-sitesand compile from Sass with your settings entry file - Trim CSS/JS — import only needed partials; don’t ship full CDN weight if you use a handful of components
- Document tokens — primary palette, global width, radius, and font stacks live in one
_settings.scss - Initialize plugins once — call
$(document).foundation()after DOM ready; avoid double init on SPA route changes - Accessibility audit — keyboard-test Reveal, dropdown panes, off-canvas, and Orbit; verify contrast after theme overrides
- CDN hygiene — if CDN remains, pin version and use SRI; prefer self-hosted assets for compliance
- Conflict check — resolve clashes with SPA scoped styles or legacy global rules
Laravel teams often pair Foundation with Vite and a single SCSS entry—mirror the discipline you would apply to any CSS architecture decision.
Self-check
- Why is npm + Sass safer than an unpinned CDN at scale?
- Which interactive widgets did you keyboard-test?
- What breaks if you override variables only in compiled CSS instead of source SCSS?
Challenge
Legacy deploy checklist
- List two files you ship besides HTML (CSS, JS, jQuery).
- Name one plugin that breaks if
$(document).foundation()never runs.
Done when: you can explain init order and bundle contents for production.
Interview prep
- How do you customize Foundation?
Sass settings import before components, or override CSS variables; avoid fighting the grid with one-off floats.