Zurb Foundation

My wife wanted a new website built for a project she is working on. Being the good developer husband I am I decided to implement the site with a responsive design. I could research and build the CSS and javaScript from scratch, but I was sure there was a project already developed to help get me started. Well I landed on a project named Foundation. Here is what they have to say about themselves,

Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.

Is it the most advanced? I have no idea, but it seems simple and has a decent community and is in use on some major sites. Why not Bootstrap you ask. Well some respected front end designers said Foundation is cool. I’m a developer, so I respect what the design community has to say about design. This is not to say that designers don’t like Bootstrap, from what I can tell they love it too. I just wanted to learn some of the dark arts and Foundation is closer to the metal and Bootstrap hands everything to you on a platter. I am not qualified to compare them, but you can read about some differences between the two that Felippe Nardi posted on his blog, https://medium.com/frontend-and-beyond/8b3812c7007c. Actually, his post pushed me to Foundation. Even though he said I will have to get my hands dirty to use it I think I will enjoy the control and absence of unnecessary or accidental complexity.

Install

First, in Visual Studio, I create an empty MVC project. I recently upgraded my VS 2012 to Web Tools 2013.1 for Visual Studio 2012 so I am using ASP.NET MVC 5.

Side note, this VS 2012 update includes some nice new features including the concept of round tripping so you can work with your MVC 5 projects in both VS 2012 and VS 2013 without having to change anything (sweet).

OK, I have gotten into the habit of checking NuGet before I attempt to bring new toys into my projects because it makes things so much easier. There is a NuGet to setup Foundation, Foundation5.MVC.Sass so pulling in the files I needed was a breeze. Setup on the other hand was a bear. For some reason I could not get the files to install correctly. Oh well, they downloaded to the solution package folder so I just had to manually copy them.

Manual Setup

First I created a Content folder in the root of my project. Then I opened the folder for the Foundation.Core.Sass package and copied the files from content/sass and dropped them in the Content folder in my project. This framework uses SASS. To compile the SASS files I install the Mindscape Web Workbench. This allows me to compile CSS files by just saving the scss file. So, I open and save the site.scss file to get the site.css created (you will see it directly under the .scss file.

Next, I set up the JavaScript. I open the conent folder in the Foundation.Core.Sass package and copied the Script folder to the root of my project. There are quite a few JavaScript files in there so I have to get them combined and minified to improve performance.

Bundling

To do this, I used NuGet to install Microsoft.AspNet.Web.Optimization that provides JS and CSS bundling features to ASP.NET. Next, I create a BundleConfig.cs in the App_Start folder and add my bundles. Something like this

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

namespace ZurbFoundationDotNetBase
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle(“~/Content/css”).Include(“~/Content/site.css”));

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

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

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

Next, I have to bootstrap this file by telling our Global.config to load it. I add this line under the RouteConfig line in the Global.asax.cs file

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

Views and Controllers

Since the MVC 5 update for VS 2012 only allows us to create empty MVC 5 projects, so I have to manually create the controllers and views. The NuGet install for Foundation also missed my MVC files so I have to move them from the package to the project. I open the content folder in the Foundation5.MVC.Sass package and copy the Views folder to the root of our project. The package doesn’t include a _ViewStart.cshtml so I create one and point the layout to the Shared/_Foundation.cshtml file.

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

Next, I rename the Foundation_Index.cshtml to Index.cshtml. Then the last change in the View folder is to update the web.config so that the pages section looks something like this

<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="ZurbFoundationDotNetBase" />
 </namespaces>
 </pages>

Since there are no controllers I have to add one to manage the Home/Index view. In the Controllers folder I create an empty MVC 5 controller named HomeController.cs.

Conclusion

Well, that’s it. I was able to build and run the project and see the response index page. Now I have a base project for responsive web design using a less opinionated framework than Twitter Bootstrap. Although I will still advocate the use of Bootstrap, I believe Foundation will fit my personality and style of development a little better. If any of this interests you, I posted the solution on GitHub.

I had a serious brain freeze today. I forgot polymorphism 101. I couldn’t remember if a virtual method defined in a base class and called in the constructor of the base class would call the overriden virtual method in a derived class. Instead of ol’reliable (Google Search), I decided to do a quick test because doing beats searching as it kind of burns in a lesson learned for me. Hopefully, I won’t forget this one for awhile. Anyway, the answer is yes, it will call the override and here is a test if you are having a brain freeze too and want to prove it (this is implemented with MSTest).

namespace BrainFreeze
{
	using System;
	using Microsoft.VisualStudio.TestTools.UnitTesting;

	[TestClass]
	public class PolymorphismTest
	{
		[TestMethod]
		public void BaseClassVirtualMethodWhenCalledFromBaseContructorShouldCallDerivedVirtualOverride()
		{
			string expected = "ImpCallVirtual";

			Imp imp = new Imp();
			string actual = imp.Result;

			Assert.AreEqual(expected, actual);
		}

		public class Base
		{
			public Base()
			{
				CallVirtual();
			}

			public string Result { get; set; }

			public virtual void CallVirtual()
			{
				this.Result = "BaseCallVirtual";
			}
		}

		public class Imp : Base
		{
			public Imp()
				: base()
			{
			}

			public override void CallVirtual()
			{
				this.Result = "ImpCallVirtual";
			}
		}
	}
}

It took me a century to figure out lambdas and what they are all about. So, as I was thinking about what to blog about next I thought I’d share about the moment that lambdas and me clicked.

When I looked at lambdas as shorthand for anonymous delegates and expressions, I came up with a phrase to help me visualize what’s going on. When I read a lambda I say, “with value of variable return expression.” A Predicate delegate would be expressed as a lambda as x => x == 1 would read, “with value of x return x is equal to 1.” When I made => read as return, I stopped trying to force it into some kind of comparison operator (if you have code dyslexia like me, you know what I’m talking about).

Another way to look at it is in terms of what’is happening under the hood. A lambda is like shorthand for anonymous delegates. In longhand, full declaration, as an anonymous delegate, the above lambda would be,

delegate(int x){return x == 1;}

Generic Delegates

Since I mentioned anonymous delegates, I should giving a passing shout out to Generic Delegates.  I use most often:

Predicate must return true or false. Can accept only one parameter.

Func returns the value specified in the parameter. Can accept 4 parameters in .net 3.5 and 16 in 4.0.

Action would not return a value. Can accept 4 parameters in .net 3.5 and 9 in 4.0.

Comparison returns a signed int indicating the result of comparison. If the returned int is

< 0 then x < y
= 0 then x = y
> 0 then x > y

The Comparison delegate can accept two objects of the same type that will be compared (x and y).

Converter returns the result of an object conversion operation. Can accept one input object (to be converted) and an output (return) object (is the converted input object).

EventHandler returns void. Accepts a System.Object (source of event) and TEventArgs (the event’s data).

Anyway, delegates are a powerful feature of C# that I am guilty of not taking advantage of like I should. Hopefully, doing this little post will help in grain them more into my solution designs. If you haven’t been exposed to or currently using Generic Delegates or Lambda Expressions, I challenge you to see how they can help solve some of your problems in a more abstract, efficient and maintainable way. Try them out you may discover a new way to think about and write code.