Breakpoint body classes

breakpoint-classes.js

/**
 * Add breakpoint classes to the body as a utility.
 * 
 * Requires jQuery and underscore
 */

Breakpoints = {
  'mobileMax': 639,
  'tabletMin': 640,
  'tabletMax': 960,
  'desktopMin': 961
};

(function ($) {
  $(document).ready(function () {
    breakpointClass();
    $(window).on('resize orientationchange', _.debounce(breakpointClass, 100));
  });

  function breakpointClass() {
    var width = window.outerWidth,
        $body = $('body');

    // Remove any previously set breakpoint class.
    $body.removeClass('breakpoint-mobile breakpoint-tablet breakpoint-desktop');

    // Set breakpoint class based on window width.
    if (width >= Breakpoints.desktopMin) {
      $body.addClass('breakpoint-desktop');
    } else if (width <= Breakpoints.mobileMax) {
      $body.addClass('breakpoint-mobile');
    } else {
      $body.addClass('breakpoint-tablet');
    }
  }
})(jQuery, window);