HTML5 Boilerplate In Visual Studio 2010

All this talk of HTML5 and where to begin? It’s such a loosely defined and weird world we live in these days. Since we can’t wait until 2020 to get moving, where do you start? Is there anything out there that just bundles the “fundamentals” of HTML5 up for you in a nice complete package. Something like a template.

Or maybe….A BOILERPLATE!?!

scared_cat-300x281

Well yes in fact there is.

You have probably already heard about HTML5 Boilerplate. It’s got all the goodies you need to start your HTML5 development included in a “template” of sorts. The problem is, it’s not specifically targeted at Visual Studio users and thusly kind of a bear to implement. It comes with all sorts of Ant Build and other confusing things that just don’t make a whole lot of sense to ASP.NET developers.

When I was headed up to TechDays Vancouver, I wanted to do a session on using the boilerplate and I thought I would create a project template. But somebody beat me to it! Which is great because they probably did a better job that I would ever do. So let me present you with Mother Effin HTML Site created by Jacob Gable. I don’t know much about Jacob except that his handle on ASP.NET Is jacob4u2. I’m guessing he’s a U2 fan, so Jacob - this one’s for you.

35_290

This is a Visual Studio 2010 project template, so all of you 2008 / 2005 (God forbid 2003?) people are out of luck.  Also, it’s MVC.  Webforms is just as good for HTML5 as MVC, it just happens that this is an MVC project template.

My recommendation on this is for you to first watch Paul do his thing on Boilerplate for the San Francisco UG.  He’s going to explain what pretty much everything in the index and CSS is for.  It’s a really good lecture and explains a ton.

I am going to run down through this project structure and the _layouts (master page for you webforms people out there), but it’s really just a rehash of what Paul has already said in the video above.  You didn’t watch it!?!?

So when loaded, the solution explorer will look like this…

b1

Let’s step through this thing and explain what each of these folders are.  Some need no explanation because you would expect you might see them (App_Data), and others are going to be completely foreign.

  • App Data
  • Controllers
    • Just your standard MVC Controller folder
  • css
    • 3 guesses as to what goes here and the first 2 don’t count.  A quick explanation of what’s inside this folder.

b2

  • media.css - contains boilerplate css for mobile responsive design, as well as clearfixes and visually / hidden element styles.  Some things you want visually hidden but still accessible for SEO.  Others you want completely invisible to everyone.
  • normalize.css – contains all of the style fixes for cross-browser wierdness like legends and other HTML elements that render just slightly differently depending on your browser.
  • site.css – this is the standard MVC style sheet that you get out of the box with a standard project.
  • demo – deleted in the current version of boilerplate so I just delete it too.
  • img – fer yer images
  • js
    • My favorite folder in all of the boilerplate.  It’s got some subfolders so let’s have a look

b3

  • libs
    • This is where you might put things like jQuery.  Or Kendo?
  • mylibs
    • Where you would put your custom built common libraries
  • plugins
    • Any jQuery plugins you may have
  • script
    • The bootstrap script for your application
  • Lib
    • This is the home of SquishIt.  This is the CSS linking/minifying magic for ASP.NET MVC from Justin Etheredge.  Here is a good read on SquishIt, but I’ll go over how to use it quickly anyway later.
  • Models
    • Standard MVC Models folder.
  • Test
    • Another folder that appears to have been removed in the current version of boilerplate, but why?  It has your qUnit tests for testing your JavaScript.  Jonathan Creamer has a pretty good article here on setting that up with MVC.
  • Views
    • MVC Views folder

Alright – moving on.

Lets pop open the _layouts.cshtml folder under Views/Shared and have a look.

The first thing you will see is some conditional IE hacks. 

b4

This looks like a mess, but it’s pretty simple. All this is doing is applying a style of ie6, 7 or 8 to your html element.  Oh – and it defaults it to no-js.  What in the world.

The idea here is that you can default something to no-js and if js isn’t running in the browser, you can handle that appropriately through CSS.  You can also handle if it’s IE 6, 7 or 8 in your CSS in the same way.  For instance, you might do this…

.ie6 {
display: none;
}

I’m TOTALLY kidding.  

Next you will see some meta tags…

b5

Oh golly, meta tags.  The first one is something that IE wants.  It has something to do with cross site scripting in utf-7 and the validator will complain if you don’t have it in the first 54 bytes of the file.  Listen to Paul explain it because he does a much better job than me.  Just leave it alone and forget about it.  IE needs it.

On a side note, I’ve always wondered if this is related to the issue Rob Connery was experiencing here.

The next one is pretty cool because it does 2 things.  First it tells IE to use the 8 or 9 rendering engine if it is in fact IE 8 or 9.  That’s to stop that whole compatibility mode nonsense that falls back to the IE 7 rendering engine and effectively breaks everything.  By the way, compatibility mode is the default for apps in the intranet zone.  This overrides that.

The second says “If you have Chrome Frame installed, use it”.  That’s the chrome=1.  It won’t prompt the user for an install, but does use the frame if it’s there.  A nice to have.

Adding a description and author to your site is just good SEO.

The viewport business tells it to scale the app to the mobile device viewport.  That’s all.

Alright, cross off the meta, and moving on.

b6

Now this is some really cool stuff.  This is SquishIt that we talked about earlier.  It’s Justin Etheredge and it works great.  Simple specify what CSS files you want to include here.  As long as you have debug = true set in the web.config, you will get all the files separate.  As soon as you set debug = false in the web.config, it’s going to combine and minify your CSS and give it a random name.  I love SquishIt.  Well done Justin.  You will see SquishIt again down at the bottom.

Next is a Razor tag that includes custom head content on the fly if you have a partial or something else you want thrown in the header. This is MVC specific, not boilerplate.

b7

This next section is pretty much explained by the comments:

b8

These are two JavaScript libraries that we need ASAP, hence they are in the header.  Modernizr is feature detection for your browser and when you run your application, your html tag will look something like this…

b9

…and that frankly is pretty daunting the first time you see it.  It’s just adding classes to your html showing you what features you support so you can respond appropriately in your CSS.  Notice that no-js was replaced by js?  We have to default to no-js because if JavaScript is turned off, Modernizr can’t run.

That screenshot is from Chrome.  If you have IE 6, 7 or 8 it will look similar but with a “no-” in front of pretty much everything.

IE Eats Paste

And now the body…

b10

Nothing fancy here.  Just a standard MVC layout with a logindisplay that you will probably delete straight away.  The @RenderBody renders the views into the contents of the main div.

Notice the semantic HTML5 tags?  Header?  Footer?  <Cartman>Sweeeeet</Cartman>

b11

There is some super interesting stuff happening in these jQuery include tags.  The first of which is a protocol relative URL.  It’s basically saying that if the site is running on http, use that to fetch from the CDN.  If it’s running on https, then use an https prefix. 

The other thing here is that second script tag which basically does a test to see whether jQuery exists.  It’s a fallback in case the CDN is down.  CDN’s don’t go down I’m pretty sure.  I personally don’t think this is necessary, but people much smarter than me do.  If jQuery wasn’t loaded from the CDN, it writes a script include to a local copy.   A neat idea, but I just don’t think it’s practical.

ANYWHO.

Some more SquishIt for your JavaScript and a render section in case you want to render in some scripts on the fly with a partial view.

b12

And the grand finally – a Google Analytics script block for you to uncomment and stick your own UA ID in.

b13

Whew – we made it through the master page!  Only a few more things of note…

  1. There is a humans.txt file which is similar to a robots.txt file except it’s for humans.  Put your personal information in there so people can find it and read it.  It’s for fun.
  2. There are a bunch of icons.  These are favicons and other icons like the one that will show up if you bookmark the page on iOS.
  3. There is a 404 page with a bunch of styles and hacks in it.  A good jumping off point for a decent 404.  Please have a decent 404.  The standard IIS error message is not going to do.
  4. You may notice if you haven’t already that when you drag and select text, the highlighting is hot pink.  That’s how you know its HTML5 Boilerplate.  Anytime you see that custom text highlighting, it’s most likely boilerplate.

So that’s the HTML5 Boilerplate in Visual Studio.  It’s a bit out of date and a bit ported.  Well, a whole lot ported but still a great place to start your HTML5 development if you are using Visual Studio and MVC.

If you want to see the application we built at the session in Vancouver, you can see that here.

blog comments powered by Disqus