Foundation
Jump to Nav

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

    <!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.min.js"></script>
        <script src="js/vendor/what-input.min.js"></script>
        <script src="js/foundation.min.js"></script>
        <script>
          $(document).foundation();
        </script>

      </body>
    </html>

## CDN Links

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.0/css/foundation.min.css">

    <!-- Compressed JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></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.