I like to arrange my CSS by categorizing the styles into their own files based on what they do (typography, blocks, nodes, etc). I was looking for a way to do this within Omega, and found it wasn't a simple process to do this plus get the files to load responsively.

Enclosed is a code snippet that simulates alpha's responsive loading for any custom stylesheets associated with an Omega sub-theme. What this does is:

  • Gets a list of the CSS files defined in the theme info file
  • Checks to see that they are turned on in the theme settings
  • Does a drupal_add_css for a responsive version of the file for each layout

For example, if you had a file called subtheme-typography.css defined in the info file, the theme would be able to look for subtheme-typography-wide.css, subtheme-typography-normal.css, subtheme-typography-narrow.css and subtheme-typography-mobile.css. It's not perfect (no caching), but I did want to share and maybe get feedback from others who are running into similar issues.

You can get this to run by putting the following code in preprocess-page.tpl.php in a subtheme folder.


  // simulates the way alpha loads responsive stylesheets
  // takes the name of any custom stylesheets registered with the theme and adds layout-specific stylesheets for the file
  // this behavior can be toggled on and off for each style sheet
  // a few requirements:
  // 1) the file must be registered with the sub-theme. for example:
  //   css[THEMENAME-filename.css][name] = 'Example file'
  //   css[THEMENAME-filename.css][description] = 'This example file is meant to load responsively.'
  //   css[THEMENAME-filename.css][options][weight] = '11'
  // 2) the file must start with the name of the sub-theme
  //   i.e.: THEMENAME-filename.css, THEMENAME-filename-wide.css, THEMENAME-filename-normal.css, THEMENAME-filename-narrow.css, THEMENAME-filename-mobile.css
  // 3) add an option called 'load_responsive' within the info file for each stylesheet being loaded responsively
  //   i.e.: css[THEMENAME-filename.css][options][load_responsive] = TRUE
  // load information about the theme
  global $theme_info;
  // this is where we store the files to be loaded
  $files = array();
  // get a new theme container with information about the current subtheme
  $item = new alpha_theme_container($theme_info->name);
  // get information about the grid and the layouts
  $grid = $item->grid();
  $grids = $item->grids();
  $layouts = array_keys($grids['alpha_default']['layouts']);
  // pull out the css and settings to loop around
  $theme = alpha_get_theme();
  $css = $theme->css;
  $settings = $theme->settings;
  // create a list of the files that are going to be loaded responsively
  foreach ($settings['css'] as $key => $value){
    $check = strpos($key, $theme->theme);
    if($check !== FALSE && $check == 0 && $value !== 0 && $css[$key]['options']['load_responsive'] == TRUE){
      $files[] = str_replace('.css', '', $key);

  // loop around the files. Create a responsive version of each for each layout.
  if(sizeof($files) > 0){
    foreach ($layouts as $layout){
      foreach ($files as $file){
        $item = drupal_get_path('theme', $theme->theme) . '/css/' . $file . '-' . $layout . '.css';
        $basename = $layout . '::' . drupal_get_path('theme', $theme->theme) . '/' . $file . '-' . $layout . '.css';
        $options = array(
          'group' => 2000,
          'weight' => 1,
          'data' => $item, 
          'basename' => $basename,
          'media' => $grids['alpha_default']['layouts'][$layout]['media'],
          'browsers' => array(
            'IE'	=> 'gte IE9',
            '!IE'	=> TRUE,
          'preprocess_media' => TRUE,
        drupal_add_css($item, $options);