{"id":10913,"library":"foundation-sites","title":"Foundation for Sites","description":"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.","status":"active","version":"6.9.0","language":"javascript","source_language":"en","source_url":"https://github.com/foundation/foundation-sites","tags":["javascript","css","scss","sass","js","responsive","mobile-first","framework","eyeglass-module","typescript"],"install":[{"cmd":"npm install foundation-sites","lang":"bash","label":"npm"},{"cmd":"yarn add foundation-sites","lang":"bash","label":"yarn"},{"cmd":"pnpm add foundation-sites","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for all JavaScript components and plugins.","package":"jquery","optional":false},{"reason":"Often used for adding advanced animations and transitions with Foundation components.","package":"motion-ui","optional":true},{"reason":"Used for detecting input type (mouse, keyboard, touch) and managing focus outlines for improved accessibility and UX.","package":"what-input","optional":false}],"imports":[{"note":"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.","wrong":"const Foundation = require('foundation-sites');","symbol":"Foundation","correct":"import Foundation from 'foundation-sites';"},{"note":"For modular imports and potential tree-shaking, individual components can be imported as named exports. This still often relies on jQuery being available globally.","wrong":"import Accordion from 'foundation-sites/js/foundation.accordion';","symbol":"Accordion","correct":"import { Accordion } from 'foundation-sites';"},{"note":"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.","wrong":"@import '../node_modules/foundation-sites/scss/foundation';","symbol":"@foundation","correct":"@import 'foundation-sites';"}],"quickstart":{"code":"import $ from 'jquery';\nimport { Foundation } from 'foundation-sites';\nimport { Accordion } from 'foundation-sites';\n\n// Ensure jQuery is globally available for Foundation's plugins\n(window as any).$ = $;\n(window as any).jQuery = $;\n\n$(document).ready(() => {\n  // Initialize all Foundation components on the page\n  $(document).foundation();\n\n  console.log('Foundation for Sites initialized!');\n\n  // Example of interacting with a specific component instance\n  // Assuming there's an HTML structure like: <ul class=\"accordion\" data-accordion>...\n  const accordionElement = $('.accordion').first();\n  if (accordionElement.length > 0) {\n    const accordionInstance = new Accordion(accordionElement);\n    console.log('Accordion instance created:', accordionInstance);\n    // Example: Toggle the first item\n    // accordionInstance.toggle(accordionElement.children('.accordion-item').first());\n  }\n});\n\n// To include Foundation's styles, typically you'd have a main SCSS file like src/style.scss:\n// @import 'settings'; // Your custom Foundation settings (optional)\n// @import '~foundation-sites/scss/foundation'; // Import Foundation's core Sass\n// @include foundation-everything(); // Include all Foundation components via mixins (or selectively)\n","lang":"typescript","description":"Demonstrates how to import and initialize Foundation Sites JavaScript components using a bundler and TypeScript, including a basic component interaction."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=6.8.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=6.0.0"},{"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']`.","message":"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.","severity":"gotcha","affected_versions":">=6.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=6.8.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade Node.js to version 18.0 or higher. Use `nvm install 18 && nvm use 18` or a similar version manager.","cause":"Your current Node.js environment is below the minimum required version (v18.0) for Foundation Sites v6.9.0.","error":"Node.js version 14.x.y is not supported. Please use >=18.0."},{"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.","cause":"Foundation's JavaScript components require jQuery to be available in the global scope before they are loaded and initialized.","error":"Uncaught ReferenceError: jQuery is not defined"},{"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.","cause":"The Sass compiler cannot resolve the `@import 'foundation-sites';` statement because `node_modules` is not included in its `load-paths` or `includePaths`.","error":"Error: Can't find stylesheet to import: foundation-sites"}],"ecosystem":"npm"}