Using the Foundation Framework for Responsive Web Design

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

Sample Website CSS

Preview of Sample Website

Preview of sample website layout

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

Simplified CSS using Foundation

Preview of Updated Website

Updated website using the Foundation Framework

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 .collapseremoves 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 Classes

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.

Foundation is a great tool to take advantage of when upgrading a site using Responsive Web Design. Check them out at The article was originally posted at I invite any questions or comments through Email or Twitter.

About The Author

John MacAdam is a Professional Engineer and Mobile Software Developer from Columbus, Ohio. John builds websites & apps to help people reach more mobile users. You can learn more on or connect with him on Twitter or LinkedIn.

Professional transportation engineer, web designer, and mobile app developer from Columbus, Ohio.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store