Omega 4 media query and breakpoints files

_1_sticky_footer.scss

@include breakpoint($narrow) {
  html, body {
    height: 100%;
  }

  .l-page {
    min-height: 100%;
    position: relative;
  }

  .l-content {
    min-height: 100%;
    padding-bottom: 230px; // This needs to be the height of the .l-footer
  }

  .l-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

html.preprocess.inc

<?php

/**
 * Implements hook_preprocess_html().
 */
function THEMENAME.preprocess_html(&$variables) {
  // Load the matchMedia polyfill.
  if (module_exists('picture') && drupal_get_library('picture', 'matchmedia')) {
    $options = array('group' => 'THEMENAME');

    // Load the mediaquery behavior from Omega. This allows registering media
    // queries via Drupal.settings to automatically print body classes based on
    // whether or not they currently apply.
    $omega = drupal_get_path('theme', 'omega');
    drupal_add_js("$omega/js/omega.mediaqueries.js", $options);

    // Register the media queries. The array keys will be used to compose the body
    // class names and the values are the actual media queries.
    drupal_add_js(array('omega' => array('mediaQueries' => array(
      'mobile' => 'all',
      'narrow' => 'all and (min-width: 740px)',
      'normal' => 'all and (min-width: 980px)',
      'wide' => 'all and (min-width: 1220px)',
    ))), 'setting');
  }
}

themename-sticky-footer.behaviors.js

(function ($) {
  
  /**
   * Trigger sticky footer attach code a second time to account for image loading delay in Safari.
   */
  $(window).load(function() {
    Drupal.behaviors.stickyFooter.attach(false, Drupal.settings);
  });
    
  /**
   * Override Omega's Media Query Class handler.
   */
  Drupal.behaviors.omegaMediaQueryClasses.handler = function (name, mql) {
    $.event.trigger('responsivelayout', {current: name});

    if (mql.matches) {
      $('body').removeClass(name + '-inactive').addClass(name + '-active');
    }
    else {
      $('body').removeClass(name + '-active').addClass(name + '-inactive');
    }
  }

  Drupal.behaviors.stickyFooterBreakpoint = {
    attach: function (context, settings) {
      $('body').bind('responsivelayout', function(evt, newBreakpoint) {
        Drupal.behaviors.stickyFooter.attach(context, settings);
      });

      $('body').bind('contentResize', function(evt) {
        Drupal.behaviors.stickyFooter.attach(context, settings);
      });
    }
  };

  Drupal.behaviors.stickyFooter = {
    attach: function (context, settings) {
      var omegaSettings = settings.omega || {};
      var mediaQueries = omegaSettings.mediaQueries || {};

      var currentBreakpoint;
      $.each(mediaQueries, function (index, value) {
        var mql = window.matchMedia(value);

        if (mql.matches == true) {
          currentBreakpoint = index;
        }
      });

      switch (currentBreakpoint) {
        case 'wide':
        case 'normal':
        case 'narrow':
          // Don't trigger sticky footer on every window resize
          // Drupal.theme('stickyFooter');
          Drupal.behaviors.stickyFooter.recalculate();
          $(window).on('resize', Drupal.behaviors.stickyFooter.recalculate);
          break;
        case 'mobile':
          // Trigger sticky footer on every window resize
          $(window).off('resize', Drupal.behaviors.stickyFooter.recalculate);
          Drupal.behaviors.stickyFooter.unset();
          break;
      }
    },

    unset: function() {
      var content = $('.l-content');
      var sidebar = $('.l-region--sidebar-first');

      content.height('inherit');
      content.css('padding-bottom', '');
      sidebar.css('padding-bottom', '');
    },

    recalculate: function(equalizeSidebar) {
      // @TODO: Figure out if equalizeSidebar is useful and use it.
      // var equalizeSidebar = (typeof equalizeSidebar !== 'undefined') ? equalizeSidebar : false;

      var winHeight = $(window).outerHeight(true);
      var footerHeight = $('.l-footer').outerHeight(true);
      var mainMarginTop = $('.l-main').offset().top;
      var content = $('.l-content');
      var sidebar = $('.l-region--sidebar-first');

      // Unset the height of the content.
      content.height('inherit');

      var contentHeight = content.outerHeight(true);
      var sidebarHeight = sidebar.outerHeight(true);

      // If the height of the content is smaller than the white background,
      // then make the white background the full height.
      var contentTop = content.offset().top;
      var whiteContent = winHeight - footerHeight - contentTop;

      // Fix the main section padding bottom to exactly match the footer.
      // Also apply to sidebar in case the sidebar is longer.
      var paddingBottom = parseInt(footerHeight);
      content.css('padding-bottom', paddingBottom);
      sidebar.css('padding-bottom', paddingBottom);

      if (contentHeight < whiteContent) {
        // if (whiteContent < sidebarHeight && equalizeSidebar == true) {
        if (whiteContent < sidebarHeight) {
          content.height(sidebarHeight);
        } else {
          content.height(whiteContent);
        }
      }
      else {
        // if (contentHeight < sidebarHeight && equalizeSidebar == true) {
        if (contentHeight < sidebarHeight) {
          content.height(sidebarHeight);
        }
      }
    }
  };
  
})(jQuery);