Foundation

Another mature responsive front-end framework.

Foundation is taught here in 12 lessons, running from The XY grid and layout through to Building a complete page with Foundation. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. The XY grid and layoutInstall Foundation, build a responsive layout with the XY grid, and learn the cell classes the whole system is built on.
2. Components and utilitiesWire up the JavaScript plugins, know which components are CSS-only, and use the visibility and flex helpers instead of hand-written media queries.
3. Choosing FoundationWhere Foundation fits against Bootstrap, Tailwind and Bulma, and the maintenance question you should answer before adopting it.
4. Project setup: Sass, Motion UI and the build pipelineInstall Foundation from npm, compile Sass yourself, decide between the CDN and a custom build, and understand what Motion UI and What-Input add.
5. Typography, buttons and formsWork with Foundation's type scale, button variants and form layouts, and know which styles come from base element rules versus explicit classes.
6. Building navigationTop bars, responsive menus, off-canvas panels, dropdowns, breadcrumbs and pagination — with the initialisation details that make them behave on touch.
7. Interactive plugins: reveals, tabs, accordions and dropdownsInitialise Foundation's JavaScript components correctly, drive them from data attributes or the API, listen to their events, and tear them down cleanly.
8. Content components: cards, callouts, badges and tablesCompose cards, messaging, badges and data tables, and use the grid-aware helpers that keep mixed content aligned.
9. Motion UI and animationUse Motion UI's transition classes, write custom animations with its mixins, and keep motion respectful of reduced-motion preferences.
10. Theming with Sass: settings, partials and selective importsOverride Foundation's variables before the framework reads them, build a custom palette, change grid gutters, and import only the components you ship.
11. Accessibility and RTL supportWhat Foundation's plugins already do for keyboard and screen reader users, what you must add yourself, and how to build a right-to-left layout that holds.
12. Building a complete page with FoundationAssemble a marketing page and a dashboard shell with the XY grid and Foundation's components, including the composition mistakes that cost the most time.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Vue.js React Next.js Angular jQuery ECharts Chart.js SVG Font Awesome

FAQ