Remove Bootstrap and Add Foundation 5 to an MVC 5 Application

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

This tutorial picks up where we left off from updating an MVC 4 Internet Application to MVC 5 as shipped in Visual Studio 2013, but we used Visual Studio 2012 because VS 2012 does not have the MVC 5 Full Internet Application that contains the new OWIN Identity Authorization and Startup. The problem we run into at the end of the project is what if we want to install Foundation 5 instead of Bootstrap. We need some sort of Responsive framework no doubt, but maybe you prefer Foundation 5 by Zurb. Well here we go.

*Note: you can also start this tutorial from an MVC 5 Internet Application in Visual Studio 2013. The steps will be the same.

This will remove the references and scripts for bootstrap, but you will still have code in the CSHTML that references styles that are part of bootstrap. You will need to change those once you recognize them, but I will try to help you change out the cshtml where it’s most important, like the navigation. We are going to create a foundation navigation to replace what bootstrap left behind. it is a hybrid of Foundation 5’s Top-Bar & OffCanvas that uses the best of both navs. We do need to make sure we have Web WOrkbench installed before continuing.

DOWNLOAD THE FREE VERSION OF WEB WORKBENCH HERE

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

Run the following command in the Package Manager Console:
PM> uninstall-package bootstrap

Install Zurb Foundation 5 for MVC and Sass created by Ed Charbeneau from ResponsiveMVC.Net, 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 a directory in your root named “Content” & delete “images” or it’s content because we don’t need the images from MVC 4, but you might want to keep your images directory there, .. I do..

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. DO not delete Site.scss, that is our Override file for Foundation 5.

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"

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.

6. Automatic Bundling and Minification

Your bundle.config file needs to reflect the code below:

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 let’s create a hybrid navigation with Foundation 5’s OffCanvas & Top-Bar

I got to give credit where credit is due, this implementation mainly came from PETER GRAFF on the Foundation forum. I added some nav elements and a constrain to grid `<div>`.

Let’s go to our _Foundation.cshtml and add the navigation. Let’s just replace the code from after the <body> tag down to (but not replacing the @Scripts.Render("~/bundles/jquery") piece of code and replacing everything in between with:

<div class="off-canvas-wrap">
<div class="inner-wrap">

<aside class="left-off-canvas-menu">
@*//This form tag is required for the code in LoginOffCanvasPartial*@
@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @*@class = "right"*@ }))
{
<ul class="off-canvas-list">
<li>
<label class="first">NAVIGATION</label></li>
<li><a href="/Home">Home</a></li>
<li><a href="/Overview">Overview</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
}
</aside>

<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Menu</span>
</a>
</nav>

<!--contains to grid start - Remove to expand nav elements to edge of page-->
<div class="contain-to-grid">
<!--use Foundation top-bar element for all but small screens-->
<nav class="top-bar hide-for-small" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="/Home/">WEBSITE</a></h1>
</li>
</ul>

<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<a href="#" class="">Home</a>
<ul class="dropdown">
<li><a href="#">Overview</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
@Html.Partial("_LoginPartial")
</ul>

</section>
</nav>

<!-- Contain to grid end-->
</div>
<a class="exit-off-canvas" href="#"></a>
<!--PUT ALL UP IN _FOUNDATION-->
@RenderBody()
</div><!--off-canvas inner-->
</div><!--off-canvas wrap-->

Now our LoginPartial page is formatted using the bootstrap crap. Let’s remove that, make in Foundation 5 classes and change the format a bit. You will notice that I took the Begin form out of the LoginPartial and wrapped it around the UL above in the Layout page. That is so the form won’t jack up our OffCanvas menu, this hides the begin form and end form in a place where it can’t push out (so to speek) the buttons. You can try to move it back in to see what I mean, but just trust me. Your LoginPartial pae should look like this:


@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "right" }))
{
@Html.AntiForgeryToken()

<li class="has-dropdown">
@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })

<ul class="dropdown">
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</li>
}
}
else
{
<li class="has-dropdown">
@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })

<ul class="dropdown">
<li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
</li>
}

Let’s switch to our foundation index view by simply renaming Index.cshtml to Index.cshtml.exclude

Then rename Foundation_Index.cshtml to Index.cshtml.

we also need to change the code inside the ViewStart.html

From:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

To:
@{
Layout = "~/Views/Shared/_Foundation.cshtml";
}

We now have a fully working ASP.NET MVC 5 Internet Application as shipped in Visual Studio 2013 with Foundation 5 instead of Bootstrap. Remember that you will need to design and even replace some code left behind with valid Foundation styled HTML markup. For instance, if you now click on Log In in the new navigation on the home page you will be taken to a Log In page that looks a tab bit funny. It’s because it needs to be formatted properly to work with Foundation. For tips on how to do that, we will be creating a tutorial soon that can be accessed (HERE WHEN IT IS AVAILABLE). Until then use foundation.zurb.com for info on formatting Foundation 5.

If you would like to link directly to this tutorial use the TinyURL:
TinyURL.com/86Bootstrap4Foundation

Leave a Reply

You must be logged in to post a comment.