Build Responsive Drupal Themes with Bootstrap & SASS

To save time and money when developing complex sites, frameworks like Drupal and Compass/SASS were invented. Before these frameworks existed, websites that relied heavily on content management, and custom made programming would require clients to have a humongous budget. Why? Because doing everything from scratch to code all of the different features would take hours and hours to implement, test, Q&A, debug and test again. A software program is only as good as the developer/tester who created it. But, if a program is only being tested by a few people, how trustworthy can it be?

Improve To Avoid More Mistakes In the Future

The faster something changes and improves, the more something gets simpler and problem-free. The same is true with programs. The more users, developers and themers work on the framework, the less problems clients will face in the future because the problems themselves would be discovered early on the process by others who have had similar problems. Why? Because everyone makes mistakes. What’s the best way to avoid making the same mistake? Ask someone who has had the same experience. Thus, the solution is only a Google search away.

Twitter Bootstrap

Therefore, I would like to introduce another framework that Goldlilys Media uses in some of my projects called the Bootstrap Front-end Framework. Yep, the creators of this framework are the same people who developed the popular social media site everyone should know and love, Twitter. According to this article, Twitter Bootstrap was invented in order to keep the flow of front-end development consistent and easier to manage in the future.

In addition, Drupal has its own implementation of Bootstrap. However, the common complaints people have about Bootstrap is that it uses LESS instead of Compass/SASS. In this tutorial, I will give a step by step guide on how to intermingle Drupal, Compass/SASS and Bootstrap together.

1. Install Bootstrap in Drupal themes at /sites/all/themes or type drush dl bootstrap in the command line and that should automatically place the Bootstrap theme in that same directory.
2. Make sure that jQuery Update module is enabled and the version is at least 1.7 for Bootstrap to work correctly.
3. Copy and Paste the Bootstrap Starter Kit to the main themes directory and rename it to the projectName.
4. Then rename bootstrap_subtheme.info.starterkit to projectName.info .
5. To use Compass/SASS instead of LESS, we want to use the CDN Bootstrap Library so Method 2 works best to keep development simple.
6. Setup Compass like before:
   • In the command line, type compass create projectName
   • This creates a projectName directory with a config.rb file, a sass and stylesheets directory.
   • We want to move the config.rb file and the sass folder to the main themes directory.
   • Change the css_dir inside the config.rb from “stylesheets” to “css” to match the Bootstrap CSS default.
   • Run compass by: compass watch /path/to/your/themes/directory/
     OR add: alias projectName='compass watch /path/to/your/themes/directory/' in the .bash_profile so all you have to do is call projectName in the command line.
   • Start adding Compass/SASS styles to style.scss or your usual way to organize SASS front-end development.
   • This should apply whatever you input in the .scss file to .css in the css directory.

To summarize, we can develop Bootstrap custom themes and override the styles we want using the Compass/SASS Framework instead of LESS for Drupal theming. Thus, saving you time and money to concentrate not on solving website problems, but on growing your business.