Keeping track of current media query

application.js

charlierose.onReady = function(){
  // sort out which media query we're using
  charlierose.media_query_in_use = charlierose.Helpers.get_media_query_in_use();
  // init behaviors
  charlierose.LoadBehavior();
  // on resize, check
  var resize_timer;
  window.on('resize', function(event){
    clearTimeout(resize_timer);
    resize_timer = setTimeout(function(){
      charlierose.Helpers.resized();
    },250);
  });
};

body.scss

$breakpoints: (
  xlarge: "(min-width: 1240px)",
  large: "(max-width: 1239px)",
  medium: "(max-width: 1023px)",
  small: "(max-width: 767px)"
);

body {

  &:after {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    width: 1px;
    height: 1px;
    margin: -1px 0 0 -1px;
    position: absolute;
    left: -1px;
    top: -1px;
  }
}
  @each $name, $point in $breakpoints {
    @include breakpoint('#{$name}') {
      head {
        font-family: '#{$name}';
      }
      body:after {
        content: '#{$name}';
      }
    }
  }

get_media_query_in_use.js

charlierose.Helpers.get_media_query_in_use = function() {

  if (window.opera){
    return parse(window.getComputedStyle(document.body,':after').getPropertyValue('content')) || "large";
  } else if (window.getComputedStyle) {
    return parse(window.getComputedStyle(document.head,null).getPropertyValue('font-family')) || "large";
  } else {
    return "large";
  }

  function parse(str) {
    return str.replace(/'/gi,"").replace(/"/gi,"");
  }
};

resized.js

charlierose.Helpers.resized = function() {
  var new_media_query = charlierose.Helpers.get_media_query_in_use();
  if (charlierose.media_query_in_use != new_media_query) {
    charlierose.media_query_in_use = charlierose.Helpers.get_media_query_in_use();
    // update the image sizes
    document.trigger("media_query_updated");
  }
  document.trigger("resized");
};