Bootstrap viewport detection in Javascript

grid.scss

// needed for viewport size detection in javascript

body::before {
	display: none;
	content: "xs";
}
@media (min-width: $screen-sm-min) {
	body::before { 
		content: "sm"; 
	}
}
@media (min-width: $screen-md-min) {
	body::before { 
		content: "md"; 
	}
}
@media (min-width: $screen-lg-min) {
	body::before { 
		content: "lg"; 
	}
}

viewport.js

/**
 * helper to detect viewport sizes in javascript
 * usage examples: 
 *  viewport.is('xs')
 *  viewport.isEqualOrGreaterThan('md')
 */

var viewport = (function() {
	var viewPorts = ['xs', 'sm', 'md', 'lg'];

	var viewPortSize = function() {
		return window.getComputedStyle(document.body, ':before').content.replace(/"/g, '');
	}

	var is = function(size) {
		if ( viewPorts.indexOf(size) == -1 ) throw "no valid viewport name given";
		return viewPortSize() == size;
	}

	var isEqualOrGreaterThan = function(size) {
		if ( viewPorts.indexOf(size) == -1 ) throw "no valid viewport name given";
		return viewPorts.indexOf(viewPortSize()) >= viewPorts.indexOf(size);
	}

	// Public API
	return {
		is: is,
		isEqualOrGreaterThan: isEqualOrGreaterThan
	}

})();