kist-querypoint

Simple media query breakpoints manager.

Installation

npm install kist-querypoint --save
 
bower install kist-querypoint --save

API

.add(name, query)

Returns: Query

name

Type: String

Breakpoint name.

query

Type: String

Valid matchMedia query for resolving.

.remove(name)

Returns: Object (querypoint)

name

Type: String

Name of breakpoint to remove.

.get(name)

Returns: Query

name

Type: String

Name of breakpoint to get.

.listen(cb, useNativeBehavior)

Returns: Query

cb

Type: Function

Callback to call when media query enters/exits.

Argument	Type	Description
mq	MediaQueryList	Current media query object.

useNativeBehavior

Type: Boolean

Should you use native media query listener behavior or not (native behavior is to not fire callback on page load, only when exiting/entering query definition).

.ignore(cb)

Returns: Query

cb

Type: Function

Callback to remove from listening.

Examples

var querypoint = require('kist-querypoint');
 
// Add querypoint
querypoint.add('bp-alpha-s','screen and (min-width:600px)');
querypoint.add('bp-alpha-m','screen and (min-width:800px)');
querypoint.add('bp-alpha-l','screen and (min-width:1000px)');
 
// Remove querypoint
querypoint.remove('bp-alpha-s');
 
// Get querypoint
querypoint.get('bp-alpha-s');
 
// Listen, even at page load
querypoint
    .get('bp-alpha-s')
    .listen(function ( mq ) {
        if ( mq.matches ) {
            // Do something, even at page load
        }
    });
 
// Listen, but only with native behavior
querypoint
    .get('bp-alpha-s')
    .listen(function ( mq ) {
        if ( mq.matches ) {
            // Do something, but not on page load
        }
    }, true);
 
// Unlisten (ignore)
querypoint
    .get('bp-alpha-s')
    .ignore(cb);

AMD and global

define(['kist-querypoint'], cb);
 
window.kist.querypoint;

Browser support

Tested in IE8+ and all modern browsers.

License

MIT © Ivan Nikolić