isBreakpoint

description

Checks if the current breakpoint matches the passed breakpoint. It supports querying with or without +/- modifiers.

Uses getCurrentMediaQuery to read a CSS variable describing the name of the current breakpoint, see getCurrentMediaQuery doc.

requires

• getCurrentMediaQuery

parameters

• breakpoint - required - the breakpoint to match current breakpoint against
• breakpoints - optional - array of breakpoint names to test against

returns

• boolean

example usage:

// returns true (if viewport is 'md' size)
var isMediumViewport = isBreakpoint('md');

// returns true (if viewport is 'lg', 'lg' or 'xxlarge' lg)
var isLargerViewport = isBreakpoint('lg+');

// returns true (if viewport is 'sm' or 'xs' size)
var isSmallerViewport = isBreakpoint('sm-');

Specifying your application breakpoints

The default list of breakpoints is: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']

You can override this by including your application breakpoints, smallest to largest, as an array as the optional second parameter:

// returns true (if viewport is 'medium' size)
var applicationBreakpoints = ['small', 'medium', 'large', 'xlarge'];
var isMediumViewport = isBreakpoint('medium', applicationBreakpoints);

Or, you can set this globally using:

// app.js
// override default breakpoints (optional)
var A17 = window.A17 || {};
A17.breakpoints = [ 'small', 'medium', 'large' ];
var isMediumViewport = isBreakpoint('medium');