HTML5, CSS3 default templates

Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.

20 thoughts on “HTML5, CSS3 default templates

  1. Nice piece of work. I’m just wondering: wouldn’t it be more efficient to load the Javascript libraries at the bottom of the page instead of in the [head], maybe with a small Javascript loader?

  2. Hey Jeffrey,
    I have been working on a html5 reset myself, but this one is superb — highly recommended! Thanks for sharing Jeffrey and Tim thanks for creating. :)

  3. It’s great to have some giants’ shoulders like yours to be able to stand on, and be confident about the quality of the material. Thank you for that

    I’m curious about how it compares with http://html5boilerplate.com/. I guess they don’t have exactly the same goals (in the details) but they seem to play in the same field.

    Thanks

  4. I downloaded these templates yesterday and the reset contains depricated HTML 4 selectors and no HTML5 selectors. Did this change? This was not an HTML5 reset yesterday. Be careful.

  5. Mark Eagleton: You’re right, I had accidentally used an older version that included Eric Meyer’s original reset CSS instead of HTML5 Doctor’s updated version. But I quickly remedied that yesterday :)

  6. We need a better name for what we do.

    I occasionally say “pixel-pusher” but I realize that’s somewhat diminutive. Thanks for sharing another gold mine!

  7. How come more people don’t know about the overflow:auto method for clearing floats?

    Amen. This clearing of floats is documented as part of the overflow spec, after all. One case I found in favor of using a clearfix hack is when you need to preserve a box-shadow (or other content that extends beyond the bounding box of a nested element). overflow:hidden; or overflow:auto; cuts off the shadow. I actually used this hack for the first time in two years today. :(

  8. Thank you Tim! This is an elegant solution that i’m sure a lot of people have been looking for! It’s nice to have a starting point I can trust for my web projects.

Comments are closed.