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!

• Bootstrap = CSS/JS Library
• Boilerplate = HTML Library & Directory Structure
• SASS or LESS = The ability to nest attributes, create variables and program with mixins and develop functions and operators.

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…

---

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,

Recent Posts

• What is a wireframe in website development or application development?
• What does a professional proposal, contract or estimate look like?
• What does a professional website development process look like?
• In Depth Comparison of WordPress vs Laravel (CMS & eCommerce Included)
• What does a professional photography project look like?

Categories

• Press Releases (7)
  • Company News (3)
  • New Products or Services (3)
• Reviews (8)
  • Freelancing (1)
  • Razer (3)
    • Blade (2)
• Tips and Tricks (56)
  • Apps (3)
    • Google Hangouts (2)
  • Business Development (4)
  • Content Marketing (3)
  • Digital Design (1)
  • Digital Marketing (5)
  • Gaming (1)
  • Operating Systems (11)
    • Google (1)
      • ChromeOS (1)
    • Linux (5)
      • Ubuntu (5)
    • Mac (3)
    • Windows (5)
      • 10 (3)
      • 8.1 (4)
  • Pay Per Click Management (9)
    • AdWords (7)
    • Analytics (4)
  • Programming (24)
    • Bash / Shell (3)
    • IDE's (1)
    • PHP (5)
    • Roots (13)
      • Trellis (13)
        • Bedrock (10)
          • Sage Theme (8)
  • Search Engine Marketing (9)
  • Search Engine Optimization (10)
  • Search Marketing (9)
  • Video Production (5)
  • Web Hosting (2)
  • Website Development (15)
    • WordPress (2)
• Tutorials (6)
  • Adobe (1)
    • Illustrator (1)
      • 2D Vector Design (1)
  • Apple (1)
    • OS X (1)
  • Paypal (1)
  • Website Development (3)
• Uncategorized (31)