Responsive design is a technique for creating a website or web application that can adapt to a client’s screen or interface. In responsive design a flexible layout, together with flexible content and media queries, is used to change how the page is rendered on the client’s screen. Although the basics of responsive design on the surface are simple, there are many design challenges. By using a framework, you can enter the design process better prepared to meet these challenges.

One framework that I prefer to use is Foundation Framework by Zurb. Not only is Foundation a great asset, but it’s also an excellent learning tool because many of the problems of responsive design are solved in an organized and well thought-out manner. It is free to use under an MIT license.

Foundation, as the name suggests, provides a base for starting a new responsive design project. Simply put, Foundation lacks opinion: It provides a responsive grid and the basic CSS that is required to get started; then it stays out of the way. This allows your creative process to work independently of the framework and lets the end-product remain unique. Heavily opinionated frameworks can run the risk making web applications looking “cloned”, where the end product looks and feels much like the framework that was used to build it.

Foundation is independent of the platform, but because I use ASP.NET MVC, I have, as a community contribution, created an ASP.Net MVC package that can be used together with this article. This is feature-for-feature identical to the source, but I have adapted it for easy installation using NuGet, and added a basic template for getting started with Foundation in MVC.

Foundation basics

Installing Foundation in .Net MVC

Foundation is available as a NuGet package in order to make the setup process quick and simple. In a new ASP.Net MVC project, use the NuGet package manager to search for “Zurb”, next click “Install”. Once the package downloads, there are a few manual steps to complete the install. The entire process takes about two minutes to complete.

Step 1 – Install NuGet package (screenshot)

Installing Foundation with NuGet

Step 2 – Update the layout

• Open the /Views/_ViewStart.cshtml
• Change the Layout to _Foundation.cshtml like the example below:

Step 3 – Remove the default theme

Once the ViewStart has been updated, replace the default Index.cshtml.

• Rename ~/Views/Home/Index.cshtml to Index.cshtml.exclude (or delete the file)
• Rename ~/Views/Home/Foundation_Index.cshtml to Index.cshtml
• Rename ~/Content/Site.css to Site.css.exclude (or delete the file)

Step 4 – Add bundling and minifaction

Add this to Application_Start in Global.asax:

Step 5 – Run the project

You are now ready to begin building your MVC project using Foundation.

Core files

The core CSS files that are installed provide the basics for any web project. A flexible grid provides the layout, basic typography, CSS resets, and default media styles that support responsive content.

With Foundation additional UI elements such as a rotator called Orbit, a tab control, and modal popup are included as jQuery plugins. Each UI element is able to adapt to the users screen size. It’s important to note, that these UI elements are very minimal and easily styled using CSS.

The grid

Foundation uses a twelve column grid system. The grid system is much like other CSS frameworks, but contains some additional key features. First and foremost the grid is fluid, which is necessary for responsive design. Additionally the grid has preset breakpoints that allow the columns to reorder and adapt to various screen sizes. Another important key feature is nesting. Nesting allows any column to contain additional rows and columns, also divisible by twelve. To round things off, we are also given the ability to define source ordering. Source ordering is a feature that gives us the option of defining columns out of order via code different than the display order. Source ordering has many uses, from SEO, to giving the framework hints as to how we want our breakpoints to handle our content.

Grid construction

There are three primary classes used to build a grid layout. The outermost element of the grid will be the “container” class. The container is a simple wrapper that provides padding around the grid; this ensures that the content doesn’t ride the edge of the screen at lower resolutions. The container is not a required element.

Example:

Inside of the container we can add any number of “row” elements needed. A “row” defines a group of content that can be divided in to a maximum twelve columns. While twelve columns may sound restrictive, nested columns are supported by Foundation in order to allow maximum customization.

Example:

Once a “row” has been defined we need to determine how the row will be divided. To create columns within a row we’ll use the “columns” class. When defining columns in Foundation we write the column’s width out as they would be spoken, for example: “six columns”. Using this syntax we can create any combination of columns as long they are evenly divisible by twelve. If our design requires additional columns, we can add a nested row giving us up to twelve additional columns.

Example:

Example:

Examining mobile.css

The mobile.css file in Foundation is a small, but important one. The mobile.css contains all of the media query break points used by the grid layout. The breakpoints are designed to turn the rows and columns of the grid into a stacked single column layout. Stacking columns is one method of reorganizing content in a responsive design. Since small resolution devices normally have a longer vertical axis, the best experience can be achieved by stacking the content in to a single column. This method allows the content to be presented in a way that eliminates the need to zoom, while only requiring the user to scroll along the longest axis.

Responsive design

A simplified excerpt from mobile.css

In Foundation another relevant UI element is the button. A media query for the button element provides the best way of widening the buttons on small resolution devices. This is done to provide an easier target for users with a touch interface. All of this is done using a very simple media query that sets the button to “display: block”. By adding “display: block” the browser is told to make the element occupy the entire horizontal space.

This simple code makes for a better UX

Foundation in .Net MVC

_Foundation.cshtml and Bundling

_Foundation.cshtml replaces the default MVC template _Layout.cshtml. In this file the CSS and JavaScript necessary to use Foundation are loaded. Methods are included in the template to further optimize the project through bundling. When debugging is disabled, the methods in Bundles_Startup are called and the core CSS and JavaScript files are replaced with a single URL request.

A simplified excerpt from _Foundation.cshtml

Default Index.cshtml

The Foundation NuGet package ships with a full-featured example page “Index.cshtml” which demonstrates most of the elements that Foundation supports. The index page is a tool for learning about Foundation and how features are implemented. Tabs, buttons, modal dialogs and the grid are all showcased and should be experimented with.

Ready to build

Once Foundation has been installed your project is ready to be built and ran. As a final check, the Index page should be loaded and checked to validate the installation. At this point the project is ready to be customized to meet your needs.

Tutorial: A single page responsive design

Introduction

Let’s get a firm understanding of Foundation by building a demo site. This site will be a single page site focused on advertising a single product. The page will have header and footer navigation and be broken in to sections: A showcase which will catch the users attention, a features section where we highlight the products main selling points, a benefits section which further explains our product, and a media section for videos.

In this tutorial we’ll learn how to prototype a page using Foundation and apply CSS overrides to create a custom style. The end result will be a single page responsive design that will no longer resemble the default look and feel of Foundation, but will encompass all of the responsive characteristics of the framework.

To get a full understanding of how Foundation works try resizing your browser after each step in the tutorial.

Completed project – full resolution

Completed project – mobile

Step 1: File, new project

Begin by opening Visual Studio and starting a new ASP.NET MVC project. Any MVC 3 project template may be used with Foundation, in this example we’ll choose the Empty template since we won’t be using any of the additional code provided in the other project templates.

A completed project for this tutorial is available on GitHub. The commits in the GitHub project follow the tutorial steps given below. If you are not a GitHub user, you may download the completed project from this page by clicking download as a zip.

1. File > New > Project
2. Visual C# > Web
3. Select ASP.NET MVC 3 Web Application
4. Name the project
5. Ok
6. Select Empty > OK
7. At this point you may remove any preinstalled packages that you may not use. This is optional. In the example all packages are removed, everything we need will be installed by Foundation:
8. Manage NuGet Packages > Installed packages
9. For each package choose > Uninstall

Step 2: Install Foundation

We are now ready to install Foundation.

1. *Manage NuGet Packages > Online
2. Search Online: Zurb
3. Select Zurb_Foundation MVC3 > Install
4. Follow the instructions provided in the ReadMe.txt, also available at the beginning of this article “Foundation Basics: Installing Foundation in ASP.NET MVC”

*Optional: install with package manager console: PM> Install-Package Zurb_Foundation_MVC3

Step 3: Run the project

If you’re following along using the Empty template, create new home controller. Then test the project to ensure we have installed everything correctly.

1. *Right click Controllers > Add > Controller
2. Controller name HomeController
3. Template EmptyController
4. Build and run the project
5. Test the page by resizing the browser
6. Verify there are no broken resource links

*Internet and Intranet project templates have a default home controller.

Step 4: Install prototyping helper

In this step we will install a package that will help us to quickly prototype our design. This package is not required by Foundation but will reduce the amount of markup needed to create our example page. The Prototyping for MVC package provides a fluent API that creates Lorem Ipsum text and placeholder images at runtime using simple helper extension methods. I created the Prototyping package for MVC specifically for reducing prototyping markup.

1. *Manage NuGet Packages > Online
2. Search Online: Prototyping
3. Select Prototyping_MVC > Install

*Optional: install with package manager console: PM> Install-Package Prototyping_MVC

Step 5: Set the viewport

Since mobile users shouldn’t need to pinch and zoom to view our site, we should set the initial scale to 1. This will ensure that users see the site at their native resolution. Setting the “initial-scale” does not prevent the user from zooming if they need to.

1. Open _Foundation.aspx
2. Locate the viewport meta tag
3. Add, “initial-scale=1.0” to the content attribute.

Step 6: Create a page header partial

Let’s start our template by creating a reusable header. Even though this example will result in a single page design, using partials will help us organize our code and make our code more readable and reusable.

The header will contain several elements. First, we’ll add a container that will wrap our content. Next we define a row and divide it up using the Foundation columns class to define each elements width. Since this will be our header, the first element will contain our logo and the second will contain our main navigation. The navigation will be constructed of list items and will use Foundation CSS classes for styling.

1. Right click Views / Shared > Add > View
2. Check the “Create as a partial box”
3. Name the partial “_Header”
4. In the newly created _Header.cshtml file:

Step 7: Add the header

We’ll add the header to our page using render partial.

1. Open _Foundation.cshtml
2. Above RenderBody, display the partial using @Html.Partial(“_Header”)

Standard menu

Mobile menu

Step 8: Update the index

Our installation has provided us with a default index page Home/Index.cshtml. We’ll be creating all new content here, we’ll clear out the example code and begin adding our own layout.

Using

At the top of the page we need to reference our Prototyping package that was installed in step 4.

1. Open Index.cshtml
2. Select all and delete the contents
3. Reference the Prototyping helper with:
   @using Prototyping.Ipsum
   @using Prototyping.Placeholdit
   @*The prototyping helper allows us to build fast demo code*@
   @using Prototyping.Ipsum
   @using Prototyping.Placeholdit

Showcase

Next we create our showcase element. The showcase element will contain two elements of equal width. The first showcase element will describe our product and provide a button to “Buy Now”, the second showcase element will be an image, later on we’ll replace this image with a rotator.

Features

Let’s add our feature section below the showcase. The feature section will be a simple three up display. Three equally spaced elements will occupy the row.

Features – standard

Features – Mobile

Benefits

Following the feature section, add the benefits section. The benefits section will be divided in to two elements. The width of these elements will be eight and four columns. The first will be used to explain the benefits of buying our product, the second element will instruct us on how to buy.

Media

The media section will be our final section on the page before the footer. This section will contain two rows. The first row will span the full width of the page, we do this by making it twelve columns wide. The second row will divided into two equal parts and will be used to display two videos. For simplicity we’ll use placeholder images, however flexible videos are supported in Foundation.

Step 9: Create and add a footer

In the same manner we created the Header we’ll create a footer. In the footer we’ll define two sections. The first will contain a row of two equal elements, one for contact information and the second we’ll use for navigation. The second section will be used for copyright information and span the full width of the page.

On the ‘contact us’ and ‘menu’ elements we’ll add source ordering using the “push” and “pull” classes provided by Foundation. By using source ordering we can change the order in which these elements are rendered in the browser. Take a moment to resize the browser and see how elements with source ordering react at different resolutions. This can be helpful tool to instruct the browser of our elements visual order.

1. Right click Views / Shared > Add > View
2. Check the “Create as a partial box”
3. Name the partial “_Footer”
4. In the newly created _Footer.cshtml file:

1. Open _Foundation.cshtml
2. Below RenderBody, display the partial using @Html.Partial(“_Footer”)

Wireframe prototype

Step 10: Style the page

One of the key features of Foundation is how easy it is to style. By overriding the default Foundation CSS styles we can create a design that no longer resembles the framework but still benefits from the responsive design features.

Base style

First we create a base style for the bulk of the page, these are non-Foundation elements. The body element will serve as a backdrop for our entire site. A patterned background* used and our sections will overlay transparent colors on top to create a uniform look while breaking up the content. Vertical whitespace is added by giving each section some padding.

*The background pattern can be downloaded from http://subtlepatterns.com/?p=944

1. Open app.css and add the following:

1. Open _Foundation.cshtml and remove the container element from round the RenderBody. We no longer need this element since we provide padding in our CSS.

Customize buttons

Now we’ll customize the style of the buttons. Foundation has provided some nice styles for buttons. By overriding their styles we can change the color without affecting the behavior of the element. In this example, we’ll override the default “button” class and “nice” class. Let’s create a new “orange button” class.

1. Open app.css and add the following:

Customize navigation

Now we’ll create a custom navigation style. The CSS for navigation is a bit more complex than the button we styled in the last step. Since the navigation adapts quite differently at mobile resolutions we’ll need to write some media queries to adjust the style for mobile.

1. Open app.css and add the following:

1. View these changes in the browser, note the visual errors when the browser resizes
2. Add the following media query to the style

Create a slider

Creating a slider or image rotator in Foundation requires a few changes to our markup and some minimal JavaScript. To wrap up this tutorial we’ll replace our showcase image with the Orbit slider from Foundation.

1. Locate the static product image: @Html.Placehold(width: 468, height: 304, text: “product rotator”)
2. Replace image with the following code:

1. Add the following JavaScript to the end of the page to activate the element:

Conclusion

Learning responsive design can be a daunting task, but finding the right tools can make all the difference. Foundation with ASP.NET MVC can accelerate responsive design projects. Foundation’s flexible and configurable grid allows for clean and organized markup, whilst leaving the design up to you.

For more information about responsive design and how to apply it to your workflow, see my previous article “A Foundation for the web“.

Completed project – Using Foundation and ASP.NET MVC

The demo that is built in the tutorial of this article is now a web page. http://edcharbeneau.github.com/FoundationSinglePageRWD/