Javascript breakpoints for Bootstrap

A simple to use javascript library for attaching callbacks to Bootstrap sepecific breakpoints.
The idea is to mimic similiar functionality as found in the Bootstrap SASS mixins.

1. Requirements 2. Basic usage 3. Methods 4. Examples (coming soon)

Requirements

This library works best with Bootstrap 4 and up after :root breakpoint variables were added.

Basic usage

1. Include the library via jsDelivr CDN

<script src="https://cdn.jsdelivr.net/gh/thelevicole/[email protected]/dist/breakpoints.js"></script>

2. Initiate library

var bp = new Breakpoints();

3. Start using...

// Set body color to red on 768px and up
bp.up( 'md', function() {
	document.body.style.background = '#f00';
} );

// Set body color to green on 768px and down
bp.down( 'md', function() {
	document.body.style.background = '#0f0';
} );

Methods

Method	Description	Example
Attachable
`up( name, callback )`	Attaches a callback to any screen width above the named breakpoint.	`bp.up( 'lg', function() { console.log( 'I only run on larger screens' ); } );`
`down( name, callback )`	Attaches a callback to any screen width below the named breakpoint.	`bp.down( 'sm', function() { console.log( 'I only run on smaller screens' ); } );`
`only( name, callback )`	Attaches a callback to any screen width within the minimum and maximum widths of the named breakpoint.	`bp.only( 'md', function() { console.log( 'I only run on screen widths between 768px and 991.98px' ); } );`
`between( lower, upper, callback )`	Attaches a callback to any screen width that spans across the minimum and maximum widths of the two named breakpoints.	`bp.between( 'sm', 'xl', function() { console.log( 'I run on any screen width between 576px and 1199.98px' ); } );`
Returnable
`get( name )`	Returns a numeric value of the breakpoint.	`var margins = window.innerWidth - bp.get( 'md' );`
`isUp( name )`	Returns `true` if screen width is greater than named breakpoint.	`if ( bp.isUp( 'md' ) ) { // Do something }`
`isDown( name )`	Returns `true` if screen width is less than named breakpoint.	`if ( bp.isDown( 'md' ) ) { // Do something }`
`isOnly( name )`	Returns `true` if screen width is within the minimum and maximum widths of the named breakpoint.	`if ( bp.isOnly( 'md' ) ) { // Do something }`
`isBetween( lower, upper )`	Returns `true` if screen width is within the minimum and maximum widths of the two named breakpoints.	`if ( bp.isBetween( 'md', 'lg' ) ) { // Do something }`

Examples

up( name, callback )

Breakpoint:

var target = document.querySelector( '#example-1 .counter' );
var counter = 0;

bp.up( 'lg', function() {
	target.innerText = ++counter;
} );

The above example will count the number of times the callback is called for Large devices and up.

To see it in action just resize your screen...

Large devices (desktops, 992px and up) counter

0

down( name, callback )

var target = document.querySelector( '#example-2 .counter' );
var counter = 0;

bp.up( 'md', function() {
	target.innerText = ++counter;
} );

The above example will count the number of times the callback is called for Medium devices and down.

To see it in action just resize your screen...

Medium devices (tablets, 768px and down) counter

0

only( name, callback )

var target = document.querySelector( '#example-3 .counter' );
var counter = 0;

bp.only( 'lg', function() {
	target.innerText = ++counter;
} );

The above example will count the number of times the callback is called for Large devices and only.

To see it in action just resize your screen...

Large devices (desktops, 992px to 1200px) counter

0

between( name, callback )