Miss any of our Open RFC calls?Watch the recordings here! »

@0saw/foundation-media-query

1.0.6 • Public • Published

Foundation Media Query

Small little nifty utility to help you work with foundation-sites media queries.

No dependencies. Except for foundation (Da-a-ah). Adds CustomEvent polyfill.

Usage

import mq from "@0saw/foundation-media-query";
 
document.addEventListener('breakpoint-change', breakpointEventListener);
 
function breakpointEventListener() {
    if (mq.is('large only')) {
        console.log("You've hit the right spot");
    }
}

You are not obligated to import mq to your scope. Instead you can use event.detail like so:

import "@0saw/foundation-media-query";
 
document.addEventListener('breakpoint-change', breakpointEventListener);
 
function breakpointEventListener(event) {
    let mq = event.detail;
 
    switch (mq.current) {
        case 'medium':
            alert("You've hit the right spot");
            break;
        case 'large':
            alert("Too far");
            break;
        default:
            break;
    }
}

API

mq object contains a few useful things.

Getters

  • mq.current - Gives you the name of current breakpoint
  • mq.currentFull - Gives you all of the breakpoint info that we have. (I.e mq.currentFull.matchMedia will give you matchMedia object. In case you want to do something naughty)
  • mq.landscape - Analog of CSS's (orientation: landscape)
  • mq.portrait - Pretty straight forward
  • mq.retina - DPI is at least 2x

Methods

  • mq.is - Allows you to quickly check current breakpoint
// Either true or false
mq.is('xlarge');
 
// Won't return true when next breakpoint is active. ([small -> medium] -> large)
mq.is('medium only');
 
// portrait/ladscape/retina
mq.is('portrait');

FAQ

Install

npm i @0saw/foundation-media-query

DownloadsWeekly Downloads

3

Version

1.0.6

License

MIT

Unpacked Size

73.6 kB

Total Files

24

Last publish

Collaborators

  • avatar