This article is intended to clearly and concisely explain, to developers, how to optimally integrate Twitter’s Bootstrap, HTML5 Boilerplate and SASS/LESS into a WordPress Theme.
I begin by explaining what each of those are and then contrasting their differences to highlight how they compliment (not compete with) one another. Furthermore I aim to provide a definitive demonstration of how to use them to create a design-ambigious Parent Theme from which you can develop future Child Themes off of. That portion does include a review of existing Theme’s that already attempt or achieve this.
Outline
Please note that this is over-simplified to focus on my key points!
Summary
Don’t think “Bootstrap vs Boilerplate”. Think “Bootstrap + Boilerplate”.
- Bootstrap provides a standardized style for various elements (ex. form elements, tables, etc…) that website designers often fail to provide to developers in the form of a Style Guide. It also introduces styles that don’t yet exist in HTML but are absolutely useful (ex. “Wells“). And it provides some JavaScript that I don’t fully understand, haha.
- Boilerplate duplicates some of the features provided by Bootstrap (ex. CSS reset/normalize) but it provides a multitude of features that are not included in Bootstrap:
- A default HTML head that includes (jQuery, Modernizr [which ensures IE8< can read CSS3/HTML5] & Google Analytics).
- Ensures that the your website will scale properly on mobile devices.
- Includes browser and Apple touch icons as a reminder to create your own.
- Outdated browser warning.
- And more…
These two combined (including SASS/LESS) provide a design-ambigious foundation for a Parent Theme. Opposed to Twenty Ten-Thirteen which are centric to the design. Meaning you end up overwriting the majority of key template files to achieve the custom design and layout you want. And you’re missing out on some of the current HTML/CSS techniques and libraries that I’ve demonstrated above (ex. the WordPress reset is lacking).
Themeifying
Assuming you’re Theme and WordPress are under version control with Git, Bootstrap can be included as a Submodule, since those should be treated like core files and left untouched.
The Boilerplate, on the other hand, may not be utilized, effectively, as a Submodule (in my experience). This is due to the fact that many parts of it are intended to be modified. Theoretically, you could make it a Child Theme from it and overwrite files as necessary, but I think it would get messy (I’ll do a thorough test of this though).
Existing Bootstrap Boilerplate WordPress Themes
There are several individuals and organizations that have began to develop WordPress Themes based off of Bootstrap and Boilerplate that utilize LESS and or SASS. Here is my take on the most popular ones, to date, that I’ve identified and my feedback on them:
- Roots seems great, though I don’t like the fact it requires Grunt to be installed because I’m often working on servers I can’t installed software one. However, with Transmit’s “Mount as Disk” option I can install it on my local Mac and have it watch the necessary directories as I would with Scout.
- Shoestrap is the prodecessor to Roots, in some way. We settled on using this after
- Bones appears to be
- WP-Bootstraps
These Parent Themes don’t just implement Bootstrap, Boilerplate and LESS/SASS; some also introduce PHP functions (ex. needed)
Plugins
One of the things that occurred to me towards the end of writing this Plugin was the concept of Bootstrap as a Plugin instead of directly embedded in the Theme. More to come on this…
