Responsive Bootstrap Toolkit
Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code. Despite the name, you can use it also with Foundation, or any other framework.
Current version: 2.5.1
Documentation
Basic usage:
(function($, viewport){
$(document).ready(function() {
if(viewport.is('xs')) {
}
if(viewport.is('>=sm')) {
}
if(viewport.is('<md')) {
}
$(window).resize(
viewport.changed(function() {
if(viewport.is('xs')) {
}
})
);
});
})(jQuery, ResponsiveBootstrapToolkit);
Execute code on window resize
Allows using custom debounce interval. The default one is set at 300ms.
$(window).resize(
viewport.changed(function() {
}, 150)
);
Get alias of current breakpoint
$(window).resize(
viewport.changed(function() {
console.log('Current breakpoint: ', viewport.current());
})
);
Using with Foundation
Instead of Bootstrap's aliases xs
, sm
, md
and lg
, Foundation uses: small
, medium
, large
, and xlarge
.
(function($, viewport){
viewport.use('Foundation');
if(viewport.is('small')) {
}
})(jQuery, ResponsiveBootstrapToolkit);
Note:
Currently, only Foundation 5 visibility classes are supported. If you'd like to support older version of any framework, or provide your own visibility classes, refer to example below.
Providing your own visibility classes
(function($, viewport){
var visibilityDivs = {
'alias-1': $('<div class="device-alias-1 your-visibility-class-1"></div>'),
'alias-2': $('<div class="device-alias-2 your-visibility-class-2"></div>'),
'alias-3': $('<div class="device-alias-3 your-visibility-class-3"></div>')
};
viewport.use('Custom', visibilityDivs);
if(viewport.is('alias-1')) {
}
})(jQuery, ResponsiveBootstrapToolkit);