0.2.0 • Published 9 years ago

json2mq v0.2.0

Weekly downloads
1,200,750
License
MIT
Repository
github
Last release
9 years ago

json2mq

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

Install

npm install json2mq

Usage

var json2mq = require('json2mq');
json2mq({minWidth: 100, maxWidth: 200});
// -> '(min-width: 100px) and (max-width: 200px)'
  • Media type
json2mq({screen: true});  // -> 'screen'
  • Media type with negation
json2mq({handheld: false});  // -> 'not handheld'
  • Media features can be specified in camel case
json2mq({minWidth: 100, maxWidth: 200});
// -> '(min-width: 100px) and (max-width: 200px)'
  • px is added to numeric dimension values
json2mq({minWidth: 100, maxWidth: '20em'});
// -> '(min-width: 100px) and (max-width: 20em)'
  • Multiple media queries can be passed as an array
json2mq([{screen: true, minWidth: 100}, {handheld: true, orientation: 'landscape'}]); 
// -> 'screen and (min-width: 100px), handheld and (orientation: landscape)'

Contributors

  • Eric Schoffstall
ff-antd-vuedcxt-design-xue-xant-mstant-masterreact-slick-autoplayreact-slick-xllm-react-slickvue-slick-carousel-edit@onrewind/react-slickxhn-design-vuezyd-design-vueant-design-vue-xuexueant-design-vue-xxxue-dev-new-xant-design-vue-xxxxue-dev-new2growth-antd-webant-design-vue-lapvue-ant-patterns-cicdmio-design-vueshaper-reactant-design-vue-ysb@pkbr/react-slick@askme-inc/ant-design-vuetest-ant-design-vuerun-design-vue2@infinitebrahmanuniverse/nolb-json2cfbgc-componentstest-schh-uix-intelligent-ui@everything-registry/sub-chunk-1986ant-design-vue-zxkj@allthings/elements@aadil009/react-slick@arijs/react-slick@arielapaula/components@dior/react-slick@echartw/react-slick@ethanresnick/react-slickdarmody-react-slickcustom-react-slickcurls-hookscurlscustomize-ant-design-vuecorra-react-slick99roomz-react-slick310-reactdi-react-slickdjl-ant-design-vue@cuong.lv2/modal-formdrip-vuedreamlines-slick@hushicai/react-slick@jeffreznik/react-slick@kupibilet/react-media@jxstjh/ant-design-vue@jxstjh/portalfb-react-slickfff-test-ant-vuefine-mqflowable-bpmn-modelerfaw-uiux-vue@koding-cl/react-kitfast-design-vue@lalamove/react-slick@luisliuchao/react-slickvue-stylexvue-ui-packageyonhis-uix-antd-vuexizhi-react-slickxft-design-vuewith-breakpointsys-iot-ant-design-vueyazuo3yazuo4yc-react-slickvue-composable-helpersxtf_advxue-devxue-dev-newxue1-devzyl-ts-uiwang-dcxt-devwang-dcxtvue-pointbreakvue-mediavue-media-queryvue-mqvue-pro-elementvue-slick-carousel-rtlvue-slick-carousel2vue-slick-agliardivue-slick-carouselvue-slick-carousel-editarrowvue3-slick-carouselwoowa-react-slickvue-ant-patternsvue-antdvue-antd-ui
0.2.0

9 years ago

0.1.0

9 years ago