Using Twitter Bootstrap theme on Drupal 7 (with jQuery 1.7) How to startup a project using Twitter Bootstrap without tears
We're starting up a new project on Drupal 7 (hope you'll hear about it very soon) and we decided to use the amazing Twitter Bootstrap 2 as a starting point.
If you haven't done before, I strongly suggest you to have a look at this framework. It's useful to quickly start a new project, with an high quality responsive theme and lots of well designed interface elements ready to be used in your application at the cost of 1 class attribute!
How we worked
Our first attempt has been installing Twitter Bootstrap theme for Drupal 7, trying to edit the theme itself to fit our design needs.
You should consider that the theme ships with a pretty complex template.php
file, which performs many includes and implements many hooks. If you plan to use this template.php
in your theme, which has a different name, you'll have the need to manually edit all function calls, hooks and includes.
Once we realized that, we decided to follow the way of sub-theming (have a look here if you want an effective introduction)
We created a theme from scratch, extending Twitter Bootstrap.
That's easy cheesy. Download Twitter Bootstrap theme to your /sites/all/themes, create your empty theme and put this line in your theme .info
base theme = twitter_bootstrap
At this point you should notice that your pages have Drupal's core jQuery included, while Twitter Bootstrap 2 requires at least jQuery 1.7.1.
The trick here it's pretty simple. Download jQuery 1.7 (or newer) to your theme folder (let's say in js/jquery.js). Then put this single line function in your template.php. Let's suppose that your theme is called mytheme, here's the function:
It replaces the original Drupal core jQuery (misc/jquery.js) with the most recent version you downloaded.
You should take into account that this operation could potentially break some back-end features that relies on older jQuery and are not forward compatible. We usually circumvent the problem by using a different backend theme (we're used to the clean and effective Rubik).
