Installing Foundation 5 in a MVC5 Full Internet Application

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

Disclaimer:
The only reason I am able to bring you these easy instructions on how to install Foundation 5 in ASP.NET MVC 5 is because of Ed Charbeneau’s NuGet Extension (Zurb Foundation 5.1.1 for MVC and Sass) which makes the addition of Foundation 5 to any ASP.NET project 10 times easier and Mindscape’s Web Workbench which is an extension to Visual Studio that sets up Compass in Visual Studio. Without these two things it would be a very difficult thing to do. I have only put all the instructions from beginning to end in a way that works best for me into a single blog post, which is fairly simple

We will be starting from a Visual Studio 2013 MVC 5 Internet Application Project Template, but these steps should be similar in Visual Studio 2012.

Step 1). Since we are going to be installing Foundation 5 with SASS, we will first need to download a Visual Studio extension that will allow us to run Compass in order to compile SASS. Download Web Workbench if you do not already have it installed and install it.

If you did not have this installed and you already have Visual Studio open you will need to close out of Visual Studio while it is installing and then re-open Visual Studio. This is required before we get started building our project in Visual Studio.

Step 2). Create a new project by select ASP.NET Web Application as the project type, you will need to name your project “TastyCakes” in order to follow along with ths tutorial. If you decide to use a different name for your project you will need to be aware when copying and pasting code and change your namespace and using statements accordingly. I have also checked the boxes “Create directory for solution” and “Create new Git repository”. This is not required but it is recommended.

Once you hit OK, you will be prompted with a screen that asks you to “Select a template:” Choose MVC. Also click the Change Authentication button and make sure that “Individual User Accounts” is selected. Hit OK.

Once your project finishes building for the first time, which may take several minutes, Bootstrap will be installed, this is the default Responsive Framework that is shipped with ASP.NET MVC 5’s Full Internet Application. We need to uninstall it. Go to the Solutions Explorer in the root directory and open up your Packages.config file and find the code:

<package id="bootstrap" version="3.0.0" targetFramework="net45"/>

You may notice Warning in your Error List that says “The packages element is not declared.” This is a known bug in Visual Studio. YOu can choose to ignore it and this will not effect your project in any way. You can find out more HERE if you are curious.

Step 3) Run the following command below in the Package Manager Console:

PM> uninstall-package bootstrap

If your packages.config in still open, Visual Studio will prompt you to reload it because of changes. Click yes and notice that bootstrap is now gone. Leave you packages.config file open for the time being.

Step 4) Install Zurb Foundation 5 for MVC and Sass created by Ed Charbeneau from ResponsiveMVC.Net, by running the following command in the Package Manager Console:

PM> Install-Package Foundation5.MVC.Sass

You will be prompted in the console to overwrite the following files:

Views\Shared\_Layout.cshtml
Views\Home\Index.cshtml
App_Start\BundleConfig.cs

Type “Y” after each prompt and hit enter. Also your packages.config file will repload twice prompting you for a “Yes” to reload. Hit Yes both times. Once everything is installed with Foundation, you will see this in your packages.config file:

<package id="Foundation5.Core.Sass" version="5.2.2" .../>
<package id="Foundation5.MVC.Sass" version="1.4.522" .../>

If your packages.config in still open, Visual Studio will prompt you to reload again because of changes. Click yes and notice that Foundation5.Core.Sass is now installed. You can close your packages.config file. But remember that if you ever need to find out what version of a particular package is installed or if that package exists in your project, that this is the easiest place to look.

Another way to check if your packages installed in your project is to type the following into the Package Manager Console:

PM> Get-Package

This will provide you with a full list of all NuGet packages installed. YOu can close your packages.config file for now, but you know where to go and find this info now and you know several ways to do it.

Step 5) 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

Once it is done setting up your compass project you will be prompted to view a “Guide to working with Compass” I selected no, but you may want to read the file and then come back to this part of the tutorial. It is not very informative.

Compass will have added a config.rb file to your project in the main directory. It will also have added 3 files that we do not need to your “sass” folder. I delete them because they are not needed in Foundation. They are: (ie.scss, screen.scss, print.scss) You may delete these, but DO NOT delete Site.scss, that is the scss file that will compile into Site.css and is KEY to our project.

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

Change:
css_dir = "stylesheets"

To:
css_dir = "Content"

At this point your Site.scss file should be compiling to Content/Site.css and if you were to open Site.scss and comment out the first @import line > Save and then go open you Content/Site.css file, you would see a difference in code at the beginning of the file. If for any reason you are not seeing a difference and there is a Site.css file being generated underneath the Site.scss file in the sass folder, then you need to recheck your config.rb and possibly go into your Web Workbench Settings to make sure that your sass/Site.scss file is mapping to your Content/Site.css file.

EVERYTHING SHOULD BE WORKING NOW.

HIT Ctrl+F5 to see if the Startup page that overwrote the Home/Index file is working with Foundation 5 styles. It should look something like below:

This is what the Start page should look like if Foundation is working

Leave a Reply

You must be logged in to post a comment.