breakpoints-js ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing)

> breakpoints-js is a lightweight, pure javascript library for attaching callbacks to breakpoints.

- Main files
- Quick start
- Usage
- Examples
- Defaults
- Methods
- Browser support
- Contributing
- Development
- Changelog
- Other Projects
- Copyright and license

Main files


dist/
├── breakpoints.js
├── breakpoints.es.js
└── breakpoints.min.js


Quick start

Download the [production version][min] or the [development version][max].
[min]: https://raw.github.com/amazingSurge/breakpoints-js/master/dist/breakpoints.min.js
[max]: https://raw.github.com/amazingSurge/breakpoints-js/master/dist/breakpoints.js

#### Install From Bower`sh bower install breakpoints.js --save`

#### Install From Npm`sh npm install breakpoints-js --save`

#### Install From Yarn`sh yarn add breakpoints-js`

###Build From Source

If you want build from source:

`sh git clone git@github.com:amazingSurge/breakpoints-js.git cd breakpoints-js npm install npm install -g gulp-cli babel-cli gulp build`

Done!

`Usage`

Before you try anything, you need to include breakpoints.js in your page.

`html`

You may need provide a matchMedia polyfill if you wish to support old/incapable browsers.

Then you can init the script easily by code`javascript`

`Examples`


There are some example usages that you can look at to get started. They can be found in the
examples folder.
Defaults

It will use the bootstrap media query breakpoints by default:

`javascript Breakpoints.defaults = { // Extra small devices (phones) xs: { min: 0, max: 767 }, // Small devices (tablets) sm: { min: 768, max: 991 }, // Medium devices (desktops) md: { min: 992, max: 1199, }, // Large devices (large desktops) lg: { min: 1200, max: Infinity } };`

You can set up your own breakpoints when initialize it:

`javascript`

`Methods`


$3
Check if the current screen is a specific size.

`javascript Breakpoints.is('xs'); // return true or false`

`$3`


Return the size object that you can operate it handily.

`javascript // get size object var sm = Breakpoints.get('sm');

// attach events sm.on('enter', function(){ // do something });

// remove event handler sm.off('enter');

// get min width sm.min // 768

// get max width sm.max // 991

// get media query sm.media // "(min-width: 768px) and (max-width: 991px)"

// check if it's current size sm.isMatched(); // true or false

// you can do in a chain Breakpoints.get('sm').on({ enter: function(){

}, leave: function(){

} });`

`$3`


Return the current screen size object

`javascript Breakpoints.current();`

`$3`


Attach an event handler function for one or more events to the size

`javascript Breakpoints.on('md', { enter: function() { console.info('enter '+ this.name); }, leave: function() { console.info('leave '+ this.name); } });

Breakpoints.on('lg', 'enter', function(){ console.info('hello lg'); });`

#### Passing data to the callback

`javascript Breakpoints.on('sm', "enter", { name: "Addy" }, function(data) { console.info(data.name + ' enter '+ this.name); });

Breakpoints.on('sm', "leave", { name: "Karl" }, function(data) { console.info(data.name + ' leave '+ this.name); });`

#### Unite sizes

`javascript Breakpoints.on('md lg', { enter: function() { console.info('enter '+ this.name); }, leave: function() { console.info('leave '+ this.name); } });`

`$3`


The handler attached to the size will executed at most once.

`javascript Breakpoints.one('md', 'enter', function(){ console.info('this only appear once when enter md'); });`

`$3`


Remove event handlers attached to size.

`javascript // remove all events attached to sm size Breakpoints.off('sm');

// remove all enter type events attached to md size Breakpoints.off('md', 'enter');

// remove specific event handler var enterHandler = function(){}; Breakpoints.on('lg', 'enter', enterHandler);

Breakpoints.off('lg', { enter: enterHandler })

// alternative way Breakpoints.off('lg', 'enter', enterHandler);`

`$3`


Attach an event handler to the size change event

`javascript // attach handler to change event Breakpoints.on('change', function(){ console.info('enter ' + this.current.name); });

// altrnative example var changeHandler = function(){ // do something }; Breakpoints.on('change', changeHandler);

// remove the handler Breakpoints.off('change', changeHandler);

// remove all change handlers Breakpoints.off('change');`

`Browser support`

Tested on all major browsers.

| | | | | | | |:--:|:--:|:--:|:--:|:--:|:--:| | Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ |

-matchMedia browser supportwork perfect on all modern browsers (IE10+, firefox, chrome, android and safari). - With some polyfills (like the ones included in matchMedia.js) Breakpoints works perfect in IE6-9 as well.

`Contributing`


Anyone and everyone is welcome to contribute. Please take a moment to
review the guidelines for contributing. Make sure you're using the latest version of

jquery-scrollTo

 before submitting an issue. There are several ways to help out:
* Bug reports
* Feature requests
* Pull requests
* Write test cases for open bug issues
* Contribute to the documentation
Development

jquery-scrollTo

 is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

`sh npm install -g gulp npm install -g babel-cli npm install`

Then you can generate new distributable files from the sources, using:`gulp build``

More gulp tasks can be found here.

Changelog

To see the list of recent changes, see Releases section.

Other Projects

If you like this project then I encourage you to check out a few of my other hand-selected projects.

- enquire.js - A lightweight, pure JavaScript library for responding to CSS media queries.
- mediaquery - A jQuery plugin for responsive media query events.
- strapPoint - A small jQuery utility plugin to make working with Bootstrap breakpoints easier.
- pointbreak.js - It provides a friendly interface to matchMedia with named media queries and easy to create callbacks.

Copyright and license

Licensed under the LGPL license.

⬆ back to top

[bower-image]: https://img.shields.io/bower/v/breakpoints.js.svg?style=flat
[bower-link]: https://david-dm.org/amazingSurge/breakpoints-js/dev-status.svg
[npm-image]: https://badge.fury.io/js/breakpoints-js.svg?style=flat
[npm-url]: https://npmjs.org/package/breakpoints-js
[license]: https://img.shields.io/npm/l/breakpoints-js.svg?style=flat
[prs-welcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
[daviddm-image]: https://david-dm.org/amazingSurge/breakpoints-js.svg?style=flat
[daviddm-url]: https://david-dm.org/amazingSurge/breakpoints-js

breakpoints-js ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing)

> breakpoints-js is a lightweight, pure javascript library for attaching callbacks to breakpoints.

- Main files
- Quick start
- Usage
- Examples
- Defaults
- Methods
- Browser support
- Contributing
- Development
- Changelog
- Other Projects
- Copyright and license

Main files


dist/
├── breakpoints.js
├── breakpoints.es.js
└── breakpoints.min.js


Quick start

Download the [production version][min] or the [development version][max].
[min]: https://raw.github.com/amazingSurge/breakpoints-js/master/dist/breakpoints.min.js
[max]: https://raw.github.com/amazingSurge/breakpoints-js/master/dist/breakpoints.js

#### Install From Bower`sh bower install breakpoints.js --save`

#### Install From Npm`sh npm install breakpoints-js --save`

#### Install From Yarn`sh yarn add breakpoints-js`

###Build From Source

If you want build from source:

`sh git clone git@github.com:amazingSurge/breakpoints-js.git cd breakpoints-js npm install npm install -g gulp-cli babel-cli gulp build`

Done!

`Usage`

Before you try anything, you need to include breakpoints.js in your page.

`html`

You may need provide a matchMedia polyfill if you wish to support old/incapable browsers.

Then you can init the script easily by code`javascript`

`Examples`


There are some example usages that you can look at to get started. They can be found in the
examples folder.
Defaults

It will use the bootstrap media query breakpoints by default:

You can set up your own breakpoints when initialize it:

`javascript`

`Methods`


$3
Check if the current screen is a specific size.

`javascript Breakpoints.is('xs'); // return true or false`

`$3`


Return the size object that you can operate it handily.

`javascript // get size object var sm = Breakpoints.get('sm');

// attach events sm.on('enter', function(){ // do something });

// remove event handler sm.off('enter');

// get min width sm.min // 768

// get max width sm.max // 991

// get media query sm.media // "(min-width: 768px) and (max-width: 991px)"

// check if it's current size sm.isMatched(); // true or false

// you can do in a chain Breakpoints.get('sm').on({ enter: function(){

}, leave: function(){

} });`

`$3`


Return the current screen size object

`javascript Breakpoints.current();`

`$3`


Attach an event handler function for one or more events to the size

`javascript Breakpoints.on('md', { enter: function() { console.info('enter '+ this.name); }, leave: function() { console.info('leave '+ this.name); } });

Breakpoints.on('lg', 'enter', function(){ console.info('hello lg'); });`

#### Passing data to the callback

`javascript Breakpoints.on('sm', "enter", { name: "Addy" }, function(data) { console.info(data.name + ' enter '+ this.name); });

Breakpoints.on('sm', "leave", { name: "Karl" }, function(data) { console.info(data.name + ' leave '+ this.name); });`

#### Unite sizes

`javascript Breakpoints.on('md lg', { enter: function() { console.info('enter '+ this.name); }, leave: function() { console.info('leave '+ this.name); } });`

`$3`


The handler attached to the size will executed at most once.

`javascript Breakpoints.one('md', 'enter', function(){ console.info('this only appear once when enter md'); });`

`$3`


Remove event handlers attached to size.

`javascript // remove all events attached to sm size Breakpoints.off('sm');

// remove all enter type events attached to md size Breakpoints.off('md', 'enter');

// remove specific event handler var enterHandler = function(){}; Breakpoints.on('lg', 'enter', enterHandler);

Breakpoints.off('lg', { enter: enterHandler })

// alternative way Breakpoints.off('lg', 'enter', enterHandler);`

`$3`


Attach an event handler to the size change event

`javascript // attach handler to change event Breakpoints.on('change', function(){ console.info('enter ' + this.current.name); });

// altrnative example var changeHandler = function(){ // do something }; Breakpoints.on('change', changeHandler);

// remove the handler Breakpoints.off('change', changeHandler);

// remove all change handlers Breakpoints.off('change');`

`Browser support`

Tested on all major browsers.

| | | | | | | |:--:|:--:|:--:|:--:|:--:|:--:| | Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ |

`Contributing`


Anyone and everyone is welcome to contribute. Please take a moment to
review the guidelines for contributing. Make sure you're using the latest version of

jquery-scrollTo

 before submitting an issue. There are several ways to help out:
* Bug reports
* Feature requests
* Pull requests
* Write test cases for open bug issues
* Contribute to the documentation
Development

jquery-scrollTo

 is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

`sh npm install -g gulp npm install -g babel-cli npm install`

Then you can generate new distributable files from the sources, using:`gulp build``

More gulp tasks can be found here.

Changelog

To see the list of recent changes, see Releases section.

Other Projects

If you like this project then I encourage you to check out a few of my other hand-selected projects.

Copyright and license

Licensed under the LGPL license.

⬆ back to top

breakpoints-js

breakpoints-js ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing)

Table of contents

Main files

Quick start

Usage

Examples

Defaults

Methods

$3

$3

$3

$3

$3

$3

$3

Browser support

Contributing

Development

Changelog

Other Projects

Copyright and license

breakpoints-js

breakpoints-js ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing)

Table of contents

Main files

Quick start

Usage

Examples

Defaults

Methods

$3

$3

$3

$3

$3

$3

$3

Browser support

Contributing

Development

Changelog

Other Projects

Copyright and license

`Usage`

`Examples`

`Methods`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Browser support`

`Contributing`

`Usage`

`Examples`

`Methods`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Browser support`

`Contributing`