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.0
- Installation
- Demo
- Basic usage
- Execute code on window resize
- Get alias of current breakpoint
- Using with Foundation
- Providing your own visibility classes
bower install https://github.com/maciej-gurban/responsive-bootstrap-toolkit.git
Live example available on CodePen. Hosted along with repository are the following usage examples:
// Wrap IIFE around your code
(function($, viewport){
// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}
// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}
// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}
// Execute code each time window size changes
$(window).resize(
viewport.changed(function(){
if( viewport.is('xs') ) {
// ...
}
})
});
})(jQuery, ResponsiveBootstrapToolkit);
Allows using custom debounce interval. The default one is set at 300ms.
$(window).resize(
viewport.changed(function(){
// ...
}, 150)
});
$(window).resize(
viewport.changed(function(){
console.log( 'Current breakpoint: '+ viewport.current() );
})
});
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.
(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);
Note: It's up to you to create media queries that will toggle div's visibility across different screen resolutions. How? Refer to this example.
Paste just before </body>
<!-- Responsive Bootstrap Toolkit -->
<script src="js/bootstrap-toolkit.min.js"></script>
<!-- Your scripts using Responsive Bootstrap Toolkit -->
<script src="js/main.js"></script>
Refer to the changelog for a list of changes in each version of the library.
- jQuery
- Bootstrap's responsive utility css classes (included in its standard stylesheet package)