https://github.com/akiran/json2mq

Generate media query string from JSON or javascript object
https://github.com/akiran/json2mq

Last synced: 11 days ago
JSON representation

Generate media query string from JSON or javascript object

• Host: GitHub
• URL: https://github.com/akiran/json2mq
• Owner: akiran
• License: mit
• Created: 2014-11-21T11:09:42.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2018-10-27T08:44:04.000Z (about 6 years ago)
• Last Synced: 2024-10-30T03:37:25.565Z (14 days ago)
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 171
• Watchers: 3
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# json2mq

json2mq is used to generate media query string from JSON or javascript object.

## Install

    npm install json2mq

    

## Usage

```javascript

var json2mq = require('json2mq');

json2mq({minWidth: 100, maxWidth: 200});

// -> '(min-width: 100px) and (max-width: 200px)'

```

* Media type 

```javascript

json2mq({screen: true});  // -> 'screen'

```

* Media type with negation 

```javascript

json2mq({handheld: false});  // -> 'not handheld'

```

* Media features can be specified in camel case

```javascript

json2mq({minWidth: 100, maxWidth: 200});

// -> '(min-width: 100px) and (max-width: 200px)'

```

* px is added to numeric dimension values

```javascript

json2mq({minWidth: 100, maxWidth: '20em'});

// -> '(min-width: 100px) and (max-width: 20em)'

```

* Multiple media queries can be passed as an array

```javascript

json2mq([{screen: true, minWidth: 100}, {handheld: true, orientation: 'landscape'}]); 

// -> 'screen and (min-width: 100px), handheld and (orientation: landscape)'

```

## Contributors

* [Kiran Abburi](https://twitter.com/kiran_abburi)

* Eric Schoffstall