git settings
Loaded Foundation NuGet Package

Manage NuGet packages > Search: Zurb > Install (Zurb Foundation 3.1.1
for MVC4)
Foundation Installation step 1

1. Update the Layout

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

@{
//This is the default MVC template
//Layout = "~/Views/Shared/_Layout.cshtml";

//This is the Foundation MVC template
Layout = "~/Views/Shared/_Foundation.cshtml";
}
Foundation Installation step 2

2. 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)
Foundation Installation step 3

3. Automatic Bundling and Minification

Open the /App_Start/BundleConfig.cs
Add the following bundles:

#region Foundation Bundles
bundles.Add(new StyleBundle("~/Content/foundation/css").Include(
"~/Content/foundation/foundation.css",
"~/Content/foundation/app.css"));

bundles.Add(new ScriptBundle("~/bundles/foundation").Include(
"~/Scripts/foundation/jquery.*",
"~/Scripts/foundation/app.js"));
#endregion
Added Prototyping helpers via NuGet

This package is not a requirement for Responsive Design or Foundation.
This package simply provides a method of creating Lorem Ipsum and
Placeholder images at runtime thus reducing the markup in MVC making the
demo easier to read.
Fixed missing bundle

Using the foundation moderizr.js instead of default MVC installed
modernizr.js
Added the home controller

Added a controller to serve the Home/Index view.
Controllers > Add Controller

The project can run at this point and the demo page will be visible.
This step is only required when using the MVC Empty Template.
Created Header partial view

Created a partial view that will hold our logo and main menu.
Views / Shared > Add View
+ Create as a partial view
Created header content

The header consists of a logo and menu.
The logo element is four columns wide.
The menu element is eight columns wide.
The menu uses the Foundation UI class "nav-bar".
Added the Header partial to the main template.
Deleted preinstalled example code

Deleted the code that was created during the install of the Foundation
NuGet package.
Created the showcase content

The first element will describe our product.
The second element will show an image or image rotator for our product.
Both elements are six columns wide.
Created features content

This is a three up layout showing featured images.
Each feature is four columns in width.
Created benefits content

This element has two sections.
The first is an article discribing benefits of our product. (eight
columns)
The second is a call to action about buying the product. (four columns)
Created media content

The media content has three elements.
A header that expands the full width of the page. (twelve columns)
Two videos that are each half the widht of the page. (six columns)
Created footer content

In the same way the Header was created, a footer partial was added.
The footer contains three elements.
A list of contacts. (six columns)
A footer menu. (six columns)
These are arranged with source ordering so the menu appears last on
mobile, but in the left column on larger screens.
The last element is a copyright that spans the full width of the page.
Added a few simple styles add character and color.
Customized the button color
Added a custom navaigation style