Round Rock / Austin, Texas
Drupal Web Developer

Using a Super Easy and Lightweight Responsive Framework for a Drupal 7 Theme

Using a Super Easy and Lightweight Responsive Framework for a Drupal 7 Theme

960 grid 1024 grid responsive design

As much as I love Bootstrap I don't always need all the fany stuff it provides, especailly since I use it as basic framework for custom Drupal 7 themes. 

Today I found a great solution that helped me convert an old site from non-responsive to responsive in about 2 hours!  Even bigger bonus is it's very lightweight!

I used Graham Miller's Responsive Grid System

 

 

Here are the steps I took to convert my Drupal 7 to be responsive:

1) Download css files from http://www.responsivegridsystem.com

2) Upload css files to /sites/all/my-theme/css/responsive (it wasn't necesssary to put it in the 'reponsive' subdirectory but I'm OCD and like things super organized so I did)

3) Edit /sites/all/my-theme/my-theme.info file to include all of the css files.  I put those BEFORE my custom css file.

stylesheets[all][] = css/tabs-rtl.css
stylesheets[all][] = css/tabs.css
stylesheets[all][] = css/responsive/html5reset.css
stylesheets[all][] = css/responsive/col.css
stylesheets[all][] = css/responsive/2cols.css
stylesheets[all][] = css/responsive/3cols.css
stylesheets[all][] = css/responsive/4cols.css
stylesheets[all][] = css/responsive/5cols.css
stylesheets[all][] = css/responsive/6cols.css
stylesheets[all][] = css/responsive/7cols.css
stylesheets[all][] = css/responsive/8cols.css
stylesheets[all][] = css/responsive/9cols.css
stylesheets[all][] = css/responsive/10cols.css
stylesheets[all][] = css/responsive/11cols.css
stylesheets[all][] = css/responsive/12cols.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/style-mobile.css
stylesheets[all][] = css/editor-styles.css
stylesheets[print][] = css/print.css

4) Edited my /sites/all/my-theme/page.tpl.php file to change the structure a bit so that it

A) used <div class="section group"> around each section

B) used classes like <div class="col span_1_of_2">  <div class="col span_1_of_4"> and  around each column

5) Edited my /sites/all/my-theme/template.php to use preprocess_html to add the viewport metatag 

6) Installed the Drupal Module "Responsive Menus" and configured it to see my '#nav' div as the div to convert to reponsive

6) Tested and teaked for things like padding and margin to clean things up a bit.

 

Now my site is responsive and passes the Google Mobile Friendly Test.... yay!