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.
Please note that this is over-simplified to focus on my key points!
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).
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).
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:
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…
Since 2005 we've been offering digital and content marketing strategy and implementation. Including website development, search engine optimization and marketing, search marketing and more.