I’ve noticed that whenever I make a site, 99% of the time I copy at least 50% of the markup from another site I’ve done before instead of re-writing the structure. It saves a lot of time, and it makes styling easy- I’m re-styling the same site as I’ve already done, maybe with different colors and images. So, what I’ve done is make a generic template that acts as a site-starter. It’s pretty full, so it may not be to everyone’s tastes, but it covers most scenarios I’ve run into.

Here’s what I use. Feel free to copy it and do whatever you want, it’s GPL v2 licensed. (zip file)

• The Html5 Shiv (conditionally for IE, of course.)
• The CSS is Richard Clark’s HTML5 Reset Stylesheet, plus some stub styles like image / text replacement for the h1.
• Whatever jQuery UI 1.8 theme (if applicable.. most of my sites use jQuery UI, so I added it to my template.)
• Conditionally, an IE stylesheet. I go ahead and lump IE 6+ into one bucket. This could be broken out into several stylesheets (per IE version), but I’ve found that using the reset sheet generally limits the amount of IE fixes I have to do, so there’s not much wasted download time at all for IE users. If your stylesheet gets too heavy, break it out at your discretion.
• Several IE conditional statements to build IE wrapper divs to make styling easier. If you’re including styles by version, you probably don’t need this. Also has the added benefit of fast browser version checks with jQuery.
• Header with heading, subheading. The h1 is a link sometimes, using css image/text replacement. I went back and forth on whether the page title or the site title should be an h1- and chose an h1 based on arguments on this blog post.
• Seperate nav. I almost put it with header- but I like keeping the header more pure for the logo/title and subheading.
• A div to wrap all of the content, and then a “maincontent” div. I haven’t found better names yet, so here you go. They’re not section elements, like most of the content is in- the structure is there strictly for styling reasons.
• An example section. I like giving it an id with the page title, so I can add in page-specific styles as needed.
  • The section’s header, and content, as is reccomended
• An aside, styled as a right-hand column with subsections
• A footer, with links (probably the same as the main links), and copyright information. I’ve used an address element to wrap the webmaster’s email. Semantics!
• Finally, jQuery 1.4.2 and jQuery UI 1.8 pulled from offsite sources (parallelize downloads, plus it’s likely cached from another site)

So, the idea was to get about an hour or two’s work done by simply opening up a file. I think I’ve accomplished this- anything extra I can remove, I can switch the left and right columns pretty easily (or add a third, or fourth), and I have some very basic styles down (just change those grays to something a little more colorful.) Be free, my template!

Tags: Cascading Style Sheets, css, Data Formats, html, HTML5, Javascript, JQuery, Style Sheets