Create a gist now

Instantly share code, notes, and snippets.

@steveh80 /grid.scss
Last active Jan 22, 2016

Bootstrap viewport detection in Javascript
// 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";
}
}
/**
* 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
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment