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.

The plugin exposes the following media query at-rules:

@above
@from-width (min inclusive)
@below
@to-width (max inclusive)
@between
@between-from (min inclusive)
@between-to (max inclusive)

And @breakpoint for defining a breakpoint.

Examples

@above 768px {}
/* @media screen and (min-width: 769px) {} */

@from-width 768px {}
/* @media screen and (min-width: 768px) {} */

@below 400px {}
/* @media screen and (max-width: 399px) {} */

@to-width 400px {}
/* @media screen and (max-width: 400px) {} */

@between 400px 768px {}
/* @media screen and (min-width: 401px) and (max-width: 767px) {} */

@between-from 400px 768px {}
/* @media screen and (min-width: 400px) and (max-width: 767px) {} */

@between-to 400px 768px {}
/* @media screen and (min-width: 400px) and (max-width: 768px) {} */

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

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

/* @media screen and (min-width: 400px) and (max-width: 767px) */
@between-from 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