mqify

Turn a css string and media query config into classes for each breakpoint

Installation

npm install --save mqify

Usage

var mqify = require('mqify')

mqify(CSS, [24, 32, 46])

Input

.fl { float: left }

Output

.fl { float: left }

@media screen and (min-width: 24em) and (max-width: 32em) {
  .fl-md { float: left }
}

@media screen and (min-width: 32em) and (max-width: 64em) {
  .fl-lg { float: left }
}

@media screen and (min-width: 64em) {
  .fl-xl { float: left }
}

Options

In addition to a breakpoint array, mqify accepts a key/value pair or a more complex config.

Key/value pair

[
  { medium: 24 },
  { large: 48 }
]

All the options

[
  {
    med: {
      value: 32,
      prefix: true,
      delimiter: '-',
      minWidth: true
    }
  }
]

Print query

mqify can also construct the @media print query:

[
  // Pass a 'print' string
  'print',
  // Or a breakpoint named 'print'
  { print: true }
  // Or a breakpoint named 'print'. Its value will be the query identifier
  { print: 'p'}
]

License

MIT

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Crafted with <3 by John Otander (@4lpine).

This package was initially generated with yeoman and the p generator.