breakpoints.js
It's like Bootstrap's breakpoints...but for Javascript! Lightweight and smol. jQuery or any other external libraries are not required for this work.
Installation
With npm
npm install @giantpaper/breakpoints.js
With unpkg
<script type="text/javascript" src="https://unpkg.com/@giantpaper/breakpoints.js@2.0.0/breakpoints.min.js"></script>
Usage
import Breakpoints from './breakpoints.js';
// List your breakpoints here. Name them whatever you want. If left blank, default ones will be used.
// Just like Bootstrap, the first breakpoint must always be 0 otherwise it won't work as expected.
let breakpoints = new Breakpoints([
[ 'xs', 0 ],
[ 'sm', 480 ],
[ 'md', 768 ],
[ 'lg', 1024 ],
[ 'xl', 1280 ],
[ 'x2', 1440 ],
[ 'x3', 1690 ],
[ 'x4', 1920 ],
[ 'x5', 2560 ],
]);
breakpoints.get() // returns current breakpoint
breakpoints.is('x4') // true if the current breakpoint is x4
breakpoints.gte('x4') // true if the current breakpoint is greater than or equal to x4
breakpoints.lte('x4') // true if the current breakpoint is lesser than or equal to x4
breakpoints.between('md', 'x4') // true if the current breakpoint is between md and x4
breakpoints.lte('notARealBreakpoint') // will return false if not registered as a breakpoint
Important
breakpoints.js doesn't automatically update the breakpoint on window resize. So if this is important to you, you might actually want to do something like this instead:
(With Vanilla JS)
import Breakpoints from './breakpoints.js';
let breakpoints = new Breakpoints;
var run = function() {
// insert your code here, ex:
if (breakpoints.gte('xl')) {
// do desktop-related code here
}
};
window.onload = run;
window.onresize = run;
(With jQuery)
import Breakpoints from './breakpoints.js';
let breakpoints = new Breakpoints;
var run = function() {
// insert your code here, ex:
if (breakpoints.gte('xl')) {
// do desktop-related code here
}
};
$(window)
.on('load', run)
.on('resize', run);