CSS-Tricks
  • Home
  • Videos
  • Almanac
  • Gallery
  • Snippets
  • Forums
  • Newsletter
  • Jobs
  • Guides
  • Shop

HTML5 Templates

By Chris Coyier On August 14, 2010

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

Related

Comments

  1. User Avatar
    Skhot
    Permalink to comment# August 14, 2010

    OMFG! Mother load of awesome!

  2. User Avatar
    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. User Avatar
    Alexandru Nastase
    Permalink to comment# August 14, 2010

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

  4. User Avatar
    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. User Avatar
    Frank
    Permalink to comment# August 14, 2010

    for WordPress WPBasis html5 SVN

  6. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    AJ
    Permalink to comment# August 15, 2010

    I miss your old design…

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    grinding mill
    Permalink to comment# August 15, 2010

    Many browsers do not support html5

    • User Avatar
      Amit
      Permalink to comment# August 15, 2010

      Use the Google-hosted javascript file that fixes that problem

    • User Avatar
      Doug Neiner
      Permalink to comment# August 18, 2010

      Real data or it didn’t happen :)

  14. User Avatar
    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. User Avatar
    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?

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    sonny
    Permalink to comment# August 16, 2010

    the boilerplate is very useful. thanks.

  17. User Avatar
    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. User Avatar
    Dan
    Permalink to comment# August 17, 2010

    Awesome, thanks for these!

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

    Great, Thanks!

  20. User Avatar
    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. User Avatar
    Lisa
    Permalink to comment# August 21, 2010

    Great collection. LT

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

    Really , awesome collection

  23. User Avatar
    Beben
    Permalink to comment# August 27, 2010

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

  24. User Avatar
    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.
Get the Newsletter!

Lots of great stuff that isn't published anywhere else!
Media Temple
CSS-Tricks web host since day one. Save 20% with code CSSTRICKS.

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. It is made possible through sponsorships from products and services we like.

*May or may not contain any actual "CSS" or "Tricks".

Follow @Real_CSS_Tricks
Contact About Archives Advertise Jobs License Subscribe Random Guest Posting

Front-End Jobs

  • The Outline is hiring a Senior Developer (Front-end)
  • Sullivan Branding is hiring a Front End Developer
  • MJD Interactive is hiring a Senior Front End Engineer
See More Jobs Post a Job
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag