Creating Drupal theme based on boostrap and material design from Google

By andre

For quite some time I wanted to have a Drupal theme that would allow me to have a bootstrap based theme together with the look and feel as dictated by the Material Design principles from Google. Mainly because I like the way these two look and because I myself have very limited abilities in creating pretty user interfaces.

That said, I didn’t want to spend any time writing the necessary code in the required technologies, namely PHP, CSS/LESS and JavaScript. Luckily, this is no longer necessary. Thanks to considerable effort put in by the nice people of the World Wide Web, all the necessary ingredients are already there and all you need to do is to combine them.

You will need the following components:

  • (Strongly recommended) Drush - makes making changes to your Drupal sites so much easier
  • Bootsrap base theme - a Drupal theme that will serve as the base for your custom one
  • Material Design theme for bootstrap - the necessary stylesheets and scripts that will make your bootstrap theme take on Material Design appearance with very little effort

The installation steps are relatively straightforward:

  1. First install the Drupal bootstrap theme
  2. Then do yourself a favour, follow the official guide and create a LESS-based subtheme. Let’s call it mytheme (how original). Don’t forget to download and deploy correctly the bootstrap source, as the guide will tell you!
  3. Make sure you have the LESS compiler lessc installed. Google to find out how to do that on your own system
  4. From the bootstrap Material Design theme’s github get yourself the less and scripts directories. Put them in mytheme/material folder of your newly created subtheme
  5. Edit the file less/styles.less in your subtheme and add this include:
@import '../material/less/bootstrap-material-design';
  1. Compile less:
lessc style.less --clean-css="--s1" ../css/style.css
  1. Edit mytheme.info and add this line:
scripts[] = 'material/scripts/material.js'
scripts[] = 'material/scripts/ripples.js'
  1. Edit template.php and add the following function (don’t forget that the prefix must match your theme’s name):
function mytheme_preprocess_html(&$variables)
{
      drupal_add_css('//fonts.googleapis.com/css?family=Roboto:300,400,500,700',
        array('type' => 'external'));
      drupal_add_css('//fonts.googleapis.com/icon?family=Material+Icons',
        array('type' => 'external'));
      // init material JS - dynamic controls won't work without it
      drupal_add_js('window.jQuery.material.init();', array('type' => 'inline', 'scope' => 'footer', 'weight' => 100, 'defer' => true));
}
  1. Clear cache for Drupal:
drush cache-clear all
  1. Voila!