Learn FOUNDATION with Real Code Examples

Install via npm: `npm install foundation-sites`

Or use CDN: `<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css'>`

Include JS plugins via CDN or npm

Optionally compile Sass for custom theming

Integrate with build tools like Gulp, Webpack, or Vite

Install Node.js & npm

Install Foundation via npm or CDN

Set up Sass compilation if needed

Include JS plugins for interactive components

Start coding using grid & components

scss/_settings.scss - theme overrides

scss/foundation.scss - main framework import

js/foundation.js - plugin scripts

index.html - markup

package.json - npm dependencies

npm install foundation-sites

npm run build-css (custom Sass build)

npm run build-js (plugins)

npm start (local dev server)

Optional Gulp/Webpack integration

Framework is language-agnostic

Form validation messages customizable

Supports RTL via custom CSS

JS plugins are locale-independent

Typography adapts to various languages

Keyboard navigation supported

ARIA roles for modals, accordions, menus

Focus management in interactive components

Semantic HTML encouraged

Screen reader-friendly defaults

Prebuilt buttons, forms, cards, navigation

Grid-based layout system

Sass-based color and typography customization

Motion UI animations

Accessible and semantic markup

No built-in state system

JS plugins handle basic interactivity

Reactive frameworks manage dynamic state separately

Classes toggle via JS for visibility

Supports ARIA attributes for accessibility

Not directly applicable (CSS/JS framework)

Dynamic behaviors handled via JS plugins

Integrate with REST or frontend frameworks for dynamic data

Use custom JS for client-side interactivity

Forms and inputs managed via Foundation classes