Foundation for Sites6.3.1 changelog
Component List

Installation

There are many ways to install Foundation, but if you're just getting started, we have a few suggestions.

Command-Line Tool

Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you. Install it with npm:

npm install --global foundation-cli

Depending on how your machine is configured, the command may fail with an EACCESS error. To get around this, run the command with sudo at the beginning:

sudo npm install --global foundation-cli

If you already have the Foundation 5 CLI on your machine, you will only be able to access one of the commands, depending on how your command line environment is configured.

If you want to remove the old CLI, run gem uninstall foundation. After testing this new CLI, if you want to go back to the old CLI, run npm uninstall foundation-cli --global.

Once you've installed the CLI, use the new command to start making a new project:

foundation new

Manual Setup

Basic Template

To manually set up the basic template, first download it with Git:

git clone https://github.com/zurb/foundation-sites-template projectname

Then open the folder in your command line, and install the needed dependencies:

cd projectname
npm install
bower install

Finally, run npm start to run the Sass compiler. It will re-run every time you save a Sass file.

ZURB Template

To manually set up the ZURB template, first download it with Git:

git clone https://github.com/zurb/foundation-zurb-template projectname

Then open the folder in your command line, and install the needed dependencies:

cd projectname
npm install
bower install

Finally, run npm start to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:

http://localhost:8000

To create compressed, production-ready assets, run npm run build.

CSS Download

If you aren't into Sass, we have a starter template with compiled CSS and JavaScript, as well as a starting index.html file for you to hack on. Just unzip and get coding!

Download CSS Version

HTML Starter Template

Start with this HTML template and adapt it to your needs. Be sure to include the .no-js class on the html tag of your template. Adding this class prevents flash of unstyled content for a number of foundation components.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

The folks at cdnjs host the compressed Foundation CSS and JavaScript for us. Just drop one of these <script> tags into your HTML and you're set:

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />

<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>

Package Managers

Foundation is available on npm, Bower, Meteor, and Composer. The package includes all of the source Sass and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors.

  • npm: npm install foundation-sites
  • Bower: bower install foundation-sites
  • Meteor: meteor add zurb:foundation-sites
  • Composer: php composer.phar require zurb/foundation
  • NuGet: Install-Package foundation-sites

Package Contents

Here's what comes in the package.

  • scss/: Source Sass files. Use this folder as a load path in Sass.
  • js/: Source JavaScript files. If you're using a build system, make sure foundation.core.js is loaded first.
  • dist/: Compiled files.
    • css/: Compiled CSS files. Includes minified and unminified files.
    • js/: Concatenated JavaScript files. Includes minified and unminified files.
      • plugins/: Standalone JavaScript plugins.

Other Integrations

The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our resources page to find even more ways to use Foundation.