March, 2013: The files have been updated — this web site has not! Head over to GitHub for the very latest.
Why?
Like a lot of developers, we start every HTML project with the same
set of HTML and CSS files. We've been using these files for a long time
and have 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 our best practices to
catch up, and we thought we'd put our files out there for everyone to
use. By no means do we see this as the One True Way to start every
project, but we think it's a good starting place that anyone can make
their own.
About Version 2
The biggest change is to our stylesheets. We've been using the
browser-specific style sheets less and less often in our work so we
eliminated them, which saves us the overhead of additional downloads. In
their place we're now using Paul Irish's conditional comments technique
to add IE-specific classes to the HTML tag — creating IE-specific
styles is now as easy as .ie body { IE styles go here }.
In the same spirit, we've also moved our print styles into the main
stylesheet and added a mobile/small display style block (including
blocks for orientation). The end result is a faster-downloading page.
Also in the sprirt of simplifiction, we've eliminated the "Bare
Bones" version and are now only offering one set of fully-commented
files. (We assume everyone is tweaking the files for their own use
anyway, so go ahead and strip the comments out at your leisure!)
Finally, and sigificantly, we're hosting the files on GitHub (yay!) for better issue and version tracking.
The WordPress Theme
With the assistance of Digging Into WordPress and their BLANK WordPress Theme,
we're excited to present the HTML5 Reset WordPress Theme — a style-free
theme designed to help get your custom WordPress project off the
ground. The theme includes:
Semantic HTML5 markup
Starter CSS declarations for the basic WordPress elements
A widget-ready sidebar
jQuery, Modernizr and Analytics built in
Oh — and we've gone ahead and made the single post pages conform to the hNews Microformat, for better integration with services like Google News and Readability.
The theme is brand new, and probably not fully baked yet; we
hope you've got ideas for making it better and help us build a
best-of-breed starting point for any WordPress developer. Talk to us on GitHub.
The Code
What's in the package is a folder structure representing an embryo
of a web site. (What's in the WordPress package is an embyro of a
WordPress Theme.)
There is an HTML file that contains a rudimentary HTML5 document structure, with all the everyday stuff like title, header, footer, etc. It uses conditional comments to add IE-specific classes to the html
tag, and calls in some popular JavaScript tools like jQuery and
Modernizr. We've also included the standard Google Analytics snippet —
have you ever launched a site, then scrambled because you forgot to
stick this in? We have, but no more!
All supporting files are stored in a parent “_” folder, which 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, no matter what editor we're using. (Oddly, Transmit puts folders
at the top but Coda doesn't.)
In the style.css file are styles designed to reduce
the visual output 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.
There are also a lot of other goodies like fixes for IE (image resizing and flickering), a .clickable class, some fun things for Mobile Safari, et cetera, et cetera. Make sure to read through all the comments!
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 via GitHub.
We should also add that Paul Irish
is someone that anyone who works on the client side should be paying
attention to. A good number of the CSS bits and pieces we're using were
discovered through him.
Licensing
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.
Milestones / Changes (v2)
Released v2.
The first bug caught by Paul Irish: fixed the un-escaped .clearfix content
Removed the conditional, IE-specific style sheets; switched to conditional classes on the html tag.
Added mobile, print and rotation style blocks to style.css.
Switched from the .mod float clearer to .clearfix.
Added a number of other improvements to style.css
Reverted to the official Google Analytics snippet.