@openmrs/esm-styleguide/src/breakpoints/index.ts

The styleguide for OpenMRS SPA

export const Breakpoint = {
  PHONE_MIN: 0,
  PHONE_MAX: 600,
  TABLET_MIN: 601,
  TABLET_MAX: 1023,
  SMALL_DESKTOP_MIN: 1024,
  SMALL_DESKTOP_MAX: 1439,
  LARGE_DESKTOP_MIN: 1440,
  LARGE_DESKTOP_MAX: Number.MAX_SAFE_INTEGER,
} as const;

function setBodyCssClasses() {
  document.body.classList.toggle('omrs-breakpoint-lt-tablet', window.innerWidth < Breakpoint.TABLET_MIN);
  document.body.classList.toggle('omrs-breakpoint-gt-phone', window.innerWidth > Breakpoint.PHONE_MAX);
  document.body.classList.toggle('omrs-breakpoint-gt-tablet', window.innerWidth > Breakpoint.TABLET_MAX);
  document.body.classList.toggle('omrs-breakpoint-lt-desktop', window.innerWidth < Breakpoint.SMALL_DESKTOP_MIN);
  document.body.classList.toggle('omrs-breakpoint-lt-small-desktop', window.innerWidth < Breakpoint.SMALL_DESKTOP_MIN);
  document.body.classList.toggle('omrs-breakpoint-lt-large-desktop', window.innerWidth < Breakpoint.LARGE_DESKTOP_MIN);
  document.body.classList.toggle('omrs-breakpoint-gt-small-desktop', window.innerWidth > Breakpoint.SMALL_DESKTOP_MAX);
}

let isIntegrated = false;

export function integrateBreakpoints() {
  if (isIntegrated) {
    return;
  }
  window.addEventListener('resize', setBodyCssClasses);
  setBodyCssClasses();
  isIntegrated = true;
}