You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

breakpoints-js

Package Overview
Dependencies
1
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

breakpoints-js

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


Version published
Weekly downloads
1K
increased by44.41%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

breakpoints-js bower NPM version Dependency Status prs-welcome

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

Table of contents

Main files

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

Quick start

Download the production version or the development version.

Install From Bower
bower install breakpoints.js --save
Install From Npm
npm install breakpoints-js --save
Install From Yarn
yarn add breakpoints-js

###Build From Source

If you want build from source:

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.

<script src="breakpoints.min.js"></script>

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

Then you can init the script easily by code

<script type="text/javascript">
    Breakpoints();
</script>

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:

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:

<script type="text/javascript">
    Breakpoints({
        mobile: {
            min: 0,
            max: 767
        },
        tablet: {
            min: 768,
            max: 991
        },
        destop: {
            min: 992,
            max: Infinity
        }
    });
</script>

Methods

is

Check if the current screen is a specific size.

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

get

Return the size object that you can operate it handily.

// 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(){

    }
});

current

Return the current screen size object

Breakpoints.current();

on

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

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
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
Breakpoints.on('md lg', {
    enter: function() {
        console.info('enter '+ this.name);
    },
    leave: function() {
        console.info('leave '+ this.name);
    }
});

one

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

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

off

Remove event handlers attached to size.

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

change

Attach an event handler to the size change event

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

SafariChromeFirefoxEdgeIEOpera
Latest ✓Latest ✓Latest ✓Latest ✓9-11 ✓Latest ✓
  • matchMedia browser support work 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:

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:

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 (C) 2016 amazingSurge.

Licensed under the LGPL license.

⬆ back to top

Keywords

FAQs

Package last updated on 12 Sep 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc