There are many ways to install Foundation, but if you're just getting started, we have a few suggestions.
Install with Package Managers
npm install foundation-sites
pnpm install foundation-sites
yarn add foundation-sites
bower install foundation-sites
gem install foundation-rails
meteor add zurb:foundation-sites
php composer.phar require zurb/foundation
Here’s what comes in the package.
Install with Foundation CLI
Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you.
Install Foundation CLI:
npm install --global foundation-cli # or sudo npm install --global foundation-cli
Then use to create a new Foundation project:
After you selected “Foundation for Sites”, Foundation CLI will ask you which template you want to use. You can choose between:
Recommended for beginners
A basic template to begin to use Foundation. It includes:
- Foundation for Sites pre-configured.
A tool to convert your SASS/SCSS files to CSS.
Starter HTML file
A basic file to help you to use basic Foundation component (including the new XY grid !)
Recommended for experienced (or curious) users
A more advanced project including Foundation and a build process with:
- Handlebars HTML templates with Panini
- Sass compilation and prefixing
- Built-in BrowserSync
Foundation 5 users: 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.
To remove the Foundation 5 CLI, run
gem uninstall foundation. After testing the Foundation 6 CLI, if you want to remove it to go back to the old CLI, run
npm uninstall foundation-cli --global.
Windows users: make sure you've python v2.7 available in your node environment since it's required by the node-gyp tool. There are two way to achieve this
- Install the windows-build-tools (recommended) and make python afterwards accessible via
npm config set python "%USERPROFILE%\.windows-build-tools\python27\python.exe"
- Install python (not recommended) and add it to your system environment variables
The first way is recommended if you've not installed pythong v2.7 yet as it doesn't affect your machine outside the node environment. In case you've already installed python v2.7 you may of course skip both ways and start using foundationc-cli immediately.
<script> tags into your HTML and you’re set:
From Foundation 6.4, flex is enabled by default and only the new XY Grid is available. However, others CSS versions are available for backward compatibility and the most common usage cases. For others uses and advanced customization, we recommand to build Foundation with custom settings (see others installation methods).
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href="https://firstname.lastname@example.org/dist/css/foundation-float.min.css" integrity="sha256-sP0p6J7SbJGiJ2gkdY1nkVsLgdwiFN2kI370lU+zacQ= sha384-yZLxxcD8nfiSt1qfKJWwHwtkL58WZDTlkBnZN60qr3ZS35+LDsmUF2JHLxdyZ+KU sha512-Z3WbpfWFSsK2dBvoSYZnMvPmxSJUa5cxj3TYlmyj6cq8IXy7iB2nlUk+jjms8gnz4HmpQk/yhRSlRzW7keoSlg==" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href="https://email@example.com/dist/css/foundation-prototype.min.css" integrity="sha256-ksLmXa0k3ACbX6azB9g6l7XlmSKFBkuH0DXKNwULXtE= sha384-RGTvu65DAT+yLQsTj5tnITDrMfrS5mbajNAYILSg4hHr9vRr/3Y9q0WAdChqLKfx sha512-KMJ7XYrv5UcwEvJFaYnLSdN5O3fT7aQvjed//LQPB3AsN4VPA/wXG9j4x4vKZkjNmU/U8aZC9Ac3FYxs9lPXcw==" crossorigin="anonymous"> <!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction --> <link rel="stylesheet" href="https://firstname.lastname@example.org/dist/css/foundation-rtl.min.css" integrity="sha256-jvk46bzgetf2fy3FF19toDOoy9CG3aFqZfd229doSyo= sha384-w6E9ynA6OV6MFswc7C8nr8QoBiRtqqOKF/5M9ZVyVDDyrUPLI75xizNuXgRZxWK5 sha512-7MZk47L+5Mj6Y0dP3NuB2aqlNdDgzTlCf8m50nvgnCHUbxZ9KabCy8VUzQAl/DqDKwR7E6JsCf1MUjkfCiVzJw==" crossorigin="anonymous">
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 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.