Using a Super Easy and Lightweight Responsive Framework for a Drupal 7 Theme
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!