Using the Foundation Framework for Responsive Web Design

Request a PDF of this post

A development framework can assist tremendously when upgrading to a responsive website. One of the most robust responsive web frameworks is Zurb Foundation. This post dives into using Foundation when converting a non-responsive website into a responsive website. At the time of writing the latest version of Foundation was 6.3 according to the Foundation Documentation.

Sample Website Layout

Here is a sample website layout with a logo, navigation, a featured section, a two column section and a footer. As seen in the code this layout was created with CSS floats.

Sample Website HTML

<body>

  <header>
    <div id="logo"></div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>

  <main id="featured"></main>

  <section id="posts">
    <article></article>
    <article></article>
  </section>

  <footer></footer>
</body>

Sample Website CSS

body {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#logo {
  float: left;
  width: 25%;
  height: 24px;
}

nav {
  float: left;
  width: 75%;
  text-align: right;
}

main,
#posts {
  width: 100%;
  float: left;
}

#posts article {
  float: left;
  width: 45%;
}

#posts article:first-child { margin-right: 10%; }

footer { clear: left; }

header, main, section { margin-bottom: 40px; }

Preview of Sample Website

This layout is not terrible on a mobile device but there are a few issues to address:

  • The menu does not fit
  • Content becomes too tight in the two column section
  • The logo becomes too small

Ideally we would change the layout using media queries to create a mobile friendly layout for smaller screens. However, the Foundation Framework simplifies this process. Let’s upgrade the sample website using Foundation.

Updated HTML using Foundation

<body>
  <header class="row collapse">
    <div id="logo" class="columns small-12 medium-3"></div>
    <nav class="columns small-12 medium-6 menu-centered">
      <ul class="menu align-right"> ... </ul>
    </nav>
  </header>

  <main id="featured" class="row"></main>

  <section id="posts" class="row">
    <article class="columns small-12 medium-5"></article>
    <article class="columns small-12 medium-5"></article>
  </section>

  <footer class="row">
    <span class="hide-for-large">Download our App!</span>
  </footer>

</body>

Simplified CSS using Foundation

body {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#logo {
  float: left;
  width: 25%;
  height: 24px;
}

nav {
  float: left;
  width: 75%;
  text-align: right;
}

@media screen and (min-width: 640px) {
  .menu-centered {
    text-align: right;
  }
}

#posts {
  width: 100%;
  float: left;
}

#posts article {
  float: left;
  width: 45%;
}

#posts article:first-child { margin-right: 10%; }

footer { clear: left; }

header, main, section article { margin-bottom: 40px; }

Preview of Updated Website

There are a few Foundation items I would like to point out here:

  • The Grid
  • Visibility Classes
  • Helper Classes
  • Overriding Foundation Styles

The Grid

One of the most basic features of Foundation Framework is the layout grid. I like to visualize the grid as a table with columns and rows. Elements within the page are fit within this grid layout. Notice that many of the elements were given a class of .row. Foundation stacks each row vertically and assumes a 100% width of their parent element. Child elements of the rows are given a class of .columns and an optional column width such as small-#. Our header element is being treated as a row that is split into, by default, 12 columns.

The #logo is given a class of .small-12 and a class of .medium-3. This is our way of telling the element to span all 12 columns on small screen sizes and only 3 columns on screen sizes medium or larger. Foundation is a mobile first framework. This means that any declarations will be applied “up” in screen size until told otherwise. The .small styles will apply at all screen sizes unless specifically overridden.

Two other items to note about the Grid relate to our <header class="row collapse"> element. On medium-sized screens and above we are giving the <nav class="columns medium-6 ..."> half of the row width (6 of 12). Even though there are 9 columns left in this row Foundation floats this column to the right since it is the last column in the row. Also, notice the class of .collapse on the row. By default Foundation will add padding to each column. The class of .collapse removes this padding which keeps our navigation links flush with the right side of our layout.

Visibility Classes

Another useful Foundation feature is is called visibility classes. This is a simple way to show and hide elements at different screen sizes.

The updated example added a link in the footer to download our mobile app. For the sake of example we only want to show this content to users on a smaller screen, most likely a mobile device. By simply adding the class of .hide-for-large we are telling Foundation to hide this element at screen sizes large and above. Note that we can also use a class to .show-for-small-only for a similar result. Foundation also provides useful classes to show-for-landscape or show-for-portrait.

Helper Classes

Another Foundation feature to point out is a helper class. If we would like to align text of a specific element we can add a class such as .text-justify. Also, we can change the alignment based on screen size. Take this element for instance: <p class="text-left medium-text-justify"> ... </p>. Text will be left-aligned on smaller screens but justified for medium sizes and above.

Overriding Foundation Styles

Most of these Foundation classes provide the exact styles you are looking for. However, from time to time you may want to customize the classes a bit further. Each class is easily customizable. In our example we converted our navigation ul into a Foundation menu. The parent nav element has a class of .menu-centered to center the menu per Foundation Menu documentation. This is exactly what we want on smaller screens. For large screens we would like to keep the menu right aligned. Our example added a media query to override the Foundation styles.

@media screen and (min-width: 640px) {
  .menu-centered {
    text-align: right;
  }
}

Foundation is a great tool to take advantage of when upgrading a site using Responsive Web Design. Check them out at http://foundation.zurb.com/.

Thanks for reading this introduction to Foundation. I invite any questions or comments through Email or Twitter.

Get this Guide as a PDF

Subscribe to the Apps by John Newsletter. I will send you a PDF of this guide and send announcements of future guides!