Html5 Starter Pack by Radu Chelariu | Sickdesigner.comDownload the pack Latest version: 3.1 (July, 2013)
Whenever I start a new project, I really hate doing all those repetitive bits over & over again. And I'm betting that, since you're here, you do too.
This starter pack addresses this very issue in the cleanest, most honest and real way I can.
Why a starter pack?
This pack is born out of consideration for fellow designers and developers. We, in the business, work on a very wide variety of projects different in so many ways, both large and small.
To me, any kind of starter pack or boilerplate, as some call these things, are utterly useless when the stuff they drag in with them only causes bloat and confusion.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Antoine de Saint-Exupéry
Certainly, Antoine de Saint-Exupéry's famous saying doesn't apply quite to everything, but in the case of a starter pack, it absolutely does.
And in keeping with the above quote, this pack features the bare essentials and no more. Check'em out below.
Within the single HTML file, index.html, you can expect to find just the basic stuff, with little to no fluff. Sure, there's a few elements here and there so you can figure out what's what, but, mostly, the juicy stuff is in the
Old MacDonald had a style
I still use my own CSS reset because I'm a dickhead and I know it,You'll find Iain MacDonald's reset, which is based on Eric Meyer's classic code and my old reset, because Iain's is the most considerate of all and also because Normalize is too little, too late, and too much. Along with the regular reset is an HTML5 specific reset.
The HTML5 Starter Pack was one of the first of its kind to actively push
@font-facefed fonts. This latest major update is no different. This time, I'm taking it further, pusing for a wider use of icon fonts. I included the wonderful Modern Pictograms, license and all.
- Box-sizing FTW
Every project should declare site-wide styles first. If you're in the habit of class-ifying everything and then styling according to said classes, this will get you on the right track. Included in the stylesheet are the most common tags, ready for your designery magic.
Responsive, of course
Included at the bottom of the stylesheet are 6 media queries set for the most popular breakpoints ready for some responsive tomfoolery. Adjust accordingly, of course.
Full metal divs, baby!
Submitted for your approval is one, very special, line in the CSS, line 112. Use with care and judge not, lest ye be judged yourself.
document.readyis included in the single location where you should be writing your scripts, custom.js. Other than that, there's just my own old and trusty HTML5 shiv.
IE, of course
Included is an ie8.css file. Because if you're still supporting IE7 or IE6, then you're not doing your job right. Educate your clients!
For whom the code tolls
A humans.txt as well as a
meta name="author"are included. Because we are not robots.