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

HOW-TO

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

Installation

bower install responsive-toolkit

Demo

Live example available on CodePen. Hosted along with repository are the following usage examples:

Basic usage:

// 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);

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);

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 </body>

<!-- Responsive Bootstrap Toolkit -->
<script src="js/bootstrap-toolkit.min.js"></script>
<!-- Your scripts using Responsive Bootstrap Toolkit -->
<script src="js/main.js"></script>

Migrating from an older version

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)

tolgavahi / responsive-bootstrap-toolkit Goto Github PK