HTML5 Boilerplate: a rock-solid default | Hacker News Reader

HTML5 Boilerplate: a rock-solid default

html5boilerplate.com

178 pointsmcantelon23 comments

Working on a similar analog to the .htaccess for nginx. Anyone with input/interest please fork and update as appropriate. Obviously we can't get 100% functional parity, but we can get close! http://gist.github.com/518000

HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.

For me, future-proof means it's easy for me to maintain. There is just far too much here I find unnecessary to make it easy for me to maintain.

But then again, I find designing websites in Photoshop silly.

I think you can pull some of the good stuff from here that you need and leave the stuff you don't.

As for designing websites in photoshop, at work we do it in keynote. It works surprisingly well and you can use mocks for presentations too! reference -> http://blog.swixhq.com/designing-swix-with-keynote/

OmniGraffle is also a great tool for wireframing and simple web graphics. Every time I complete a task without opening Photoshop, I want to give OmniGraffle a high five.

That keynote idea rocks!

I'm not designer, I wouldn't even class myself as a developer, but like everyone else I have a few web projects on the go. I've been searching for a low overhead way of getting a design mock-up down and your keynote idea hits it on the head.

Really being a hacker, I just want to mock-up a design that isn't butt ugly and for the tools to get the hell out of my way so I can start cutting code.

Keynote is a great, flexible application. I like to use it for wireframing, and then use Photoshop to create the individual page graphics (rather than designing the whole site layout in there).

Check out http://keynotekungfu.com/

I agree. I tend to shy away from large frameworks that are sort of "all in one". I prefer small tools that work well together, but can also be used on their own. For HTML5 I just use a simple CSS reset + graceful degradation when JavaScript is not available. If I "need" an HTML5 feature I make sure that there is JavaScript code to fall back on (but not a general framework) and that the whole thing still works if JavaScript is not available.

Neat resource, definitely something to borrow from, but I think I'm with Fuchs on this... http://mir.aculo.us/2010/08/10/pragmatic-html-css/

well said. i would find this more useful as a reference index than a template. it says "quickly" and "right-footed" but i think it's give and take between the two.

This is crazy awesome for power users that need a lot of control.

Philosophically, it makes something meant to be easy: html5, and makes it seem like rocket-surgery.

Either way, It’s a great learning tool.

I wasn't sure whether to feel happy that all kinds of great cross-platform hacks were well-documented, or sad that so many millions of hours have gone into dealing with them. :-/ I wonder again when I see things like this whether the browser's let-me-lay-that-out-for-you approach was the panacea it sure seemed like at the time.

+1 for "rocket surgery"

Interesting to see the use of HTML serialization instead of the usual XHTML stuff.

I've been going the HTML 4 (and now HTML5 with HTML serialization)route because I don't send pages as application/xml or whatever it should be. But it often means dicking with this or that tool or framework that bought into the previous future-proof technology, XHTML.

Just a note: the MIME type does not NEED to be application/xml. There is a big difference here: text/html will tell the browser "Hey, try to render this page. If something doesn't work do your best." 99% of web pages out there do this. application/xml tells the browser "Treat this as XML. If it's not valid, throw an error and quit." Naturally, most people are shying away from this option since one little mistake can make your entire website unusable.

Sure, but if it's going to treat it like HTML, then why not just send proper HTML?

Agreed. However, if you are not sure that every single bit of code in your application produces valid HTML then you are much safer with the text/html MIME type. As for the SGML vs XHTML debate, I'd rather not get into that since the whole thing got a bit religious at this point.

XHTML is proper HTML5.

what does "HTML serialization" mean?

This might help: http://answers.oreilly.com/topic/983-html-5-overview/

This as well: http://stackoverflow.com/questions/256953/html-5-versus-xhtm...

Basically, the spec says, for example, that HTML5 has an 'html' element, and it may contain a 'head' and a 'body' element. (I'm winging it here.) And the 'head' element may optionally contain one or more 'meta' elements with attributes ... whatever.

So far so good; the spec defines the structural items. But it also says, look, you can manifest, or serialize, this using XML (i.e. XHTML) syntax, in which case you need to have true, proper XML (and that means, for example, that empty elements such as 'meta' or 'br' must be closed, typically using the ' />' stuff). Or you can use HTML syntax, in which case there are a set of empty elements ('meta', 'br', 'img', for example) that do not need an end tags or that ' />' thing.

Also see: http://hixie.ch/advocacy/xhtml

It comes down to what you think browsers are going to do based on what you send them.

Thanks for this. It's too bad it has to be so incredibly ugly to make up for various incompatibilities, but I really like the references commented in the code at least.

Thanks for this link. I was just looking at a similar idea here: http://html5reset.org/

I'm digging this! I will try it out for my next web project. Thanks!

This is really great — an incredibly thorough set of templates.

Reply on news.ycombinator.com