❤
npm
Sign UpSign In

postcss-easy-media-query

1.0.0 • Public • Published

postcss-easy-media-query

Build Status npm version JavaScript Style Guide

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

Readme

Keywords

Package Sidebar

Install

npm i postcss-easy-media-query

Repository

github.com/gsantiago/postcss-easy-media-query

Homepage

github.com/gsantiago/postcss-easy-media-query#readme

Weekly Downloads

284

Version

1.0.0

License

MIT

Last publish

Collaborators

  • gsantiago
Try on RunKit
Report malware