{"_id":"@ardentic/stylus-mq","_rev":"7-09b110945d7860d3bc6fbe16f7066fd4","name":"@ardentic/stylus-mq","description":"mq() is a Stylus mixin that helps manipulating media queries in an elegant way.","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@ardentic/stylus-mq","version":"1.0.0","description":"mq() is a Stylus mixin that helps manipulating media queries in an elegant way.","main":"mq.styl","keywords":["responsive","stylus","rwd","mediaquery","query","queries","media"],"ignore":["**/.*","test"],"directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/ardentic/stylus-mq.git"},"author":{"name":"Ardentic"},"license":"MIT","bugs":{"url":"https://github.com/ardentic/stylus-mq/issues"},"homepage":"https://github.com/ardentic/stylus-mq#readme","gitHead":"eed11f8e039a8551c5e89d6c50f395c1f839af47","_id":"@ardentic/stylus-mq@1.0.0","_shasum":"3db076ce14d7b1ed020f4cda19e18945f682de5c","_from":".","_npmVersion":"3.3.4","_nodeVersion":"4.1.1","_npmUser":{"name":"ardentic","email":"hello@ardentic.com"},"dist":{"shasum":"3db076ce14d7b1ed020f4cda19e18945f682de5c","tarball":"https://registry.npmjs.org/@ardentic/stylus-mq/-/stylus-mq-1.0.0.tgz","integrity":"sha512-zqQeoSWEqVndVqCGbZxsi7uEwqqCmMjtrXv5KeM5VdFiBt6X3DffnPCfrJQ9Njl2M9mIJwAbEDzv4flUMsj8QQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1BlzOs+ZN+LPyM1JrFtOLsd7C09T7aNpjKRxIA7ZStwIhAJ4g5oeTybD/mB1tvFVpM4Fi8f/E+AUMcuvex5Q0uJuQ"}]},"maintainers":[{"name":"ardentic","email":"hello@ardentic.com"}],"deprecated":"Use stylus-mq instead, see https://github.com/marcuslilja/stylus-mq"},"1.0.1":{"name":"@ardentic/stylus-mq","version":"1.0.1","description":"mq() is a Stylus mixin that helps manipulating media queries in an elegant way.","main":"mq.styl","keywords":["responsive","stylus","rwd","mediaquery","query","queries","media"],"ignore":["**/.*","test"],"directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/ardentic/stylus-mq.git"},"author":{"name":"Ardentic"},"license":"MIT","bugs":{"url":"https://github.com/ardentic/stylus-mq/issues"},"homepage":"https://github.com/ardentic/stylus-mq#readme","gitHead":"630cb76007cdaf198d5b516950039c139c58ea99","_id":"@ardentic/stylus-mq@1.0.1","_shasum":"10cc52c9e2f4e2bfd89d2b1236495e4bfa84a142","_from":".","_npmVersion":"2.14.7","_nodeVersion":"4.2.1","_npmUser":{"name":"ardentic","email":"hello@ardentic.com"},"dist":{"shasum":"10cc52c9e2f4e2bfd89d2b1236495e4bfa84a142","tarball":"https://registry.npmjs.org/@ardentic/stylus-mq/-/stylus-mq-1.0.1.tgz","integrity":"sha512-C0RvNURTnjOPWMUpxlkiCdiLwVBnaqYhy21eJ68Y1dNuy+25HEduTT+LQL/MShcDkoWVCs8DSAuBCiJJzb6f5w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPq8tjyiOZV4v/XX5OICKKUBCaFFwXYHLrrCN21vZCvAIhAJPVEMFcjCcw06PaHDieTsadMy9Z/S82ZJOzvBAug8Wj"}]},"maintainers":[{"name":"ardentic","email":"hello@ardentic.com"}],"deprecated":"Use stylus-mq instead, see https://github.com/marcuslilja/stylus-mq"},"1.1.0":{"name":"@ardentic/stylus-mq","version":"1.1.0","description":"mq() is a Stylus mixin that helps manipulating media queries in an elegant way.","main":"mq.styl","keywords":["responsive","stylus","rwd","mediaquery","query","queries","media"],"ignore":["**/.*","test"],"directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/ardentic/stylus-mq.git"},"author":{"name":"Ardentic"},"license":"MIT","bugs":{"url":"https://github.com/ardentic/stylus-mq/issues"},"homepage":"https://github.com/ardentic/stylus-mq#readme","gitHead":"755433f0c0a1a50505b7b421cceb7d697ea0b86d","_id":"@ardentic/stylus-mq@1.1.0","_shasum":"efdbd17d5cd64c5312b8b9983d370430c63f16f2","_from":".","_npmVersion":"3.8.9","_nodeVersion":"6.2.0","_npmUser":{"name":"ardentic","email":"hello@ardentic.com"},"dist":{"shasum":"efdbd17d5cd64c5312b8b9983d370430c63f16f2","tarball":"https://registry.npmjs.org/@ardentic/stylus-mq/-/stylus-mq-1.1.0.tgz","integrity":"sha512-W1jek93gOcsTKlcc7krfwAS1QgLXZqQS7u36IH9+X3lsL56A3GvJfCbgAKbeNnwXwX8/9VHw9t18sDCvTVbMpw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAj/JZbDDNQ+L+qHYX9CgsmUnSqgpofpDOz1gIKHRsZKAiEA80GMGQGknuMb4QXcyKXZlrwfvjTOtaYV5yKXYqfOw2o="}]},"maintainers":[{"name":"ardentic","email":"hello@ardentic.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/stylus-mq-1.1.0.tgz_1464082637656_0.3766435985453427"},"deprecated":"Use stylus-mq instead, see https://github.com/marcuslilja/stylus-mq"},"2.0.0":{"name":"@ardentic/stylus-mq","version":"2.0.0","description":"mq() is a Stylus mixin that helps manipulating media queries in an elegant way.","main":"mq.styl","keywords":["responsive","stylus","rwd","mediaquery","query","queries","media"],"ignore":["**/.*","tests"],"scripts":{"test":"mocha --require babel-register tests"},"repository":{"type":"git","url":"git+https://github.com/ardentic/stylus-mq.git"},"author":{"name":"Ardentic"},"license":"MIT","bugs":{"url":"https://github.com/ardentic/stylus-mq/issues"},"homepage":"https://github.com/ardentic/stylus-mq#readme","devDependencies":{"babel-register":"6.11.6","mocha":"3.0.0","stylus":"0.54.5"},"gitHead":"99530f83b0c04a34e3bab6da3ea3b0bc02386e64","_id":"@ardentic/stylus-mq@2.0.0","_shasum":"2b7bd6f6b1376db655787e42a2dd81fcaf64280a","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.3.1","_npmUser":{"name":"ardentic","email":"hello@ardentic.com"},"dist":{"shasum":"2b7bd6f6b1376db655787e42a2dd81fcaf64280a","tarball":"https://registry.npmjs.org/@ardentic/stylus-mq/-/stylus-mq-2.0.0.tgz","integrity":"sha512-7Gvx8w78QrgUpIungHrXWLRU9iwrWRiTHYK8GXauZw918kAJERw6sJRV1JHdNmeSUxyNQ4nXOTngIeKPfGo2Eg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ6H3OuS1QKF4HkpGe+fkUfXhtxlbRnZmyNu2C5OvKSQIhANWnpsexHqYUSHyNRw/qK22VVW7JT4E31PBhb9NJ+T2I"}]},"maintainers":[{"name":"ardentic","email":"hello@ardentic.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/stylus-mq-2.0.0.tgz_1470758518332_0.7224404872395098"},"directories":{},"deprecated":"Use stylus-mq instead, see https://github.com/marcuslilja/stylus-mq"}},"readme":"\n# Stylus - Media Queries\n\n**stylus-mq** is a simple mixin to ease the use of media queries in [stylus](http://stylus-lang.com/). A lot of inspiration to this library was gathered from [sass-mq](https://github.com/guardian/sass-mq).\n\n## Installation\n\nWith NPM\n\n```\nnpm install @ardentic/stylus-mq\n```\n\nManual installation can be done by downloading [mq.styl](https://raw.githubusercontent.com/ardentic/stylus-mq/master/mq.styl) to your project.\n\n## Basic example\n\n`stylus-mq` will allow you to write this:\n\n```stylus\n@import 'mq.styl';\n\n$mq-breakpoints = {\n  small: 768px\n};\n\n.className {\n  background-color: white;\n\n  +mq($until: 'small') {\n    background-color: red;\n  }\n}\n```\n\nand generate this:\n\n```css\n.className {\n  background-color: white;\n}\n\n@media (max-width: 48em) {\n  .className {\n    background-color: red;\n  }\n}\n```\n\n## Options\n\n**$mq-breakpoints**\n\nAllows you to override the default named breakpoints.\n\nExample:\n\n```stylus\n$mq-breakpoints = {\n  mobile: 768px,\n  tablet: 1024px,\n  desktop: 1280px\n};\n```\n\nDefault settings:\n\n```stylus\n$mq-breakpoints ?= {\n  tiny: 480px,\n  small: 768px,\n  medium: 992px,\n  large: 1200px\n};\n```\n\n**$mq-responsive**\n\nAllows you to create a separate stylesheet for older browsers that don't support media queries.\n\nExample:\n\n```stylus\n$mq-responsive = false;\n```\n\nDefault settings:\n\n```stylus\n$mq-responsive ?= true;\n```\n\n**$mq-static-breakpoint**\n\nBreakpoint to be used if `$mq-responsive` is set to false.\n\nExample:\n\n```stylus\n$mq-static-breakpoint = 'mobile';\n```\n\nDefault settings:\n\n```stylus\n$mq-static-breakpoint ?= 'desktop';\n```\n\n**$mq-base-font-size**\n\nBase font size to calculate media queries from.\n\nExample:\n\n```stylus\n$mq-base-font-size = 14px;\n```\n\nDefault settings:\n\n```stylus\n$mq-base-font-size ?= 16px;\n```\n\n## Parameters\n\n`mq()` takes up to three optional parameters:\n\n* **$from:** _inclusive_ `min-width` boundary\n* **$until:** _exclusive_ `max-width` boundary\n* **$and:** additional custom directives\n\n## Breakpoints as JSON data\n\nTo enable using the same breakpoint names and widths in both Stylus and JavaScript the breakpoint data can be converted to JSON.\n\nExample:\n\n```stylus\nbody {\n  &:after {\n    display: none;\n    content: mq-breakpoints-to-json();\n  }\n}\n```\n\nResults:\n\n```css\nbody:after {\n  display: none;\n  content: '{ \"tiny\": \"30em\", \"small\": \"48em\", \"medium\": \"62em\", \"large\": \"75em\" }';\n}\n```\n\nThis can be read and parsed with something like this:\n\n```javascript\nvar removeQuotes = function (string) {\n  return string.replace(/^['\"]+|\\s+|\\\\|(;\\s?})+|['\"]$/g, '');\n};\n\nvar getBreakpoints = function () {\n  var breakpoints = window\n    .getComputedStyle(document.body, ':after')\n    .getPropertyValue('content');\n\n  return JSON.parse(removeQuotes(breakpoints));\n};\n```\n\n## Adding custom breakpoints\n\n```stylus\n$mq-breakpoints = mq-add-breakpoint('tvscreen', 1920px);\n\n.hide-on-tv {\n  +mq('tvscreen') {\n    display: none;\n  }\n}\n```\n\n## Testing\n\nInstall dependencies.\n\n```\nnpm install\n```\n\nRun tests.\n\n```\nnpm test\n```\n","maintainers":[{"name":"ardentic","email":"hello@ardentic.com"}],"time":{"modified":"2022-06-12T14:47:18.032Z","created":"2015-10-02T08:14:36.735Z","1.0.0":"2015-10-02T08:14:36.735Z","1.0.1":"2015-10-27T16:11:01.848Z","1.1.0":"2016-05-24T09:37:19.757Z","2.0.0":"2016-08-09T16:02:01.348Z"},"homepage":"https://github.com/ardentic/stylus-mq#readme","keywords":["responsive","stylus","rwd","mediaquery","query","queries","media"],"repository":{"type":"git","url":"git+https://github.com/ardentic/stylus-mq.git"},"author":{"name":"Ardentic"},"bugs":{"url":"https://github.com/ardentic/stylus-mq/issues"},"license":"MIT","readmeFilename":"README.md"}