{"_id":"@cthru/jsmq","_rev":"2-c736a92f42226c5c3c68421e21b17997","name":"@cthru/jsmq","description":"Javascript based media queries","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@cthru/jsmq","version":"0.1.1","description":"Javascript based media queries","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","pub":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/CthruTech/jsmq.git"},"author":{"name":"Mark Holtzhausen","email":"nemesarial@gmail.com"},"license":"ISC","bugs":{"url":"https://github.com/CthruTech/jsmq/issues"},"homepage":"https://github.com/CthruTech/jsmq","dependencies":{},"devDependencies":{"@cthru/evented":"^0.1.3"},"gitHead":"b0b9c94d0055a885a76128b9e4af849809315eaf","_id":"@cthru/jsmq@0.1.1","_shasum":"59a6d54d8dec97d2cb5700c13a373f9dfa1d5c7d","_from":".","_npmVersion":"4.6.1","_nodeVersion":"6.10.3","_npmUser":{"name":"markh","email":"nemesarial@gmail.com"},"dist":{"shasum":"59a6d54d8dec97d2cb5700c13a373f9dfa1d5c7d","tarball":"https://registry.npmjs.org/@cthru/jsmq/-/jsmq-0.1.1.tgz","integrity":"sha512-gtx1NJfjg1YglsqRneJtblCEE7zq8+wuzwiLYqPRSuiUmU77rwt5N+7Lqlg0m/pSSCYFtegCc6CA/PCa+yU2fg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3/bWlLA1EQidO+PDH6PcY3WieNYAhHAwUF8K0XcYCBAiBu62jATMBdAsGaegEVDmPm4Bwf/7fmjc6GtPeN2xSeVA=="}]},"maintainers":[{"name":"markh","email":"nemesarial@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsmq-0.1.1.tgz_1513252712671_0.9596691632177681"}}},"readme":"# JSMQ\nJavaScript Media Queries\n\n## Why\nCSS Media queries are great but would be greater if there was javascript insight\ninto what size you're currently in. JSMQ allows you to define size definitions\nfor your own device breakdown that will work both by adding the correct classes\nto the dom for the right sized devices and also trigger javascript events when\nentering or exiting a device's defined size aspect.\n\n## How\nJSMQ can be implemented in a programmatic manner and also as an automated \nsemantically defined manner.\n\n### Programatic implementation\n\n    const jsmq = new JSMQ();\n    \n    jsmq.setBreakpoint('mobile_breakpoint', 0, 320, 'device_mobile');\n    jsmq.setBreakpoint('tablet_breakpoint', 321, 876, 'device_tablet');\n    jsmq.setBreakpoint('desktop_breakpoint', 877, 1200, 'device_desktop');\n    jsmq.setBreakpoint('large_breakpoint', 1200, '*', 'device_large_desktop');\n    \n    jsmq.on('tablet_breakpoint:enter', (payload) => {\n        console.log('tablet_breakpoint entered',payload);\n    });\n\n### Semantic HTML implementation\n\n    <html>\n        <head></head>\n        <body data-jsmq=\"0-320:device_mobile_small,321-480:device_mobile_large,481-768:device_tablet, 769-1200:device_screen, 1201-*:device_screen_large\" >\n            <div class=\"wrapper\" data-jsmq=\"0-768:mobile,769-*:screen\"></div> \n            <script>JSMQ.detect()</script>\n        </body>\n    </html>\n","maintainers":[{"name":"markh","email":"nemesarial@gmail.com"}],"time":{"modified":"2022-06-12T16:47:54.763Z","created":"2017-12-14T11:58:32.722Z","0.1.1":"2017-12-14T11:58:32.722Z"},"homepage":"https://github.com/CthruTech/jsmq","repository":{"type":"git","url":"git+https://github.com/CthruTech/jsmq.git"},"author":{"name":"Mark Holtzhausen","email":"nemesarial@gmail.com"},"bugs":{"url":"https://github.com/CthruTech/jsmq/issues"},"license":"ISC","readmeFilename":"README.md"}