Retrofitting CSS media queries into an existing project

Question

I've inherited a Drupal 6 project with a custom theme based off fusion. I would like to keep the current design for screen sizes above 800. Should I wrap existing CSS in @media screen and (min-width:800px)? Or, might I be able to use a "reset" technique under another media query?

How would you retro fit media queries into an existing site?

Answer 1

Got it. Basically we're moving ['all'] to ['(min-width: 720px)'] in the array structure. When it's loaded back in all of the stylesheets are effectively now wrapped into a media query.

function hook_preprocess_page(&$vars) {
  // get style sheet array
  $css = $vars['css'];

  // copy over the [all] to a media query key
  $css['(min-width: 720px)'] = $css['all'];

  // Remove the all
  unset($css['all']);


  $vars['styles'] = drupal_get_css($css);
 }

This leaves us the ability to define other style sheets in theme.info for other breakpoints.

stylesheets['(max-width: 480px)'][] = phone.css

Update, I turned this into a larger structure to let my content maintainers pick where the breakpoint should be.

A small idea for an add-on. I had an issue with a recent Drupal 6 site that I was trying to make responsive. I got tired of trying to override CSS from various areas so I wrote the following hook_preprocess_page to move stylesheets from [all] and move them to a logical break point. By doing this I can retro fit a mobile stylesheet into

A small idea for an add-on. I had an issue with a recent Drupal 6 site that I was trying to make responsive. I got tired of trying to override CSS from various areas so I wrote the following hook_preprocess_page to move stylesheets from [all] and move them to a logical break point. By doing this I can retro fit a mobile stylesheet into

/*
 * Implemntation of hook_preprocess_page
 *
 * Takes CSS files from the $vars['css']['all'] and moves them to $vars['css'][$breakpoint]. In effect, this moves all
 * existing stylesheets into a media query that you can specifiy. By default it's 480px. 
 */ 
function wrapcss_preprocess_page(&$vars) {

  $css          = $vars['css'];
  $pixel_break  = (int) variable_get('wrapcss_breakpoint', '480');


  // Ensure that we have a value and that value is numeric
  if (isset($pixel_break) && is_numeric($pixel_break))
  {
    $breakpoint   = '(min-width: ' . $pixel_break . 'px)';
  } 
  // If not, just default to 480
  else 
  {
    $breakpoint   = '(min-width: 480px)';
  }

  // copy [all] to [breakpoint]
  $css["$breakpoint"] = $css['all'];

  // Remove stylesheets from [all]
  unset($css['all']);

  // Import back in 
  $vars['styles'] = drupal_get_css($css);
}