Everything you need to know to build for the future.

Getting Started

Whether you are using Scss or CSS, we've made it easy to start a project so that you can help take over the world one responsive site at a time.

Foundation is developed in Sass, which is powerful CSS pre-processor that helps you write cleaner, more organized, CSS that you can more easily maintain over time without the typical headaches of vanilla CSS. On top of our minimal styling, we've written powerful Javascript plugins that will make useful interactions easier to implement across screen sizes.

What comes with Foundation?

We've got you covered when it comes to useful features and we've made it easy to take out what you don't need. Here's what you'll get when you create a project using our Gem or the default CSS version:

This plugin lets you give users a tour of your site our app. Joyride is easy to customize using CSS or our Scss variables.

How is a project structured?

We follow common patterns for directory structure that are logical and easily maintained. Below is an explanation of each file you'll get when you create a project using our gem or download via our customizer.

stylesheets

Includes foundation.css and foundation.min.css so you can choose which to use. We've also included app.css that you can use for custom styles that will sit on top of the Foundation core as overrides.

javascripts

All of our plugins and the necessary Javascript to make Foundation work properly. The most important file here is app.js, which is used to initialize the various plugins that you might want to use. All JS is initiated by default.

images

This directory includes all the images needed for Foundation, which actually aren't many. The only images included by default are used for Orbit. If you don't use Orbit, you may get rid of them.

index.html

A sample structure for page content, giving you something to use as a basic structural template for the rest of the pages in your project.

humans.txt

A way to tell the world about the people that worked on the sites you build, giving them kudos they deserve.

robots.txt

Give instructions to web robots so search engines know what to do when they crawl your site for content.

Using the Gem? You'll see a couple extra pieces in your project upon creation. These are:

sass/

Your main style folder is named sass/ and contains app.scss, which imports Foundation (or the parts you want). Your custom styles go below the @imports. You can see the compiled CSS in your stylesheets directory after you manually compile or watch. This directory also includes _settings.scss, which is used to control variables that help easily style Foundation.

config.rb

This file is used by Compass to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.

HTML Page Markup

Our markup structure is straight forward and gives you the flexibility you need to create to your hearts desires. Here's an example page that includes the basics:

Doctype & Head

We use the HTML doctype declaration to tell the browser what to expect. From there we've used a technique by Paul Irish that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.

Meta Viewport tag

This is used to make sure smaller devices use the device width as the viewport width.

Title Tag

This one is pretty self-explanatory. You're setting the name of the current page with this value.

CSS & Modernizr

The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.

CSS

We include foundation.min.css and foundation.css. The difference here is whether or not you want minified code or not (link whichever you want, but not both). You'll also notice app.css, which can be used for your own Foundation overrides.

Modernizr

We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.

Javascripts

Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.

jQuery

We stay as close as possible to the latest version of jQuery at all times. jQuery needs to be included before any Foundation JS.

Foundation JS

We include foundation.min.js by default, which includes all the available plugins. If you want to customize, we have every individual plugin commented for you to quickly pick and choose.

Using the Gem? you'll have slightly different markup:

CSS

You'll only see app.css since we @import foundation at the top and it compiles above our custom CSS.

JS

You'll see that we include each plugin separately so that you can easily remove what you don't need.

Get going!

Now that you understand the gist of what Foundation is and how it works, it's time to start a project! We've got two different ways for you to build projects with Foundation, a Compass Gem using Scss or a with plain CSS.