Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

mqify

Package Overview
Dependencies
6
Maintainers
1
Versions
4
Issues
File Explorer

Advanced tools

mqify

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

    1.1.0latest

Version published
Maintainers
1
Yearly downloads
22,605
decreased by-13.4%

Weekly downloads

Readme

Source

mqify Build Status js-standard-style

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 } } ]

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.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc