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.
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!
No wonder people love it.
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 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.
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
… 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.
Twitter Bootstrap & HTML5Blank Basic WordPress Theme
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.
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…
Getting Started with Twitter Bootstrap
Twitter Bootstrap Tutorial
Getting Started With HTML5 Boilerplate
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.