Zurb Foundation 4 with ASP.NET MVC 5 – Step by Step

UPDATE: An updated version of this article using Foundation 6 with ASP.NET Core MVC is available here.

In my earlier article, I’ve provided the step by step instruction on creating a basic ASP.NET MVC 4 web application with Zurb Foundation UI framework. In this article, I’ll be writing the step by step instruction on how I’ve created my first Zurb Foundation 4 with ASP.NET MVC 5 web application. This may be helpful to someone who is looking for basic steps to jump-start and use Zurb Foundation 4 with ASP.NET MVC 5.

Overview of this article:

• Creating ASP.NET MVC 5 Project in Visual Studio 2013.
• Removing the default UI Framework (Bootstrap) from the solution.
• Adding Zurb Foundation libraries.
• Applying Foundation Template.
• Using Foundation in Razor Markup.

Tools and Technologies used:

• Visual Studio Express 2013 for Web.
• Dot Net Framework 4.5.1.
• ASP.NET MVC 5.
• Razor View Engine.
• Visual C#.
• Zurb Foundation 4.3.2 from http://foundation.zurb.com.
• Foundation sample template from http://foundation.zurb.com/templates.php.

Sample Source Code:

The sample project source code created with this step by step instruction is available in GitHub. Download the sample code solution from here (https://github.com/mytecbits/MVC5-Foundation4-Sample).

Steps for creating web application using Zurb Foundation 4 with ASP.NET MVC 5:

I. Creating ASP.NET MVC 5 Project:

1. Launch Visual Studio 2013 (I’ve used Visual Studio Express 2013 for Web).
2. Go to File menu and select New Project….
3. In the New Project screen, make sure .NET Framework 4.5.1 is selected.
4. Go to the left panel, expand the Installed >> Templates >> Visual C# >> Web.
5. Create a new ASP.NET Web Application project.
   
6. In the next screen, select MVC as the template and click OK.
   
7. The ASP.NET MVC 5 project is now created.

II. Removing the default UI framework:

1. In Visual Studio 2013, Bootstrap is used as the default user interface framework for the web projects. So when you are creating a MVC application, Bootstrap user interface NuGet package is installed and used in the sample views. Follow the below steps to remove bootstrap from the solution and the project.
   
2. Right-click the solution and select Manage NuGet packages for Solution….
3. In the Manage NuGet Packages screen, Select Installed Packages in the left pane.
4. Type in bootstrap in the search box and hit Enter key. You can see the Bootstrap NuGet package.
5. Select the Bootstrap package and click the Manage button.
   
6. In the manage screen, un-check the boxes against the solution and project and click OK.
   
7. Bootstrap is now removed from the solution and the project.
8. Check the Scripts folder and the Content folder in the solution explorer. Bootstrap files are not in the project file list.
   
9. Now open the BundleConfig.cs file under the folder App_Start. You can see the bundle configuration for bootstrap files are still there. Remove them.
   
10. Now the project is ready to add Foundation framework libraries.

III. Adding Zurb Foundation libraries:

As on writing this article, there is no NuGet package of Zurb Foundation 4.3.2 for MVC 5. So we’ll use the foundation libraries from Foundation website and manually add the files to the project. Follow the below steps to do that.

1. Download latest version of Zurb Foundation from Foundation website. If you want you can customize the foundation components before downloading. Read my article Customizing and Downloading Zurb Foundation for details. 
2. Below are the contents of the downloaded zip file.
   
3. Copy the folders css and img to the Content folder in the project and include them.
   
4. Copy the contents of js folder to the Scripts folder in the project and include them.
5. Now we need to bundle the css and js files in the bundle config. Add the below lines of code to the BundleConfig.cs under the App_Start folder.

   bundles.Add(new StyleBundle("~/Content/Foundation/css").Include(
               "~/Content/css/foundation.min.css",
               "~/Content/css/normalize.css"));
   
   bundles.Add(new ScriptBundle("~/bundles/foundation").Include(
               "~/Scripts/foundation/foundation.js",
               "~/Scripts/foundation/foundation.*"));
   

6. Here is the modified BundleConfig.cs.
   
7. Rebuild the solution.
8. Now the solution is ready to apply the foundation template.

IV. Applying a Foundation Template:

1. From the solution explorer, open the _Layout.cshtml file.
2. From the header section, replace the styles bundle @Styles.Render(“~/Content/css”) with  @Styles.Render(“~/Content/Foundation/css”).
   
3. From near to the bottom, replace the script bundle @Scripts.Render(“~/bundles/bootstrap”) with @Scripts.Render(“~/bundles/foundation”).
   
4. Now, it’s time to choose a template. You can create your own template or you can choose a sample template from http://foundation.zurb.com/templates.php. For this sample I chose the Blog template.
   
5. Under the template icon, you can see 2 links (More Info and HTML). The More Info link leads to a web page which gives you the layout/grid details. The HTML link opens a pop-up window with the html code for the template.
6. Click the HTML link and copy the html code for the template.
   
7. Compare the foundation template code with the code in _Layout.cshtml file. You may need to change the template code according to the _Layout.cshtml file. For example, I’ve modified the href links and replaced the blog content section with @RenderBody().
8. Remove the content inside the <body> tag in _Layout.cshtml and replace it with the code shown below. You can copy the source code from my GitHub repository (https://github.com/mytecbits/MVC5-Foundation4-Sample/blob/master/MyTecBits-MVC5-Foundation4/Views/Shared/_Layout.cshtml).
   
9. Hit F5 to build the solution and execute it. The output will be your first MVC 5 application with Zurb Foundation User Interface Layout.
   
10. To check the responsiveness of foundation layout, reduce the size of the browser. You can see the web page rearranging itself to the size of the browser.
    

V. Using Foundation in Razor Markup:

To implement foundation in razor markups like html helpers, use the class option. For example you have a razor action link like @Html.ActionLink(“Home”, “Index”, “Home”). If you want to convert this action link to a foundation button, just add the class for the action link and add the foundation css class Button.

Proceed Further:

• If you are interested, you can download the sample code created with the above instructions from GitHub Repository (https://github.com/mytecbits/MVC5-Foundation4-Sample).
• Read my other articles about Zurb Foundation.
• Try to use various components and features of Foundation. Follow the documents from Zurb web site (http://foundation.zurb.com/docs/).