Learn FOUNDATION with Real Code Examples

Foundation offers a flexible grid and prebuilt UI components like buttons, forms, and navigation.

It is responsive by default, with a mobile-first approach.

Supports accessibility standards and semantic markup.

Flexible grid system (XY & Flex Grid)

Responsive typography and forms

UI components: buttons, cards, modals, dropdowns

JS plugins: accordion, dropdown, tooltip

Accessibility support (ARIA, keyboard navigation)

Grid: `.grid-x`, `.grid-margin-x`, `.cell`

Buttons: `.button`, `.success`, `.alert`

Forms: styled inputs, labels, and selects

Typography: headings, body text, lists

JS plugins: Accordion, Dropdown, Reveal modal

index.html - main markup

scss/ - custom Foundation theme overrides

js/ - optional Foundation JS plugins

assets/ - images, fonts, media

node_modules/ - npm packages if used

Include Foundation CSS & JS via CDN or npm

Use grid classes for layout

Add prebuilt components as needed

Enhance interactivity with JS plugins

Customize via Sass variables for branding

Beginner: simple grid layouts and buttons

Intermediate: forms and responsive navigation

Advanced: custom themes and JS plugins

Expert: accessibility compliance & complex layouts

Community: create reusable components or templates

More accessible than early Bootstrap versions

Less utility-driven than Tailwind

Heavier than minimal frameworks

Strong grid system for complex layouts

JS plugins similar to Bootstrap’s components

2011 – Foundation 3 released

2012 – Foundation 4 mobile-first grid

2014 – Foundation 5 with Flex Grid

2016 – Foundation 6 modernized grid & JS plugins

2025 – Continues maintenance with updates

XY Grid: Foundation’s responsive grid

Motion UI: built-in animation library

Reveal: modal plugin

Accordion: collapsible content component

Sass: styling customization tool