Zurb’s Foundation 5, MVC 5 and Visual Studio 2012

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

JUMP TO: Phase 2 or Phase 3

Phase 1 – Zurb’s Foundation 5, MVC 5 and Visual Studio 2012

This tutorial is instruction on installing Foundation 5 into an Empty MVC 5 project using Visual Studio 2012. The problem many have ran into is that Visual Studio 2012 only allows you to start from a blank MVC 5 project, so I will help you get the NuGet installed which is pretty similar to the instructions in the NuGet package with a few minor changes. The changes come because the NuGet package provided by ResponsiveMVC.net also available through the NuGet website and Paclet Manager, does not take into consideration that you will be installing from Visual Studio 2012 using a Blank MVC 5 project. We will need to build the Home Controller, Bundling class, modify the Global.asax.cs as well as some other quirky details. Lets get started.

First things first, Zurb Foundation 5 with Sass requires that you have Sass capabilities in Visual Studio. We will be using Mindscape’s Web Workbench for compiling our Sass scripts in this project and so should you. Web Workbench brings compilation for Sass to .NET & Visual Studio so that you do not have to install Compass or Ruby with Visual Studio. But you can if you want to. There is a Free version that will work just find for our needs. A full version of Mindscapes Web Workbench can be purchased here for $39.00, but again, it’s not needed. We can minify with Visual Studio which is our main concern. Other features of the pro version is right click compiling and other advanced features which I could care less about.

DOWNLOAD THE FREE VERSION OF WEB WORKBENCH HERE

*You need to have Web Workbench installed to continue with this tutorial.

First start by creating a New Project and select “ASP.NET MVC 5 Empty Project”. Name your project and I would advise to create a Git repository for safe keeping and iteration control. I have named mine “MvcEmptyF5″.

Next, install Zurb Foundation 5 for MVC and Sass, run the following command in the Package Manager Console:
PM> Install-Package Foundation5.MVC.Sass

You can pull up the Package manager console by either navigating to:

Tools > Library Package Manager > Package Manager Console

Or by typing Console and hitting Enter in the Quick Launch at the top right of the Visual Studio IDE.


1. Configure your project

Foundation can be used either with Sass or Sass with compass. The Foundation Nuget package installs Foundation to the “~/sass” folder by default.

Create two directories in your root named “Content” & “images”.

1a. Configure your Sass output folder

Open up the Web Workbench Settings for your project (select the project and use the right click context menu, or the Mindscape menu)
you can set the Output Folder for your SCSS file and specify where the .css and/or .min.css will be generated.

sass/Site.css should go to the newly created Content folder. Unless you have special requirements, everything else can be left alone.

1b. Create a Compass project

If you are using Web Workbench, you must create a Compass project, otherwise Web Workbench will not save the compiled CSS to the correct location.

Setup Compass Project

If desired, remove Compass default files (ie.scss, screen.scss, print.scss) from the “sass” directory.

Open the /config.rb and change the output directory from “stylesheets” to “Content”

Change:
css_dir = "stylesheets"

To:
css_dir = "Content"

Now that you have changed the Config.rb file your site.scss will compile to the Content Directory despite what your Web WOrkbench setting may say. Try it for yourself. Go to Site.css and scroll down to the bottom, look at what the last few lines say, then open Site.scss and comment out the last @import to make it look like this:

@import "normalize";
@import "foundation";
//@import "foundation.mvc";

Your Site.css page will auto refresh with a notification dialogue box, just hit yes and then look at the bottom of that site.css file again. It is different because foundation.mvc.css is not being included. Now go back and uncomment and save again. Now the site.css will revert back to include foundation.mvc.css.


2. Create/Update the Layout

Open the Views folder and Add > NewItem > MVC5 Partial Page (Razor) named _ViewStart.cshtml.

Open the /Views/_ViewStart.cshtml page and add this to it:

 @{
//This is the Foundation MVC template
Layout = "~/Views/Shared/_Foundation.cshtml";
}

Now click on the controller folder and select Add > Controller > MVC 5 Controller Empty. CLick Add and name it HomeController.

Foundation should have installed a View into /Views/Home and named it Foundation_Index.cshtml let’s rename that to Index.cshtml


4. Add Needed references to blank MVC project for jQuery, Modernizr & Bundling Support

Go into Manage Nuget Packages and click on Bootstrap > Manage and uncheck both checkboxes and hit ok, this will remove the reference for bootstrap.

Go into Manage Nuget Packages and add following NuGetPackages:
jQuery UI (Combined Library) & Microsoft ASP.NET Web Optimization Framework

Update any other packages already installed if needed.

6. Automatic Bundling and Minification

Right click on the App_Start directory and Add > Class
Name: “BundleConfig.cs”

Once it opens, replace the code with the following:

using System.Web;
using System.Web.Optimization;

namespace YOURNAMESPACE
{
public class BundleConfig
{

public static void RegisterBundles(BundleCollection bundles)
{

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));

bundles.Add(new ScriptBundle("~/bundles/foundation").Include(
"~/Scripts/foundation/foundation.js",
"~/Scripts/foundation/foundation.*",
"~/Scripts/foundation/app.js"));
}
}
}

Now open your Web.config file in the Views directory and add the following code between the code shown:


<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Helpers" />
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization" />
<add namespace="System.Web.Routing" />
<add namespace="System.Web.WebPages" />
<add namespace="MvcEmptyF5" />
</namespaces>
</pages>

FINALLY add the following to your Global.asax.cs, just under Route config:

BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);

The next tutorial will explain how to create a Navigation that uses OffCanvas & Top-bar from foundation to create a hybrid of the two for a very slick responsive navigation. Create a Hybrid nav

If you would like to share this tutorial, here is a tinyURL link for it: http://tinyurl.com/VS12-MVC5-F5


Resources for this tutorial:

NuGet author Ed Charbeneau’s website

(Instructions using Web Workbench)

Working with Compass in Visual Studio

Mindscape’s Web Workbench @ VS Gallery

Zurb Foundation 5 for MVC and Sass

Compass CSS Authoring Framework

3 Responses to “Zurb’s Foundation 5, MVC 5 and Visual Studio 2012”

Leave a Reply

You must be logged in to post a comment.