---

npm i @-ui/mq

---

A utility function for adding stored media queries and breakpoints to -ui styles

Quick Start

import mq from '@-ui/mq'
import styles from '@-ui/styles'

const breakpoint = mq({
  // 0px
  phone: 'only screen and (min-width: 0em)',
  // 560px
  tablet: 'only screen and (min-width: 35em)',
  // 1280px
  desktop: 'only screen and (min-width: 80em)',
})

const responsiveBox = styles({
  default: `
    display: block;
    background: #000;
    width: 400px;
    height: 400px;
  `,
  big: breakpoint({
    default: `
      width: 800px;
      height: 800px;
    `,
    desktop: `
      width: 1000px;
      height: 1000px;
    `,
  }),
  small: `
    width: 300px;
    height: 300px;

    ${breakpoint('phone')} {
      width: 200px;
      height: 200px;
    }
  `,
})

API

LICENSE

MIT