11 Aug 2010 7 am eastern

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.

Filed under: Browsers, bugs, Code, Compatibility, CSS, CSS3, development, Free, Happy Cog™, HTML, HTML5, Ideas, industry, links, Standards, State of the Web, The Essentials, The Profession, Tools, Web Design, Web Design History, Web Standards

20 Responses to “HTML5, CSS3 default templates”

  1. Gary Aston said on

    Generous — thanks Tim!

  2. Hay Kranen said on

    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?

  3. Yoosuf said on

    Woow – Thanks Tim Murtaugh

  4. Kevin Smith said on

    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. :)

  5. James Lau said on

    Amazing collection! Will definitely put it to good use.

  6. hiralp said on

    Brilliant.. cheers! Nice work

  7. Jeremy Lecour said on

    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

  8. Rimantas said on

    There is also http://html5boilerplate.com/
    Anyway, learn your craft and use neither.

  9. Mark Eagleton said on

    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.

  10. Clinton Paquin said on

    Excellent post! Can’t wait to roll up the sleeves and get into these, thanks again Tim!!

  11. Mark Eagleton said on

    It’s safe. They did add in the HTML5 element selectors. Yesterday. Kind of a gross oversight for a site called HTML5 Reset.

    Be sure to strip out the deprecated HTML 4 elements to make the bare bones version bare bonesier.

  12. Tim Murtaugh said on

    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 :)

  13. Russell Heimlich said on

    I hate the method of clearing floats proposed. The clearfix/mod class is downright mornoic. How come more people don’t know about the overflow:auto method for clearing floats?

    http://www.russellheimlich.com/frontend-tips/clearing-floats.htm

  14. Trace Meek said on

    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!

  15. Jeffrey Zeldman said on

    Russell, stop shouting, you’ll hurt your throat.

  16. Mark Eagleton said on

    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. :(

  17. Andy Ford said on

    @Russell, perhaps they find overflow:auto equally marnoic.

  18. Igor said on

    Great collection, I was looking for html5 templates.
    Thanks a lot!

  19. Keith Clark said on

    Could I throw my ie-css3.js project into the mix? It’s a small script (under 5k) for adding CSS3 pseudo-class and attribute selectors support to IE6-8.

    http://www.keithclark.co.uk/labs/ie-css3/

  20. Ryan Munger said on

    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 off.