The real HTML5 boilerplate

So how little code do you need to get a HTML5 build started? Hardly any, that’s how much:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML5 boilerplate – all you really need…</title>
	<link rel="stylesheet" href="css/style.css">
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body id="home">

	<h1>HTML5 boilerplate</h1>

</body>
</html>

/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
/* GO! */

Copy and paste those files and save them somewhere. There is your HTML5 boilerplate.

That is all you need to begin building any HTML5 project. Need to fix .pngs in IE6? Add that later. Need some analytics? Add that as you need it…

So there is my opinion, and I’m aware a lot of people agree with it. I am also aware that a lot of people will vehemently disagree. But seriously, if you think about it, that is pretty ridiculous for a boilerplate, no?

Addendum

There seems to have been some mixed messages on my part. I’m not saying the code in the HTML5 Boilerplate is bad, far from it. A lot of it is very useful and I would learn a lot from, what I am saying is that it’s just too verbose for a starting point.

What might be a better idea (and one that’d change my opinion entirely) would be to have a jQuery UI style builder, whereby you can cherry pick the bits you do want before you start building, never having to see or deal with the bits you don’t.

Update

So Paul and I spent a good 45 minutes or so chatting over GTalk this morning about this article, my opinions and other HTML5 Boilerplate things. It was a very interesting chat and one that I’m very glad Paul and I got to have.

It raised some interesting points and ideas for further development of the boilerplate, however I shall avoid sharing them here because, well, it’s not my place to share it.

Paul, thanks :)

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

CSS Wizardry

Assumptions

Gone to our heads?