The Rundown on Front-End Web Design Templates: Twitter Bootstrap, HTML5 Boilerplate, and More

Front-End Web Design Templates

If the Internet has taught us anything, it’s that nerds are… pardon my French, the fucking best. As long as I’ve been on the Internet, since 1994, I’ve seen nerds sharing and collaborating.

In 1996 when I built my first website I did so by coding my site by hand and uploading it to GeoCities.

A decade later (give or take) and technology had advanced to the point where a CMS like WordPress gave control over novice web developers to build more powerful and robust websites. Sure, the code is there to give you real control over your design, but with themes and plugins, functional website design was within the grasp of the DIYer.

Now, it seems we’re in the next evolution of web development: the boilerplate.

The current state of things (as of early 2013) is that WordPress, and other CMSes are doing a great job of handling content. What developers needed was an easy way to develop and deploy websites based on the latest technology: HTML 5 and javascript.

This has led to a bunch of “boilerplates” and “bootstraps” and other words that mean “built in code you can reference for rapid web development”.

In this post we’re going to look at Twitter Bootstrap, HTML 5 Boilerplate and ways to extend them onto WordPress. Let’s dig in!

The Basics

Twitter Bootstrap

http://twitter.github.com/bootstrap/index.html

Twitter Bootstrap is a collection of CSS and javascript elements that will make your life much easier when you’re building your website. It includes CSS for scaffolding. This makes it easy to place content on your website using a grid system. There are 13 includes jQuery plugins that do everything from modal windows to alert messages, tool tips, to drop down menus. It also aids in typography, button design, icons, and a host more. Oh, and it’s responsive by default too.

No wonder people love it.

HTML5 Boilerplate

http://html5boilerplate.com/

HTML5 Boilerplate is straight up stoked that they are the most popular front-end template on the web. The list of sites that use it include Google, Microsoft, NASA, Nike, and more. That being said, they aren’t too keen to share exactly what it is on their website. The attitude seems to be “download it and find out”. That’s why I prefer Initializr instead.

Initializr

http://www.initializr.com/

Initializr is an HTML 5 template generator based on HTML 5 Boilerplate. Now that we know that, we can learn a bit more about HTML 5 Boilerplate.

According to the creators of the website, including Paul Irish (Chrome dev team) “HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than three years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.”

With Initializr, you get a custom template, based on the HTML5 Boilerplate. Dig that.

HTML5Blank

http://html5blank.com

If you’re wondering how to integrate something like HTML5 Boilerplate into your WordPress Theme, you can do something very similar with this HTML5 Blank WordPress Theme. If you’d rather go the Twitter Bootstrap route with your theme development, then you need…

Twitter Bootstrap + WordPress

WordPress Bootstrap CSS

http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

… this plugin for WordPress. It ads Twitter Bootstrap to any site. Couldn’t be easier.

If this isn’t enough help, there are several good WordPress themes that incorporate Twitter Bootstrap that can be customized right out of the box.

WordPress Bootstrap

http://320press.com/wpbs/

This WordPress theme, and the one below are based on Twitter Bootstrap. By starting with this theme when doing theme development, you have access to the base CSS, javascript, components and more in your website right from the beginning. And because it’s a basic theme, it’s meant to save you the time of creating the beginnings of a template and hooking it up to Twitter Bootstrap so you can get right to developing.

BootstrapWP

http://bootstrapwp.rachelbaker.me/

Twitter Bootstrap & HTML5Blank Basic WordPress Theme

Roots Theme

http://www.rootstheme.com/

To this point, it’s hard to know whether Twitter Bootstrap and HTML 5 Boilerplate are meant to be used together, or are competing technologies. This basic WordPress theme answers that question. The two are fast friends.

Education

Still, it can get daunting to download one of these front-end themes without knowing what you’re getting into. Thank god there are tutorials for that…

Conclusions

Front-end templates are the new hotness. Grab your copy of Twitter Bootstrap, HTML5 Boilerplate or any of the other templates on this site and then show & tell us how you’re using them in the comments. We’d love to see what you’re working on!

Want to know more about Twitter Bootstrap? Check out these 12 Twitter Bootstrap Tools and Resources that I love and highly recommend.