1. Meet the requirements.

Make sure your computer is set up correctly and familiarize yourself with the Mac command line.

• Git — Where the Foundation files come from
• NodeJS — The framework in which Bower runs
• Ruby — A programming language on which the Foundation CLI runs
• Bower — Software we use to actually download and upgrade Foundation
  

2. Load Foundation.

1. Open the Terminal app.
2. Type "cd ~/sites" to point the command line to your Sites folder. (Of course, you can put your projects anywhere, but Sites is most common.)
3. Type "open ." to open a new Finder window of your sites folder. This will be handy when you want to open files in your favorite text editor.
4. Type "foundation new sample-project --libsass". You should see it appear in the Finder window as well.
   

The project in these examples is "sample-project" but you can name yours anything you think describes your project. "Foundation new johnson-account-marketing-site" is as valid as "foundation new green-goblin-secret-lab", but sounds less cool. We suggest you name the folder something obvious and accurate.

3. Set up the CSS.

Fun fact: On its own, a new Foundation project has no CSS. That's because Grunt uses Libsass to create the appropriate CSS files every time you save a SCSS file in the "stylesheets" directory. Heck, it will even create that folder for you. Here's how to make it work:

1. In the Terminal, type "cd sample-project". That will tell the command line you want to work on the sample-project folder.
2. Run "grunt" to watch for Sass changes.
3. Look in the "scss" folder for a file called "app.scss". Open that file in your code editor of choice to choose which Foundation components to import selectively … or just write your CSS/SCSS.

Try it yourself

App.scss controls which components of Foundation load into your project. You'll rarely need everything, which is why you can turn off bits and pieces. But for now, just add body { background: #009; } to the app.scss file, and save the file. Watch as Compass creates a stylesheets folder, complete with CSS — and your project gets a dark blue background.

4. Set up the HTML

Foundation comes with an index.html file that contains many examples of how to use the framework itself. Handy tip: Chances are, you don't need any of the samples. If you already know Foundation, then all you need is the HTML, head and body elements. If you don't know Foundation, check out the docs and our notes on using the grid.

Open up the index.html file and delete everything in the body except for the <script> elements at the bottom. Then add your content.

 

Above: All you really need is the head, body and a few script links. Everything else is a clean slate.

tl;dr — time to sum up

Starting a Foundation for Sites project is as simple as getting the files and cleaning out the index.

1. Type "foundation new sample-project --libsass"
2. Type "grunt"
3. Edit the app.scss and _settings.scss files
4. Marvel as the stylesheets appear automatically (well, Grunt compiles the CSS for you).

What to upload

Not everything in a Foundation project needs to go to your production server. Really, all you need is:

• Your HTML files (or whatever generates HTML, like .php scripts, .rb files, etc)
• Your JavaScript files form the The bower_components folder
• The stylesheets folder

Your site needs SCSS files about as much as it needs PSDs. For that matter, you don't have to upload:

• The scss folder
• humans.txt
• README.md

And off you go.

---