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.6.3

$3

* Installation
* Demo
* Basic usage
* Execute code on window resize
* Get alias of current breakpoint
* Using with Foundation
* Providing your own visibility classes

$3

* How do I include it in my project?
* Migrating from an older version
* Dependencies

$3

Using Bower:
```
bower install responsive-toolkit
``
Using NPM:
``
npm install responsive-toolkit
``

$3

Live example available on CodePen. Hosted along with repository are the following usage examples:
* Bootstrap demo
* Foundation demo
* Custom breakpoints demo


#### Basic usage:

``javascript
// Wrap IIFE around your code
(function($, viewport){
$(document).ready(function() {

// 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(' // ...
}

// Execute code each time window size changes
$(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.

``javascript
$(window).resize(
viewport.changed(function() {

// ...

}, 150)
);
``

#### Get alias of current breakpoint
``javascript
$(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.

``javascript
(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

``javascript
(function($, viewport){

var visibilityDivs = {
'alias-1': $('

'),
'alias-2': $('

'),
'alias-3': $('

')
};

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.

#### How do I include it in my project?

Paste just before

``html




```

$3

Refer to the changelog for a list of changes in each version of the library.

#### Dependencies:
* jQuery
* Bootstrap's responsive utility css classes (included in its standard stylesheet package)