Zurb Foundation with ASP.NET Web Forms – Step by Step

Zurb Foundation is one among the popular responsive mobile first user interface frameworks.  So you don’t need to write redundant code for small screen devices like smart phone or tablets. The responsive user interface will align itself on encountering the small screens. In this article, I’ll be guiding you to create your first sample Zurb Foundation with ASP.NET Web Forms application.

Overview of this article:

• Creating ASP.NET Web forms Project.
• Removing the default Bootstrap UI Framework.
• Adding Zurb Foundation libraries.
• Applying Foundation sample template.

Tools and Technologies used:

• Visual Studio Express 2013 for Web.
• .Net Framework 4.5.1.
• ASP.NET Web Forms.
• Zurb Foundation 4 UI Framework.
• 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/MyTecBits-ZurbFoundation-ASP.NetWebForms).

Steps for creating web application using Zurb Foundation with ASP.NET Web Forms:

I. Creating Web Forms Application in Visual Studio 2013:

1. Launch Visual Studio 2013 (I’ve used Visual Studio Express 2013 for Web for this article).
2. Go to File menu and select New Project…
3. Create a new ASP.NET Web Application project.
   
4. In the next screen, select Web Forms as the template and click OK.
   
5. The ASP.NET Web Forms project under the solution is now created.

II. Removing the default Bootstrap UI Framework:

1. In Visual Studio 2013, Bootstrap is used as the default user interface framework. So when you are creating a web forms project, the Bootstrap user interface NuGet package is installed and used in the sample pages. Follow the below steps to remove bootstrap from the sample 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. You can see two packages related to Bootstrap. They are AspNet.ScriptManager.bootstrap and Bootstrap.
5. Select the AspNet.ScriptManager.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. A pop-up message box asks whether to remove the Bootstrap package as well. Click Yes.
   
8. Check the Scripts folder and the Content folder in the solution explorer. Bootstrap files are not in the project file list.
   
9. Now the project is ready to add Foundation framework libraries.

III. Adding Zurb Foundation Libraries:

1. Download latest version of Zurb Foundation from foundation.zurb.com. If you want you can customize the foundation components before downloading. Read the article Customizing and Downloading Zurb Foundation for details. During the writing of this article, the Foundation version is 4.3.2.
2. The contents of the downloaded zip file looks like this.
   
3. Copy the folders css and img to the Content folder in sample solution and include them to the project.
   
4. Copy the contents of js folder to the Scripts folder in the sample solution and include them to the project.
   
5. As you see there are lots of js files under the foundation folder. These are for the components like alerts, cookies, drop down, forms, etc… In this sample we are not going to use them, so I’ll not be adding all of them to BundleConfig.cs.
6. For this sample I’ll be adding only the foundation.min.css and normalize.css to the bundle config. Add the below lines of code to the BundleConfig.cs under the App_Start folder.
   
7. The script bundle for the modernizr js file is already available in BundleConfig.cs. So I’m not going to add the modernizr.js, came with the foundation library.
8. Rebuild the solution.
9. Now the solution is ready to apply the foundation template.

IV. Applying the Foundation Sample Layout:

1. In the sample solution, open the Site.Master file and add the code for rendering the foundation style bundle (<%: Styles.Render(“~/bundles/foundationCss”) %>) above the modernizer script bundle render code.
   
2. Zurb has some add-on templates. Choose a template from http://foundation.zurb.com/templates.php. For this sample I chose the Blog template.
   
3. Clicking the template icon, will lead you to the sample web page with the template. Under the template icon, you can see two 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.
4. Click the HTML link and copy the html code for the template.
   
5. Compare the foundation template code with the code in Site.Master file in our solution. You may need to change the foundation template code according to the Web Forms sample. For example, I’ve modified the href links and replaced the blog content section with the ContentPlaceholder.
   
6. Remove the content inside the <body> tag and replace it with the code shown below. You can copy the source code from my GitHub repository here (https://github.com/mytecbits/MyTecBits-ZurbFoundation-ASP.NetWebForms/blob/master/MTB-Foundation-WebForms-Sample/Site.Master).
7. Build the solution and execute it to a browser. What you are seeing is the ASP.NET Web Form with Zurb Foundation UI Layout.

   

8. The Layout is fluid and responsive to the display size. To check this, reduce the size of the browser. You can see the web page layout rearranges itself to the size of the browser.

   

V. Proceed Further:

To proceed further and add various components like forms, tool tip, drop down, etc.. follow the documents from Zurb. They have wonderful documents in http://foundation.zurb.com/docs/.