Registry / web-framework / foundation-sites

foundation-sites

library6.9.0jsnpmunverified

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.

web-framework

npm install foundation-sites

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FOUNDATION-SITES

foundation-sites

web-frameworkjavascriptv6.9.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Foundation

✓ import Foundation from 'foundation-sites';

✗ const Foundation = require('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

✓ import { Accordion } from 'foundation-sites';

✗ import Accordion from 'foundation-sites/js/foundation.accordion';

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

✓ @import 'foundation-sites';

✗ @import '../node_modules/foundation-sites/scss/foundation';

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.

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)

Debug

Known issues

breakingFoundation 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.

affects: >=6.8.0

gotchaFoundation 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.

affects: >=6.0.0

gotchaWhen 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']`.

affects: >=6.0.0

deprecatedAs 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.

affects: >=6.8.0

Errors

Common errors & fixes

Node.js version 14.x.y is not supported. Please use >=18.0.

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

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

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.

Upgrade

Version history

6.9.0latest on npm

Audit

Dependencies

jqueryrequiredRequired peer dependency for all JavaScript components and plugins.

motion-uioptionalOften used for adding advanced animations and transitions with Foundation components.

what-inputrequiredUsed for detecting input type (mouse, keyboard, touch) and managing focus outlines for improved accessibility and UX.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/foundation/foundation-sites ↗

packagehttps://www.npmjs.com/package/foundation-sites ↗

homepagehttps://get.foundation ↗