Package Exports

postcss-easy-media-query

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-easy-media-query) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-easy-media-query

Postcss plugin for easily create media queries. Inspired by Rupture syntax.

It makes available 4 at-rules: @above, @between, @below and @breakpoint:

/* @media screen and (min-width: 768px) */
@above 768px {
  .box {
    width: 25%;
  }
}

/* @media screen and (min-width: 400px) and (max-width: 768px) */
@between 400px 768px {
  .box {
    width: 50%;
  }
}

/* @media screen and (max-width: 400px) */
@below 400px {
  .box {
    width: 100%;
  }
}

You can also use @breakpoint to store breakpoints in variables:

@breakpoint md 768px;
@breakpoint sm 400px;

/* @media screen and (min-width: 768px) */
@above md {
  .text {
    font-size: 2em;
  }
}

/* @media screen and (min-width: 400px) and (max-width: 768px) */
@between sm md {
  .text {
    font-size: 1.3em
  }
}

installation

npm install postcss-easy-media-query --save-dev

tests

npm install && npm test

usage

var postcss = require('postcss')
var easyMediaQuery = require('postcss-easy-media-query')

postcss([easyMediaQuery()])

options

`breakpoints: Object`

Set the default breakpoints:

postcss([easyMediaQuery({
  breakpoints: {
    tablet: '800px',
    mobile: '600px'
  }
})])

Then you can use the defined breakpoints in your CSS:

@above tablet {
  /* ... */
}

@between mobile tablet {
  /* ... */
}

license

MIT