Learn FOUNDATION with Real Code Examples
Updated Nov 23, 2025
Explain
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.
Core Features
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)
Basic Concepts Overview
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
Project Structure
index.html - main markup
scss/ - custom Foundation theme overrides
js/ - optional Foundation JS plugins
assets/ - images, fonts, media
node_modules/ - npm packages if used
Building Workflow
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
Difficulty Use Cases
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
Comparisons
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
Versioning Timeline
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
Glossary
XY Grid: Foundation’s responsive grid
Motion UI: built-in animation library
Reveal: modal plugin
Accordion: collapsible content component
Sass: styling customization tool