Simple Breakpoints
A simple breakpoints plugin based off of four simple breakpoint sizes ('mobile', 'tablet', 'small_desktop', 'large_desktop'
) with support to listen for breakpoint change events
Installation and usage
$ npm install simple-breakpoints --save
// default breakpoint sizes: { mobile: 480, tablet: 640, small_desktop: 1024, large_desktop: 1180 } var breakpoints = ; ifbreakpoints // do something for mobile ifbreakpoints // do something for small desktop ifbreakpoints // do something between small and large desktop
Listening to events
// on all breakpoint changes breakpoints; // on breakpoint changes from small to large breakpoints; // on breakpoint changes from large to small breakpoints; // remove all events from `breakpointChangeDown` breakpoints; // fire an event only once breakpoints;
Defining your own breakpoints
var breakpoints = mobile : 320 tablet : 640 small_desktop : 900 large_desktop : 1200 ;
API
Function | Params | Description |
---|---|---|
getViewportSize | returns the viewport size as object { width: 1024, height: 768 } this is fired on window.resize and is stored in breakpoints.viewport |
|
currentBreakpoint | returns current breakpoint size ('mobile', 'tablet', 'small_desktop', 'large_desktop' ) |
|
isBetween | smallBreakpoint, largeBreakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop' ) |
Check if viewport is between two breakpoints |
isLessThan | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop' ) |
Check if viewport is less than the width of the breakpoint |
isGreaterThan | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop' ) |
Check if viewport is greater than the width of the breakpoint |
isLessThanEqualTo | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop' ) |
Check if viewport is less than or equal the width of the breakpoint |
isGreaterThanEqualTo | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop' ) |
Check if viewport is greater than or equal the width of the breakpoint |
isMobile | Check if the viewport is within the mobile breakpoint |
|
isTablet | Check if the viewport is within the tablet breakpoint |
|
isSmallDesktop | Check if the viewport is within the small_desktop breakpoint |
|
isLargeDesktop | Check if the viewport is within the large_desktop breakpoint |
|
on (event, callback) | ('breakpointChange' | 'breakpointChangeUp' | 'breakpointChangeDown' , callback(from, to) ) |
watch for changes on breakpoints with and fire a callback |
once (event, callback) | ('breakpointChange' | 'breakpointChangeUp' | 'breakpointChangeDown' , callback(from, to) ) |
watch for changes on breakpoints with and fire a callback only once |
off (event) | ('breakpointChange' | 'breakpointChangeUp' | 'breakpointChangeDown' ) |
Remove event listener for breakpoint change |