Foundation for Sites

6.9.0 · active · verified Sun Apr 19

Foundation for Sites is a comprehensive, responsive front-end framework designed for building websites and applications that adapt seamlessly to any device. It provides a robust, customizable grid system, a rich library of Sass mixins for styling, and a collection of pre-built JavaScript plugins for common UI patterns such as accordions, off-canvas menus, and responsive navigation. The current stable version is 6.9.0. Releases appear to follow a somewhat regular cadence, with several updates per year focusing on cleanup, dependency upgrades, and minor enhancements. Key differentiators include its Sass-first approach, strong accessibility support, and the ability to rapidly prototype and move to production, targeting modern web development environments with an emphasis on flexibility and customization.

Common errors

```
Node.js version 14.x.y is not supported. Please use >=18.0.
```
cause Your current Node.js environment is below the minimum required version (v18.0) for Foundation Sites v6.9.0.

fix Upgrade Node.js to version 18.0 or higher. Use `nvm install 18 && nvm use 18` or a similar version manager.
```
Uncaught ReferenceError: jQuery is not defined
```
cause Foundation's JavaScript components require jQuery to be available in the global scope before they are loaded and initialized.

fix Ensure jQuery is installed (`npm install jquery`) and imported/loaded before Foundation's JavaScript. For bundlers, `import $ from 'jquery'; (window as any).$ = $; (window as any).jQuery = $;` is a common pattern.
```
Error: Can't find stylesheet to import: foundation-sites
```
cause The Sass compiler cannot resolve the `@import 'foundation-sites';` statement because `node_modules` is not included in its `load-paths` or `includePaths`.

fix Configure your Sass build tool to include `node_modules` in its `load-paths`. For example, in `node-sass` or `dart-sass`, provide `['node_modules']` to the `includePaths` option.

Warnings

breaking Foundation Sites v6.8.0 updated its minimum Node.js requirement to v16, and the current v6.9.0 explicitly requires Node.js v18.0 or higher. Running with older Node.js versions will lead to build failures during installation or compilation.
Fix: Upgrade your Node.js environment to version 18.0 or newer. Tools like `nvm` (`nvm install 18 && nvm use 18`) can help manage different Node.js versions.
gotcha Foundation Sites JavaScript components have a peer dependency on jQuery (>=3.6.0). Ensure jQuery is installed as a dependency and loaded into the global scope (e.g., `window.$` or `window.jQuery`) before Foundation's JavaScript bundle or individual components are loaded and initialized.
Fix: Install `jquery` (`npm install jquery`). If using a bundler, explicitly `import $ from 'jquery';` and ensure it's exposed globally by assigning it to `window.$` and `window.jQuery` before Foundation's JS execution.
gotcha When importing Foundation's Sass files using `@import 'foundation-sites';`, your Sass build process must be configured to recognize `node_modules` as a valid import path. Failure to do so will result in the compiler being unable to locate the package's Sass entry point.
Fix: Add `node_modules` to your Sass compiler's `load-paths` or `includePaths`. For example, with the Dart Sass CLI, use `sass --load-path=node_modules src/style.scss dist/style.css`. For Webpack, configure your Sass loader with `includePaths: ['node_modules']`.
deprecated As of v6.8.0 and v6.9.0, the Foundation team has shifted primary support and discussion channels away from GitHub Issues. Users are strongly encouraged to use the official Discord server or GitHub Discussions board for support, questions, and general discussions. Traditional GitHub Issues are now primarily for confirmed bugs or feature requests.
Fix: For support or questions, utilize the official Foundation Discord server or the GitHub Discussions board. Reserve GitHub Issues for verified bug reports or well-defined feature requests after community consultation.

Install

npm install foundation-sites npm
yarn add foundation-sites yarn
pnpm add foundation-sites pnpm

Imports

Foundation
wrong:
```
const Foundation = require('foundation-sites');
```
correct:
```
import Foundation from 'foundation-sites';
```
This imports the main JavaScript bundle. It typically attaches Foundation methods to jQuery's prototype. Components are then initialized globally via `$(document).foundation();` after the DOM is ready.
Accordion
wrong:
```
import Accordion from 'foundation-sites/js/foundation.accordion';
```
correct:
```
import { Accordion } from 'foundation-sites';
```
For modular imports and potential tree-shaking, individual components can be imported as named exports. This still often relies on jQuery being available globally.
@foundation
wrong:
```
@import '../node_modules/foundation-sites/scss/foundation';
```
correct:
```
@import 'foundation-sites';
```
This is the primary way to import Foundation's Sass. It assumes your Sass compiler's `load-paths` include `node_modules` to correctly resolve the package.

Quickstart

Demonstrates how to import and initialize Foundation Sites JavaScript components using a bundler and TypeScript, including a basic component interaction.

import $ from 'jquery';
import { Foundation } from 'foundation-sites';
import { Accordion } from 'foundation-sites';

// Ensure jQuery is globally available for Foundation's plugins
(window as any).$ = $;
(window as any).jQuery = $;

$(document).ready(() => {
  // Initialize all Foundation components on the page
  $(document).foundation();

  console.log('Foundation for Sites initialized!');

  // Example of interacting with a specific component instance
  // Assuming there's an HTML structure like: <ul class="accordion" data-accordion>...
  const accordionElement = $('.accordion').first();
  if (accordionElement.length > 0) {
    const accordionInstance = new Accordion(accordionElement);
    console.log('Accordion instance created:', accordionInstance);
    // Example: Toggle the first item
    // accordionInstance.toggle(accordionElement.children('.accordion-item').first());
  }
});

// To include Foundation's styles, typically you'd have a main SCSS file like src/style.scss:
// @import 'settings'; // Your custom Foundation settings (optional)
// @import '~foundation-sites/scss/foundation'; // Import Foundation's core Sass
// @include foundation-everything(); // Include all Foundation components via mixins (or selectively)

view raw JSON →