(For more resources related to this topic, see here.)

Most importantly, you can apply your creativity to make the design your own. Foundation gives you the tools you need for this. Then it gets out of the way and your site becomes your own. Especially when you advance to using the Foundation's SASS variables, functions and mixins, you have the ability to make your site your own unique creation.

Foundation's grid system

The foundation (pun intended) of Zurb Foundation is its grid system—rows and columns—much like a spread sheet, a blank sheet of graph paper, or tables, similar to what we used to use for HTML layout. Think of it as the canvas upon which you design your website.

Each cell is a content area that can be merged with other cells, beside or below it, to make larger content areas. A default installation of Foundation will be based on twelve cells in a row. A column is comprised of one or more individual cells.

Lay out a website

Let's put Foundation's grid system to work in an example. We'll build a basic website with a two part header, a two part content area, a sidebar, and a three part footer area. With the simple techniques we demonstrate here, you can craft mostly any layout you want.

Here is the mobile view

Foundation works best when you design for small devices first, so here is what we want our small device (mobile) view to look like:

This is the layout we want on mobile or small devices. But we've labeled the content areas with a title that describes where we want them on a regular desktop. By doing this, we are thinking ahead and creating a view ready for the desktop as well.

Here is the desktop view

Since a desktop display is typically wider than a mobile display, we have more horizontal space and things that had to be presented vertically on the mobile view can be displayed horizontally on the desktop view.

Here is how we want our regular desktop or laptop to display the same content areas:

These are not necessarily drawn to scale. It is the layout we are interested in.

The two part header went from being one above the other in the mobile view to being side-by-side in the desktop view. The header on the top went left and the bottom header went right. All these make perfect sense.

However, the sidebar shifted from being above the content area in the mobile view and shifted to its right in the mobile view. That's not natural when rendering HTML. Something must have happened!

The content areas, left and right, stayed the same in both the views. And that's exactly what we wanted.

The three part footer got rearranged. The center footer appears to have slid down between the left and right footers. That makes sense from a design perspective but it isn't natural from an HTML rendering perspective.

Foundation provides the classes to easily make all this magic happen.

Here is the code

Unlike the early days of mobile design where a separate website was built for mobile devices, with Foundation you build your site once, and use classes to specify how it should look on both mobile and regular displays.

Here is the HTML code that generates the two layouts:

<header class="row">
  <div class="large-6 column">Header Left</div>
  <div class="large-6 column">Header Right</div>
</header>
<main class="row">
  <aside class="large-3 push-9 column">Sidebar Right</aside>
  <section class="large-9 pull-3 columns">
    <article class="row">
      <div class="small-9 column">Content Left</div>
      <div class="small-3 column">Content Right</div>
    </article>
  </section>
</main>
<footer class="row">
  <div class="small-6 small-centered large-4 large-uncentered 
    push-4 column">Footer Center</div>
  <div class="small-6 large-4 pull-4 column">Footer Left</div>
  <div class="small-6 large-4 column">Footer Right</div>
</footer>

That's all there is to it. Replace the text we used for labels with real content and you have a design that displays on mobile and regular displays in the layouts we've shown in this article.

Toss in some widgets

What we've shown above is just the core of the Foundation framework. As a toolkit, it also includes numerous CSS components and JavaScript plugins.

Foundation includes styles for labels, lists, and data tables. It has several navigation components including Breadcrumbs, Pagination, Side Nav, and Sub Nav. You can add regular buttons, drop-down buttons, and button groups.

You can make unique content areas with Block Grids, a special variation of the underlying grid. You can add images as thumbnails, put content into panels, present your video feed using the Flex Video component, easily add pricing tables, and represent progress bars.

All these components only require CSS and are the easiest to integrate. By tossing in Foundation's JavaScript plugins, you have even more capabilities.

Plugins include things like Alerts, Tooltips, and Dropdowns. These can be used to pop up messages in various ways.

The Section plugin is very powerful when you want to organize your content into horizontal or vertical tabs, or when you want horizontal or vertical navigation. Like most components and plugins, it understands the mobile and regular desktop views and adapts accordingly.

The Top Bar plugin is a favorite for many developers. It is a multi-level fly out menu plugin. Build your menu in HTML the way Top Bar expects. Set it up with the appropriate classes and it just works.

Magellan and Joyride are two plugins that you can put to work to help show your viewers where they are on a page or to help them navigate to various sections on a page.

Orbit is Foundation's slide presentation plugin. You often see sliders on the home page of websites these days. Clearing is similar to Orbit except that it displays thumbnails of the images in a presentation below the main display window. A viewer clicks on a thumbnail to display the full image. Reveal is a plugin that allows you to put a link anywhere on your page and when the viewer clicks on it, a box pops up extra content, which could even be an Orbit slider, is revealed.

Interchange is one of the most recent additions to Foundation's plugin factory. With it you can selectively load images depending on the target environment. This lets you optimize bandwidth between your web server and your viewer's browser.

Foundation also provides a great Forms plugin. On its own it is capable. With the additional Abide plugin you have a great deal of control over form layout and editing.

Summary

As you can see, Foundation is very capable of laying out web page for mobile devices and regular displays. One set of code, two very different looks. And that's just the beginning.

Foundation's CSS components and JavaScript plugins can be placed on a web page in almost any content area. With these widgets you can have much more interaction with your viewers than you otherwise would.

Put Foundation to work in your website today!

Resources for Article:

Further resources on this subject:

• Quick start – using Foundation 4 components for your first website [Article]
• Introduction to RWD frameworks [Article]
• Nesting, Extend, Placeholders, and Mixins [Article]