There are several frameworks that take away the hard work of implementing a responsive design for a website, that will render pages appropriately according to the size of the window. Ed Charbeneau has pioneered the use of Zurb's Foundation Framework in ASP.NET MVC and describes how easy it is to install and use
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 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.
Installing Foundation with NuGet
@{
//This is the default MVC template
//Layout = "~/Views/Shared/_Layout.cshtml";
//This is the Foundation MVC template
Layout = "~/Views/Shared/_Foundation.cshtml";
}Once the ViewStart has been updated, replace the default Index.cshtml.
Add this to Application_Start in Global.asax:
#if !DEBUG
//TODO: Add your favorite bootstrap framework
Bundles_Startup.BundleCss();
Bundles_Startup.BundleJs();
#endifYou are now ready to begin building your MVC project using Foundation.
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.
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.
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.
<!-- Container element -->
<div class="container"></div>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.
<div class=”container”>
<div class=”row”>
<!-- define columns here -->
</div>
</div>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.
<!-- Two elements of equal width -->
<div class=”container”>
<div class=”row”>
<div class=”six columns”>Left column</div>
<div class=”six columns”>Right column</div>
</div>
</div>Example:
<!-- Two columns of equal width -->
<div class=”container”>
<div class=”row”>
<div class=”six columns”>
<div class=”row”>
<!-- four elements, nested-->
<div class=”two columns”>Small</div>
<div class=”four columns”>Big</div>
<div class=”two columns”>Small</div>
<div class=”four columns”>Big</div>
</div>
</div>
<div class=”six columns”>Right column</div>
</div>
</div>
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
/* media query */
@media only screen and (max-width: 767px) {
.row {
width: 100%; /* max the width */
}
.columns {
width: auto !important; /* fill the width */
float: none; /* stack the columns */
}
}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
@media only screen and (max-width: 767px)
.button {
display: block;
}_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
<!-- Included CSS Files -->
<!-- Combine and Compress These CSS Files -->
@if (HttpContext.Current.IsDebuggingEnabled)
{
<link href="@Url.Content("~/Content/core/grid.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/core/ui.css")"
rel="stylesheet" type="text/css" />
…
<link href="@Url.Content("~/Content/core/reveal.css")"
rel="stylesheet" type="text/css" />
}
else
{
<link href="@Url.Content("~/Content/core/min.css")"
rel="stylesheet" type="text/css" /> }
A simplified excerpt from Bundles_Startup.cs
public static class Bundles_Startup
{
…
public static void BundleCss()
{
Bundle cssBundle = new Bundle("~/Content/core/min.css", typeof(CssMinify));
…
cssBundle.AddFile("~/Content/core/grid.css");
cssBundle.AddFile("~/Content/core/ui.css");
…
cssBundle.AddFile("~/Content/core/reveal.css");
BundleTable.Bundles.Add(cssBundle);
}
}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.
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.
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
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.
We are now ready to install Foundation.
*Optional: install with package manager console: PM> Install-Package Zurb_Foundation_MVC3
If you’re following along using the Empty template, create new home controller. Then test the project to ensure we have installed everything correctly.
*Internet and Intranet project templates have a default home controller.
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.
*Optional: install with package manager console: PM> Install-Package Prototyping_MVC
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />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.
<div id="siteHeader" class="container">
<div class="row">
<div class="four columns">
<h1>Logo</h1>
</div>
<div class="eight columns">
<ul class="nav-bar">
<li><a href="#showcase" class="main">Showcase</a></li>
<li><a href="#features" class="main">Features</a></li>
<li><a href="#benefits" class="main">Benefits</a></li>
<li><a href="#media" class="main">Media</a></li>
</ul>
</div>
</div>
</div>We’ll add the header to our page using render partial.
@Html.Partial("_Header")
<!-- container -->
<div class=”container”>
@RenderBody()
Standard menu
Mobile menu
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.
At the top of the page we need to reference our Prototyping package that was installed in step 4.
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.
<div id="showcase">
<div class="row">
<div class="six columns">@Html.Ipsum().h1().h4(wordCount: 8)
<p class="action">
<a href="#" class="nice large orange button">Buy Now</a>
</p>
</div>
<div class="six columns">
@Html.Placehold(width: 468, height: 304, text: "product slide 1",
backgroundColor:"A7D5F2")
</div>
</div>
</div>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.
<div id="features">
<div class="row">
<div class="four columns">@Html.Ipsum().h3()
@Html.Placehold(width: 300, height: 200, text: "A")</div>
<div class="four columns">@Html.Ipsum().h3()
@Html.Placehold(width: 300, height: 200, text: "B")</div>
<div class="four columns">@Html.Ipsum().h3()
@Html.Placehold(width: 300, height: 200, text: "C")</div>
</div>
</div>
Features – standard
Features - Mobile
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.
<div id="benefits">
<div class="row">
<div class="eight columns">
@Html.Ipsum().h3().p().h4().p().h4().p()
</div>
<div class="four columns">
@Html.Ipsum().h3().p(paragraphCount: 1, sentenceCount: 3)
<p>
<a href="#" class="nice orange button">Buy Now</a>
</p>
</div>
</div>
</div>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.
<div id="media">
<div class="row">
<div class="twelve columns">
@Html.Ipsum().h3()
</div>
</div>
<div class="row">
<div class="six columns">
@Html.Ipsum().h4()
@Html.Placehold(width: 468, height: 304, text: "product video")
</div>
<div class="six columns">
@Html.Ipsum().h4()
@Html.Placehold(width: 468, height: 304, text: "product video")
</div>
</div>
</div>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.
<div id="siteFooter" class="container">
<div class="row">
<div class="six columns push-six">
<h3>
Contact us</h3>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">FaceBook</a></li>
</ul>
</div>
<div class="six columns pull-six">
<h5>
Menu</h5>
<ul>
<li><a href="#showcase">Showcase</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#media">Media</a></li>
</ul>
</div>
</div>
</div>
<div id="copyright" class="container">
<div class="row">
<div class="twelve columns">
<p>
This template is a demo of Foundation using ASP.NET MVC</p>
</div>
</div>
</div>
Wireframe prototype
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.
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
body
{
/*background pattern attrib: http://subtlepatterns.com/?p=944 */
background: url('./images/irongrip.png');
}
h1, h2, h3, h4, h5, h6
{
color: #0CA0C6;
}
#siteHeader
{
padding-top: 20px;
background: #fff;
border-top: 3px solid #1f1f1f;
}
#showcase, #features, #benefits, #media
{
padding: 2em 20px;
}
#showcase
{
background: #003366;
background: rgba(0, 96, 168, 0.4);
}
#showcase .action {
text-align: center;
margin-top: 4em;
}
#showcase h1, #showcase h4
{
color: #ddd;
}
#siteHeader, #features, #benefits
{
background: #DDD; /*fallback*/
background: rgba(255, 255, 255, 0.88);
}
#siteFooter, #copyright
{
padding: 20px;
background: #1f1f1f; /*fallback*/
background: rgba(0, 0, 0, 0.60);
}
#copyright p {
text-align: center;
}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.
/* -----------------------------------------
::Custom button style
Creating a custom button style is easy thanks to CSS overrides
----------------------------------------- */
.orange.button
{
background-color: #FD651C;
}
.nice.orange.button
{
border: 1px solid #1f1f1f;
}
.orange.button:hover, .orange.button:focus
{
background-color: #E6340E;
}
/* style anchors to match */
a
{
color: #FD651C;
}
a:hover
{
color: #E6340E;
}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.
/* -----------------------------------------
::Override navbar style
Using CSS overrides we can customize the nav bar
----------------------------------------- */
.nav-bar
{
float: right;
background-color: transparent;
border: 0;
margin-top: -20px;
}
.nav-bar > li
{
border: 0;
background-color: #1F1F1F;
}
.nav-bar > li:first-child
{
border-bottom-left-radius: 10px;
}
.nav-bar > li:last-child
{
border-bottom-right-radius: 10px;
}@media only screen and (max-width: 767px)
{
.nav-bar
{
float: none;
margin: 20px -20px;
}
.nav-bar > li:first-child
{
border-bottom-left-radius: 0;
}
.nav-bar > li:last-child
{
border-bottom-right-radius: 0;
}
}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.
<div class="six columns">
<div id="rotator">
@Html.Placehold(width: 468, height: 304,
text: "product slide 1", backgroundColor:"A7D5F2")
@Html.Placehold(width: 468, height: 304,
text: "product slide 2", backgroundColor:"F2B807")
@Html.Placehold(width: 468, height: 304,
text: "product slide 3", backgroundColor:"F23847")
</div>
</div>@section scripts
{
<script type="text/javascript">
$(window).load(function() {
$('#rotator').orbit();
});
</script>
}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/
Author profile: Edward Charbeneau
As a Corporate Web Developer/Webmaster with Sypris Solutions, Inc., Ed Charbeneau designs and develops internal web based applications for business, manufacturing and systems integration. Ed’s experience includes all aspects of web development from programming, database and ORM, to graphics design, and advertising/analytics. His skills includes C#, Asp.Net/MVC, HTML/CSS, Photoshop, JavaScript as well as web advertising and analytics.
The best path to understanding ASP.NET MVC, with recommended reading and expert insight.
Find out more
FitNesse is a popular general-purpose wiki-based framework for writing acceptance tests for software... Read more... CSS is still a valuable way of specifying the rendered style of HTML objects. By using a preprocessor... Read more... It is only recently that the tools have existed to make source-control easy for database developers.... Read more... Subversion provides a good way of source-controlling a database, but many operations are best done from... Read more... Deblector is an open-source debugging add-in for .NET Reflector; the Reflector team investigated... Read more... Ever wondered whether it's possible to create neater URLS, free of bulky Query String parameters?... Read more... This article describes the kinds of custom actions that can be used in your Visual Studio setup project. Read more... Find out how to design a robust data access layer for your .NET applications. Read more... The latest craze for mashups involves making cross-domain calls to Web Services from APIs made publicly... Read more... Most Web Parts implementations allow users to create a single portal page where they can personalize... Read more...