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:

Tools and Technologies used:

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.
    Zurb Foundation with ASP.NET - 001
  4. In the next screen, select Web Forms as the template and click OK.
    Zurb Foundation with ASP.NET - 002
  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.
    Zurb Foundation with ASP.NET - 003
  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.
    Zurb Foundation with ASP.NET - 004
  6. In the manage screen, un-check the boxes against the solution and project and click OK.
    MTB-Foundation-WebForms-Sample-005
  7. A pop-up message box asks whether to remove the Bootstrap package as well. Click Yes.
    MTB-Foundation-WebForms-Sample-006
  8. Check the Scripts folder and the Content folder in the solution explorer. Bootstrap files are not in the project file list.
    MTB-Foundation-WebForms-Sample-007
  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.
    Zurb Foundation with ASP.NET - 008
  3. Copy the folders css and img to the Content folder in sample solution and include them to the project.
    Zurb Foundation with ASP.NET - 009
  4. Copy the contents of js folder to the Scripts folder in the sample solution and include them to the project.
    Zurb Foundation with ASP.NET - 010
  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.
    Zurb Foundation with ASP.NET - 011
  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.
    Zurb Foundation with ASP.NET - 014
  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.
    Zurb Foundation with ASP.NET - 012
  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.
    Zurb Foundation with ASP.NET - 013
  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.
    Zurb Foundation with ASP.NET - 015
  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.

    Zurb Foundation in ASP.NET Web Forms
    Zurb Foundation in ASP.NET Web Forms
  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.

    Responsive Zurb Foundation in ASP.NET Web Forms
    Responsive Zurb Foundation in ASP.NET Web Forms

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/.


4 thoughts on “Zurb Foundation with ASP.NET Web Forms – Step by Step”

  1. One question:
    I am doing a website with Foundation. I have the following problem: I am trying to set color to the text inside a textbox. When I do not use Foundation, the color of the text I want is set without problems; when I use Foundation, the color attribute in my css file just does not work, i.e. when I put the line

    (when I delete that line, it works with no peoblems)

    Thank you very much in advance for your help,
    Marco

    Reply

Leave your thoughts...

This site uses Akismet to reduce spam. Learn how your comment data is processed.