The steeze front end development starter kit by @cousinwil.

This is a line-by-line glance at what’s inside of base.html and why it’s been included.

St.eeze/base.html (lines 1-7)

Here we start off in line 1 by setting the doctype to HTML5, which is much more simple than things were in the XHTML days. Then, in line 2, we include a blank IE conditional which fixes a bug that causes IE to load only one file at a time.

In lines 3-7 we have IE conditionals assigning an ".ie" class to the HTML tag in all IE browsers while also inserting classes based on the version number. Using this one can use .ie6, .ie7, .ie8, .ie9, and .ie to define alternate styles for problem browsers. This is a super-useful technique I've been using for quite some time, now. It was explained pretty well by Paul Irish.

St.eeze/base.html (lines 8-22)

Here we open up the head tag and then define charset to specify utf-8 character encoding of the document.

Then, on line 3 (line 10 in the actual base.html file) we specify the rendering engine and that we want IE to use Chrome Frame, if present.

Lastly I took the common meta tags (title on line 7 with description, copyright, and author on lines 13-15) and combined them with the Open Graph Protocol meta tags which are used for the ubiquitous facebook like button. I need this bit of code almost all the time, but if I don't need it I delete it.

St.eeze/base.html (lines 24-34)

Here we close out the head tag after calling St.eeze/base/base.css, some shortcut icon declarations, and the HTML5shiv.

Then we open the body tag. After this, starting on line 35, it's time to work your magic...

St.eeze/base.html (lines 38-62)

The rest of this template from line 62 on goes below your page template. Javascript should be loaded at the bottom of the page for best performance.

Then we include jQuery and St.eeze/base/base.js before initializing our functions. I'll talk about this more in the base.js gists, but basically what I've set up here are some simple on ready and load functions. The .load function is contained in a minimal timeout to ensure the browser spinner stops before actions like background loading images cause it to continue rather than running silently. Within this function you'll also find a .resize and .scroll function for events that you want to bind as the screen changes. Perhaps you need to reposition an absolutely positioned element or show alternate navigation once the window is scrolled below the header. This is where you'd bind such a thing. It's also another place where you remove things you don't need...

After that, we close our body and html tags and call it a day. Rock.