Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

HTML5 Templates

Avatar of Chris Coyier
Chris Coyier on Aug 14, 2010 (Updated on Aug 8, 2011)

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Papa bear: HTML5 Boilerplate
Mama bear: HTML5 Reset
Baby bear: HTML5 site template

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Skhot
    Permalink to comment# August 14, 2010

    OMFG! Mother load of awesome!

  2. Stephen Hamilton
    Permalink to comment# August 14, 2010

    Been exploring the Boiler since Jeffrey Way did a post on it yesterday on Nettuts. I don’t think I’ve ever felt as confident going into new projects as I do now. This is dope.

  3. Alexandru Nastase
    Permalink to comment# August 14, 2010

    hell yeah !!!!!!!! life is easier THANKS A MANY CHRISS

  4. Shane Parker
    Permalink to comment# August 14, 2010

    I can’t wait to use these, we live in a glorious age of web dev!

  5. Frank
    Permalink to comment# August 14, 2010

    for WordPress WPBasis html5 SVN

  6. adrian sinclair
    Permalink to comment# August 14, 2010

    I saw the boiler plate on nettuts, it seems like way too much. The HTML5 makes too many assumptions about what you’re making, but would definitely be a time saver if you need all that. The HTML5 site template seems very flexible, but is so simple i could do everything with just the snippets I have in espresso in 5 seconds, faster than I could import that, even using the command line and git clone. I think the best solution is to use the HTML5 reset but strip it down and put individual lines into snippets, that way you can type:
    beginhtml {tab}
    metadescription {tab}
    inlinestyle {tab} etc.
    Now that would be an amazing espresso sugar or textmate bundle!

  7. Shane Parker
    Permalink to comment# August 14, 2010

    Hm, I’ve been going through the HTML5 boilerplate a bit today and it’s almost too daunting to go through everything and strip out what you don’t want/need. Plus, it seems like there are a LOT of work a rounds just to get the HTML to work rather than doing it with, say, javascript. It’d be nice if there was some sort of walkthrough/screencast that would walk through the process, explaining everything along the way as well as maybe providing a stripped-down version.

  8. Jack Nycz
    Permalink to comment# August 15, 2010

    Hey Chris – Just noticed this form breaks in Google Chrome if you make the screen to small – the website field falls below the other to and still floats right, looks pretty weird. Other than that I’m lovin the new redesign, well done!

  9. Simon
    Permalink to comment# August 15, 2010

    Boilerplate looks amazing. Even if you don’t use it all, the code is very well documented and there’s so much to learn from it and all for the bargain price of absolutely nothing.

    I’m consistently amazed by the design and development community. Thanks for the heads up on these, and everything else on your site. I really appreciate how much easier you make my programming life!

  10. AJ
    Permalink to comment# August 15, 2010

    I miss your old design…

    • Amit
      Permalink to comment# August 15, 2010

      I agree with AJ. I’m having a really hard time adjusting to this design. The other one (in my opinion only) was easier to read and navigate

  11. Alistair
    Permalink to comment# August 15, 2010

    Thanks for another post Chris…

    On another note, when returning to the site to see the new design you had announced would be coming out. Yesterday my first impression was oh no, but I have returned of course a few times since and it’s completely grown on me.

    Great work!

  12. paul
    Permalink to comment# August 15, 2010

    are you still working on the design?
    the headings font doesn’t look good on chrome on PC. and the blue buttons have grey square borders. the website URL text field in the comments form is also out of place

  13. grinding mill
    Permalink to comment# August 15, 2010

    Many browsers do not support html5

    • Amit
      Permalink to comment# August 15, 2010

      Use the Google-hosted javascript file that fixes that problem

    • Doug Neiner
      Permalink to comment# August 18, 2010

      Real data or it didn’t happen :)

  14. Victoria Web Design
    Permalink to comment# August 15, 2010

    Chris, this is awesome! I am really focusing on HTML5 this week, possibly converting some existing sites. Thanks!

  15. Hannes
    Permalink to comment# August 16, 2010

    I appreciate the work and everything, but isn’t it a little bit much hype for some templates combined with some best practices?

    • Alistair
      Permalink to comment# August 16, 2010

      hype because it’s here on css-tricks, and net-tuts? it’s content created by people like you and me buddeh.

      this is a pretty basic post, 3 items only.

      you are right, it is some templates with best practices.

    • Hannes
      Permalink to comment# August 16, 2010

      Yes, you’re right, I was just wondering why “Boilerplate” is all over my feedreader for the last week – no critic – just a thought ;)

  16. sonny
    Permalink to comment# August 16, 2010

    the boilerplate is very useful. thanks.

  17. Juan
    Permalink to comment# August 17, 2010

    In your new wordpress theme of the website, what is your opinion about IE7 and IE8, not yet supports HTML5! What do you think about it?

    Thanks and Congratulations!

  18. Dan
    Permalink to comment# August 17, 2010

    Awesome, thanks for these!

  19. Craig Fordham
    Permalink to comment# August 18, 2010

    Great, Thanks!

  20. Dwight Zahringer
    Permalink to comment# August 19, 2010

    These are great – thanks for sharing. It will be great when the web moves this way and everyone adopts these practices.

  21. Lisa
    Permalink to comment# August 21, 2010

    Great collection. LT

  22. Deepak kaletha
    Permalink to comment# August 25, 2010

    Really , awesome collection

  23. Beben
    Permalink to comment# August 27, 2010

    any for blogspot? :D qiqiqiqi ;)) :”>

  24. Voice messaging
    Permalink to comment# September 10, 2010

    Message Corp takes text messaging to a new level.
    Our interactive text messaging makes it possible to engage
    in a highly personalized and fully-automated customer dialog.
    As a result, customers can access product inquiries,authorize
    payments, and confirm transactions – conveniently from their
    mobile phone and without the assistance of an agent.And for
    those customer interactions that require special handling,
    we make it possible for your agents to seamlessly interact
    with your customers via text.

This comment thread is closed. If you have important information to share, please contact us.

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top