breakpoints-js

breakpoints-js
is a lightweight, pure javascript library for attaching callbacks to breakpoints.
Table of contents
- 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 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.gitcd breakpoints-jsnpm installnpm install -g gulp-cli babel-cligulp build
Done!
Usage
Before you try anything, you need to include breakpoints.js in your page.
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"> ;</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:
Breakpointsdefaults = // 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"> ;</script>
Methods
is
Check if the current screen is a specific size.
Breakpoints; // return true or false
get
Return the size object that you can operate it handily.
// get size objectvar sm = Breakpoints; // attach eventssm; // remove event handlersm; // get min widthsmmin // 768 // get max widthsmmax // 991 // get media querysmmedia // "(min-width: 768px) and (max-width: 991px)" // check if it's current sizesm; // true or false // you can do in a chainBreakpoints;
current
Return the current screen size object
Breakpointscurrent;
on
Attach an event handler function for one or more events to the size
Breakpoints; Breakpoints;
Passing data to the callback
Breakpoints; Breakpoints;
Unite sizes
Breakpoints;
one
The handler attached to the size will executed at most once.
Breakpoints;
off
Remove event handlers attached to size.
// remove all events attached to sm sizeBreakpoints; // remove all enter type events attached to md sizeBreakpoints; // remove specific event handlervar {};Breakpoints; Breakpoints // alternative wayBreakpoints;
change
Attach an event handler to the size change event
// attach handler to change eventBreakpoints; // altrnative examplevar { // do something };Breakpoints; // remove the handlerBreakpoints; // remove all change handlersBreakpoints;
Browser support
Tested on all major browsers.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
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:
- 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:
npm install -g gulpnpm install -g babel-clinpm 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
Copyright (C) 2016 amazingSurge.
Licensed under the LGPL license.