WordPress, Twitter Bootstrap, Boilerplate and SASS

This article is intended to clearly and concisely explain, to developers, how to optimally integrate Twitter’s BootstrapHTML5 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 (jQueryModernizr [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…




By Spencer Hill
Categorized in: Programming, Tips and Tricks, Uncategorized, Website Development
This post is related to: best crm, best crms, better crm, contact manager, contact manager wordpress, contact manager wp, crm free, crm plugin for wordpress free, crm slipfire, crm solution, crm solutions, free crm, free crm plugin, genesis crm, lead tracking, lead tracking automation, lead tracking software, nutshell crm, quickbase crm, salesforce alternative, simple crm, slipfire crm, top 10 best crm, top 3 best crm, top 5 best crm, top crm, top crms, usability dynamics, wordpress contact manager, wordpress crm plugin, wordpress lead tracking, wordpress leads, wp contact manager, wp crm alternative, wp crm ud, wp crm zoho, wp lead automation, wp lead tracking, wp leads,

  • Generic selectors
    Exact matches only
    Search in title
    Search in content
    Search in posts
    Search in pages
    Filter by Categories
    10
    2D Vector Design
    8.1
    Adobe
    AdWords
    Analytics
    Apple
    Apps
    Bash / Shell
    Bedrock
    Blade
    Business Development
    ChromeOS
    Company News
    Content Marketing
    Digital Design
    Digital Marketing
    Freelancing
    Gaming
    Google
    Google Hangouts
    Illustrator
    Linux
    Mac
    New Products or Services
    Operating Systems
    OS X
    Pay Per Click Management
    Paypal
    PHP
    Press Releases
    Programming
    Razer
    Reviews
    Roots
    Sage Theme
    Search Engine Marketing
    Search Engine Optimization
    Search Marketing
    Tips and Tricks
    Trellis
    Tutorials
    Ubuntu
    Uncategorized
    Video Production
    Web Hosting
    Website Development
    Website Development
    Windows
    WordPress
  • Recent Posts

  • Categories

  • About

    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.

    Continue Reading »

    Contact

    Email

    us@theportlandcompany.com

    Phone

    503-567-9561

    Follow

  • Logo for The Portland Company with a Coyote
    Thank you for using our site. x