H5BP a fancy acronym, a fancy way to design

H5BP is a weird pseduo-acronym for the HTML 5 Boilerplate. It’s a way to get started designing a site in a way that utilizes the most forward (and backward) compatible code possible and has an ear to some extreme optimization. It’s also what I used to design this site, well, sorta.

HTML 5 Boilerplate

If you’re not familiar with H5BP, part of its deal is that it has what’s called a build script included. This build script runs through your stylesheets, html (or php) files, javascript, and images and compresses the heck out of them. In fact, it also combines javascript and stylesheets so that you can minimize HTTP requests. You run the build script once, from the command line, which results in a “publish” folder that you can upload.

Thing is, it doesn’t work well with WordPress themes. At least not right away. WordPress expects files (like style.css) to be in certain places and include certain information. WordPress also has some default styles that should be included, and it requires some extra work to play nicely with jQuery.

So, while creating this site, I’ve started building my own theme starter based on H5BP. You can check it out on GitHub — feel free to download your own copy, clone it, or contribute. It’s not really a “regular” WordPress theme, so it’s unlikely I’ll ever offer it through extend.

My version of the H5BP also includes some concepts from 320 and Up — in that I think a mobile-first development cycle makes sense. The default stylesheet (default-styles.css) is designed to set the styles for a 320px wide browser (i.e. iPhone in portrait) with more styles included as the screen size gets bigger.

Leave a comment

Your email address will not be published. Required fields are marked *