The real HTML5 boilerplate(csswizardry.com)

84 pointsby chaosmachine15 anni fa30 comments

http://csswizardry.com/2011/01/the-real-html5-boilerplate/

10 comments

His problem with the 'boilerplate' is that it's named wrong. It's more of a knowledge repository than a boilerplate.

Personally, I find it a lot easier to delete things than add them, so the mis-named boilerplate is a pretty nice place to start, if you ask me.

Tyrant50515 anni fa

Yea, I was thinking the same thing. I almost googled what "boilerplate" means and where it came from but then I decided to get back to work instead.

shantanubala15 anni fa

Yeah. And it's not like I can't use previous code from previous projects as a starting point (since I use Python, I have a skeleton Jinja template handy that is all I use for HTML5). If all he's providing is a couple tags and the doctype declaration, why would I even need his "boilerplate"? A knowledge repository is a lot more useful than basically telling me I need a doctype, html/head/body tags, and a compatibility layer for IE.

lambda15 anni fa

Here's my HTML5 Boilerplate:

    <!DOCTYPE html>
    <title></title>

It's valid, it works in all major browsers, it doesn't assume anything about which features I want to use, it leaves me in standards mode, not quirks mode, and I can type it out from memory instead of having to have some boilerplate saved somewhere.

JoelSutherland15 anni fa

HTML5 Boilerplate is great if you just work on a few projects, because it is easier to delete things than remember them.

If you work on new projects fairly frequently, it's better to develop your own boilerplate as a starting point. This is what I do and it saves a bunch of time.

So I understand this author's complaints. If you make web sites (not web apps) there is quite a bit in HTML5 Boilerplate that just isn't for you.

All that said, my biggest complaint is that it is good. So good that it has probably meant that other, more project-type specific HTML5 boilerplates don't seem to exist.

edit: A cool tool for HTML5 boilerplate might be a "build custom download" similar to what jQuery UI has.

necolas15 anni fa

I think I heard that a "build custom download" tool is planned. In the meantime, a basic version might suit some of your needs: http://initializr.com

nimbupani15 anni fa

Yes it is being planned, here is our list for a RC release soon: https://github.com/paulirish/html5-boilerplate/issues/#issue...

oewolf15 anni fa

Ah, if we could download it directly in haml... :)

necolas15 anni fa

The tone of the article was surprising. The alternative boilerplate is far too simple to cut it as a boilerplate for people building even the most modestly sized sites. It certainly doesn't cater to the majority of professionals in the way that the HTML5 Boilerplate project tries to.

A previous article, Easy HTML5 Template http://www.impressivewebs.com/easy-html5-template/, also proposed an alternative boilerplate. But it clearly distinguished between what the HTML5 Boilerplate project is aiming to do, and why/when a simple boilerplate has its place.

sudonim15 anni fa

I suspect that the author references HTML5Boilerplate in an inflammatory way in order to get us talking about it.

I view the HTML5Boilerplate as a cross-browser-reset and sensible defaults for everything else. If those defaults don't work for the author, he could fork it on github and change them.

defroost15 anni fa

681 lines? The HTML5 Boilerplate that I grabbed from Paul Irish's website, the commented version, is 94 lines. And much of the stuff can be removed. I have my own HTML5 boilerplate as a TextMate snippet, but augment it.

One thing about the Paul Irish boilerplate: why is the doctype declaration in lowercase?

<!doctype html> as opposed to <!DOCTYPE html>. TextMate doesn't seem to like the lowercase doctype as it highlights it in red. Not sure about Vim or Emacs.

strager15 anni fa

I didn't check, but I think the 681 includes the CSS and such.

The "doctype" part is case-insensitive, according to the pseudostandard on WhatWG.org: http://www.whatwg.org/specs/web-apps/current-work/multipage/... I guess your editor was configured incorrectly; shows up fine in both forms in Vim.

nimbupani15 anni fa

Yes TextMate doesn't like it sadly :/

chaosmachine15 anni fa

PS: Here's a really simple HTML5 template I found useful: http://codesnipp.it/code/1513

Tyrant50515 anni fa

Just a heads up, <hgroup> takes the nodes out of the document outline.

chaosmachine15 anni fa

Except the highest level (h1 in this case).

http://html5doctor.com/the-hgroup-element/

Supermighty15 anni fa

I never cared for the word "reset" for css resets. I always considered them "sane defaults". I take the reset and set the values to what works for me and build my site off of that.

wahnfrieden15 anni fa

It's called reset and not sane defaults because most CSS resets do not provide sane defaults, just a consistent base. You're supposed to override the resets yourself.

Supermighty15 anni fa

Or you alter the reset itself so you don't have to override useless values.

jmillikin15 anni fa

Javascript? CSS? You don't need all that crap. Boilerplate is supposed to be stuff you can't do without, not a bunch of froo-froo frivolities to cater to ancient browsers. Here's all the HTML5 boilerplate you need:

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<title></title>
  </head>
  <body>
  </body>
  </html>

po15 anni fa

Yeah! and why even bother closing that </html>? Google doesn't. Hell, why bother with it at all? And why assume the developer wants english? Here's the real html5 boilerplate:

    <!DOCTYPE html>
    <meta charset=utf-8>
    <title>Title!</title>
    <p>Content!

I left in the charset=utf-8 to prevent the utf-7 security vulnerability. That's important. I think I'll go check this into github. :-D

coderdude15 anni fa

Did you even click the link?

http://csswizardry.com/2011/01/the-real-html5-boilerplate/#h...

It's extremely minimalist as it is. Your example is lacking of things you would want to include such as at least specifying the charset.

jmillikin15 anni fa

Yes, I clicked the link. I see no reason why so-called boilerplate includes JavaScript, <meta> tags, and a whole bunch of CSS.

If you want to display non-ASCII characters, use XHTML5 -- trying to get Unicode working portably in HTML5 isn't worth the grey hair.

coderdude15 anni fa

It includes the reset CSS so that you can get your design working consistently across UAs. The JS was included so you could use the fancy new HTML5 in old versions of IE. Seems like a reasonable include. The reset CSS is basically mandatory either way, regardless of what version of HTML you use. I'm not sure what you mean by getting Unicode to work in HTML5. UTF-8 encoding is pretty universal at this point and not dependent on your markup version -- not to mention the existence of character entities. There's a Unicode entity on this very page and this site doesn't even use a doctype: ♥

rdrimmie15 anni fa

I strongly suspect jmillikin is taking the piss and the tone may not be being transmitted with the text. It is the same argument as the article itself, reductio ad absurdum.

catshirt15 anni fa

not that i prefer it this way, but w3 seceded when they renamed html5 to html. thus, i'd say javascript and css actually are very much a part of html5 now.

pacomerh15 anni fa

I rather have the option to remove things, it's your duty to know which parts are html5 and which ones are not. The name may be a little off, but I consider the name just a label, like many other things on the internet, they're just labels. Paul has great intentions and I also found the cleaner "real" boilerplate useful, thanks.

lhnn15 anni fa

Call it "HTML5 Utility Belt" and the article's argument goes away.

(I was going to say it "evaporates", but it's all hot air already.)

paulirish15 anni fa

Not a bad name. I had it previously called "frontend pro template" but didn't ♥ it. But I agree the name is contentious. It's not a real "boilerplate" by the book. shrug

Since it's my project Harry is critiquing, I'll republish my comment I had left there:

So indeed, the boilerplate makes assumptions. It’s all based on the sort of websites I’ve been developing for the past four years: jQuery-based, forward thinking, but with some level of support for IE6.

And, yes, there are some opinionated choices in there; but I dropped a lot of other aspects as I decided they weren’t likely to be used by 80% of users. jQuery, google analytics, and IE6 seemed like safe bets. But maybe that’s changing…

Indeed much of the features (test suite/yui profiler/analytics) is predicated on the idea that it’s easier to hit Backspace than it is to go and seek out those files and drop them into your project. I think people’s constant requests to get javascript libraries on CDNs only proves there is a usability problem with downloading files to add to your project.

But hey, I hear ya, and I don’t want this project to make developers think it’s the only way to do HTML5. But it’s probably the safest unless you like hitting problems that have cropped up again and again in the past 5 years of web dev.

If I could just educate users en masse on all the things they need to know to execute on a project flawlessly, I would. (And I’m also trying to do that) But distributing best practices in the form of a packaged product is also a really effective teaching tool. :)

joakin15 anni fa

Dont take that rant too serious, you did amazing work gathering all the stuff for the template, and i bet that for many people has been really useful.

I find painless to delete some stuff I dont want, better than start adding all the stuff I do, and I learnt some stuff from the commented version.

Thanks for the "boilerplate", I love it