Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We've been using these files for a long time and we've progressively added bits and pieces to them as our own personal best practices have evolved.
Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for an update, and we thought we'd put it out there for everyone to use. By no means do we see this as the end-all and beat-all, but we think it's a fairly good starting place that anyone can take and make their own.
The Code
What's in the package is a folder structure representing an embryo of a web site:
The HTML file contains a rudimentary HTML5 document structure, with all the every day stuff like title, header, footer, etc. It also uses conditional comments to call about half a dozen IE-specific CSS files, as well as a couple popular IE-correcting javascript files.
All supporting files are stored in a parent “-” folder — this keeps the view in our file manager uncluttered. We could call it something like “assets,” but we prefer to give it a name that ensures it stays at the top of the list (which is why the CSS folders are prefixed with underscores).
In the CSS folders are baseline styles designed to reduce the visual design in any browser to its most basic state. This frees you from the annoyance of overcoming the native styling that each browser wants to apply to HTML elements such as h1, p, and ul. From this starting point it's very easy to establish your own standards for type size, margins, and other measurements.
Included in -/css/core.css is a little class that has been in use for a long time, and everyone should know about it: .mod:after. This class is the key to clearing floats simply. (If you look in -/css/patches/win-ie-all.css you'll find a class that performs the same task for Internet Explorer.) [Update: here's how to use .mod]
Two Flavors
We've created two versions of the template set. The Bare Bones version is stripped down to the essentials. The Kitchen Sink version is the version we use when we want the option to remove features, rather than add them. There is some sample content, plus a few fun things, some of which are good habits to get into, and some you'll rarely use (but we like to look for excuses to use fun stuff).
We hope, over time, to source back as many of the techniques we've used in these templates as we can. For now, I hope it suffices to say that we owe Eric Meyer a great debt, that Ethan Marcotte deserves a generous share of huzzas, and that a few happy meals go out to Michael Paige for taking a look at the files and making them better. We should also give a shout out to A List Apart, as well as Jeremy Keith's fantastic primer, HTML5 for Web Designers.
Milestones / Changes
: The Google Analytics note has been moved into the head
: The main jQuery file is now called from Google's server instead of jQuery's
: Fixed improperly closed h2 tags
: Added :focus {outline: 1;} for better accessbility
Some of this is original, much of it is not. In order to respect the original sources, we have chosen to release these templates under the BSD license.
Surely we missed something / forgot your favorite technique / did something stupid. Perhaps the semantics aren't up to snuff, or you've found a new technique that should be included. We'd love for these documents to evolve, so please let us know what you think!
