minsky-kit
Version:
Kit of components for MINSKY web agency
32 lines (27 loc) • 1.05 kB
JavaScript
// ====================================================================== //
// Responsive
// ====================================================================== //
export const breakpoints = {
main: '0em',
tiny: '28.125em',
small: '38.75em',
medium: '46.875em',
large: '60em',
big: '66.875em',
bigger: '80em',
biggest: '90em',
spaceship: '120em',
};
/**
* @function `isBreakpoint`
* @param { 'main' | 'tiny' | 'small' | 'large' | 'big' | 'bigger' | 'biggest' | 'spaceship' } fromBreakpoint (required) - Possible values: 'main', 'small', 'medium',...
* @param { 'main' | 'tiny' | 'small' | 'large' | 'big' | 'bigger' | 'biggest' | 'spaceship' } toBreakpoint - Possible values: 'main', 'small', 'medium',...
* @return {boolean}
*/
export const isBreakpoint = (fromBreakpoint, toBreakpoint = null) => {
let mediaRule = `(min-width: ${breakpoints[fromBreakpoint]})`;
if (toBreakpoint) {
mediaRule = `${mediaRule} and (max-width: ${breakpoints[toBreakpoint]})`;
}
return window.matchMedia(mediaRule).matches;
};