Just playing around with Twitter Bootstrap 3.0 in a WordPress theme development. I search for the advantage from Twitter Bootstrap for future WordPress theme development. Here what I got …
Why Twitter Bootstrap for WordPress?
Twitter Bootstrap is a CSS framework that became popular for CSS/HTML Rapid Development. There’s some projects of WordPress theme which attempt to use this CSS framework as a based.
Unfortunately, the Bootstrap just rebuild their framework to version 3.0, which make most available WordPress + Bootstrap became ‘out-of-date’ in the near future, since mostly still using Bootstrap v.2.3.x. Yet, there’s is projects which adopt new Bootstrap version 3.0, but seem a little bit premature.
The new Bootstrap seem also has a massive structural change compared to it’s ancestor, with lot more additional capabilities. The major problem is no backward compatibility, so you have to rebuild or edit your html if you want to adopt the new one.
In other way, WordPress also has it’s ‘own framework’ which is very good on new theme Twenty Thirteen. The ‘engine’ of WordPress, by default, generate great class-name. The default theme also has great Semantic HTML5 and using CSS3. The problem is in CSS editing, which quite complicated to match the design layout. Well, of course you can just make a child theme of the Twenty Thirteen, in order to make it as CSS framework (from parent name). But mostly in our work, we don’t want the theme became dependent to another theme, even if that is the default theme of WordPress.
Twitter Bootstrap vs Twenty Thirteen Theme for creating WP theme
To get the picture, since we aimed for Rapid Development, I try to compare Bootstrap and Twenty Thirteen theme. Not quite a ‘vs’ though, just to see the differential.
|–||Twitter Bootstrap v3||Twenty Thirteen|
|CSS Reset||normalize css|
|Responsive||Yes; easy using Grid||Yes; hard to modify|
|Semantic HTML 5||No; create your own, since it’s a CSS framework.||Yes|
|jQuery Functions||Yes; there’s some jQuery function||No; just masonry for footer and script for mobile menu|
|Class-name||Might have some problem to applied to WP theme||Of course yes; it’s designed for the theme|
|Browser backward compatibility||Yes; both using html5shiv.|
Prefer bootstrap since it’s also including respond.js
|Generate selected class||Yes, online||Hardway; copy-paste|
|General WP (comment and etc) class||No; of course 😉||Yes|
I will added in the future.
Marrying both world
After brief comparison, here is what we need to do:
- adding grid functionality from Bootstrap to WP theme. More easiest if we working with responsive layout using Bootstrap.
- adding jQuery functionality like in Bootstrap.
- create Online CSS Generator for WP theme is likely a good idea. So we can pick only selected class name as base.
I have to ended up for now, since I have to digging more the possibilities of marrying both Twitter Bootstrap advantage for WP theme.
Please let me know your thought in the comments. Your idea is valuable.
This post was written by Sunaryo Hadi