Setup your Start Files

Begin by downloading the complete version of Foundation by clicking the "Download Everything" button.

Next, you need to remove all the sample code after the body tag down to just above the two JavaScript calls to jquery.js and foundation.min.js.

Now we will add our own CSS override in case we want to modify the look and feel of the default styling provided. Create a new "override.css" file and linked it just after the current link to "foundation.css" in the head of your index.html file (my link was about line 8).

Foundation also provides you with an empty folder called img which I immediately renamed "images" because that's what I am used to using for all my paths.


Exploring the Grid

Foundation is setup using a 12 columns grid

Everything lives in a division with a class = row and inside that is another division with class- columns. There can be multiple columns within a single row. This where organization and comments is REALLY important. I put a comment at the end of every column and row.

Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. Specify the widths of each column with the small-#, medium-#, and large-# classes.

Mobile First Design

You should specify classes starting with phone (small-) followed by any changes for tablet (medium-) and ending up with desktop (large-). The break points for foundation are stored in the "foundation.css" on lines 4-22. They are specified in EM so you have to multiply the value by 16 to get a px value. For example the breakpoint between small and medium is 40.063em which comes out to be 641px wide.

Grid Note:

These two columns are set to small-12 and medium-6 which means that the large inherits the medium setting of 6 columns wide.

Swapping out background images

Foundation provides a simple to change background images in a division or any other HTML container. For this demonstration I will change the image in the header of this page.

First I copied the sample code and then modified it to use the paths for my images and also added a third [] for medium. Since I want this header image to go the full width of the page, I will not use a div with a class of row. Instead I will simply use it with the header tag. Since these are background images and the header is currently empty, I have to go into my override.css and set the height of the header. You can use this sample txt file to make your media queries match the foundation break points.

Top Bar

Title Area

The top bar or navigation bar is broken in several parts. The first part is an unordered list with a class of title area. It contains a optional h1 for the site name. If you don't want the site name, remove the h1 and its contents. For my example I am removing the site name and leaving the li blank. The other part of the title area is a phone navigation icons which has an optional span tag for MENU.

Side Navigation

The second part of the top bar is a section tag with a class of top-bar-section. It can contain a left side and a right side. These two sides get collapsed into a single drop-down for phone navigation. In this example I am going to use the left side for navigation and the right side for a search form. There appears to be a bug in the CSS for the Topbar text input is too big which requires manually rearranging the CSS (I moved lines 4284-4393 to line 1253). I also added a li with a class of divider to visually separate the main menu items. Products contains a nested ul with li for sub menu items. Notice that you have to apply a class of has-dropdown to the parent as well as a class of dropdown to the nested ul. I wish they had done this a smarter way because it will cause problems with some CMS.

Sticky Top Bar

If you want the menu bar to stick to the top of the browser window all you have to do it wrap the nav tag in another div and then add the class of sticky to the div. Additionally, you can add a class of contain-to-grid to this same nav wrapper div to keep the nav elements within the maxim page width.

Grid Note:

These two columns are set to small-12 and large-4 which means that the medium inherits the small setting of 12 columns wide.

Block Grid

The block grid is designed to display photos or text in a variable column grid. Notice that the pictures below are of different orientations yet they still present nicely. To create a block grid all you do is a class for small, medium and page and then a number representing the columns for each device.

I wrapped all my images in figure tags with figcaptions. There is a massive amount of margin assigned to a figure so I had to set it to 0 in my override.css.

Orbit Slider

The orbit slider is setup inside an unordered list with images and a div inside each li. Its really easy to use.

This is a callout panel.

I set this grid up so that on the phone these would stack and on the tablet they would be side by side. This callout panel has a radius as by adding the class of radius.


Setup the Tabs
Setup the Content

Tabs help you organize and navigate multiple pieces of information in a single area. They can be used for switching between items in the container.

Tabs are setup in two parts contained inside a standard column. Part one is a definition list that has all the tabs listed.

Part two is a series of divisions that contain the constant that gets displayed.

The quick brown fox jumps over the lazy dog


If you want to include a thumbnail image in your document, you can add a class of th and it's done. In this case I also added a class of right to the figure tag to make it float to the right.

Storm chasing photographer Mike Hollingshead makes a living following the worst storms in America, from snarling tornadoes chewing up the Kansas farmland to supercell thunderstorms massing over the Dakotas.

A Nebraska-native, Hollingshead used to watch the Midwest's extreme weather from hills that overlooked his town. After seeing some "crazy storm photos" on the Internet, Hollingshead knew he had to track down the powerful storms. Armed with only a map and a video camera, Hollingshead drove his sedan out to Iowa, where he lucked into a tornado on his first day.

Fifteen years later, Hollingshead is still chasing storms, often into danger. His style is to get right in the path of the storm. While he says it's less scary than you think — because most of the storm consists of heavy rain — it's still extremely stressful.


Split buttons can provide navigation links

Where to Go?

Single buttons can link you to some other material. This is a button with a class of round and alert

Round & Alert

Dropdown buttons look a lot like slipt buttons and provide multi-level naigation

Dropdown Button

Button Groups can also be useful for something

Building Forms

Creating a form in Foundation is designed to be easy but extremely flexible. Notice that you wrap the rows with the form tag.