Turn a css string and media query config into classes for each breakpoint
npm install mqifyTurn a css string and media query config into classes for each breakpoint
``bash`
npm install --save mqify
`javascript
var mqify = require('mqify')
mqify(CSS, [24, 32, 46])
`
#### Input
`css`
.fl { float: left }
#### Output
`css
.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
`js`
[
{ medium: 24 },
{ large: 48 }
]
##### All the options
`js`
[
{
med: {
value: 32,
prefix: true,
delimiter: '-',
minWidth: true
}
}
]
##### Print query
mqify can also construct the @media print query:
`js`
[
// 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'}
]
MIT
1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)git commit -am 'Add some feature'
3. Commit your changes ()git push origin my-new-feature`)
4. Push to the branch (
5. Create new Pull Request
Crafted with <3 by John Otander (@4lpine).
*
> This package was initially generated with yeoman and the p generator.