Adaptive

Read the document and provide JS with the same breakpoints that where defined in CSS

NPM installation

npm i --save @superherocheesecake/adaptive

Require the module

import { adaptive } from '@superherocheesecake/adaptive');

Events

isMediaQueryActive(name)

adaptive.addEventListerner("change:mediaquery", [handler]);

Methods

isMediaQueryActive(name)

adaptive.isMediaQueryActive("regular");

CSS setup

Adaptive will look for a string reference in the html before pseudo element. That string needs to start with 'adaptive:'.

@media (max-width: 1024px) {
  html:before {
    position: absolute;
    display: none;
    content: "adaptive:regular";
  }
}