Add HTML classes to body element when window resizes

jquery.foundation-media-query-classes.js

/**
 * Add classes to the DOM based on the current media query size defined by Foundation breakpoints.
 */
(function fdnMQClasses( window, document, $, undefined ) {
	var foundationPrefix = 'fdn-size-';

	// Add the class on page load.
	$( document ).ready( function () {
		$( 'body' ).addClass( foundationPrefix + Foundation.MediaQuery.current );
	} );

	// Change the class when the mediaquery is updated.
	$( window ).on( 'changed.zf.mediaquery', function ( event, newSize, oldSize ) {
		// Bail early if nothing's changed.
		if ( newSize === oldSize ) {
			return;
		}

		$( 'body' ).removeClass( foundationPrefix + oldSize ).addClass( foundationPrefix + newSize );
	} );
})( window, document, jQuery, null );