{"_id":"@caktus/responseless","_rev":"4-761ea3385f1bbd6d09007f2917ae738b","name":"@caktus/responseless","description":"A set of less mixins for easily dealing with responsive layouts consistently","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@caktus/responseless","version":"0.1.0","description":"A set of less mixins for easily dealing with responsive layouts consistently","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/caktus/responseless.git"},"keywords":["less","stylesheet","css","flexbox"],"author":{"name":"Calvin Spealman","email":"calvin@caktusgroup.com"},"license":"MIT","bugs":{"url":"https://github.com/caktus/responseless/issues"},"homepage":"https://github.com/caktus/responseless#readme","_id":"@caktus/responseless@0.1.0","_shasum":"5a242f188a0bba910ddab997015201c8c7651546","_from":".","_npmVersion":"3.8.6","_nodeVersion":"4.2.4","_npmUser":{"name":"caktus","email":"calvin+npm@caktusgroup.com"},"dist":{"shasum":"5a242f188a0bba910ddab997015201c8c7651546","tarball":"https://registry.npmjs.org/@caktus/responseless/-/responseless-0.1.0.tgz","integrity":"sha512-IkspMJp7wNg9Zd0y/TWQx8ZXog34c+VPbZO1kstvvWztuHEWVUGy6yWzmzjkwuIKfaXNsL5DBkgkds7PXko7tg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACcUcOXLK1kBE9tjfM4QIDjP7iLCgrATqC4n108dlHOAiAETDjOxpqo3REgOBn+9uqN5Y/h9sKDWNek+dZ9uPydwA=="}]},"maintainers":[{"name":"caktus","email":"calvin+npm@caktusgroup.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/responseless-0.1.0.tgz_1463500083883_0.4308306663297117"}},"0.2.0":{"name":"@caktus/responseless","version":"0.2.0","description":"A set of less mixins for easily dealing with responsive layouts consistently","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/caktus/responseless.git"},"keywords":["less","stylesheet","css","flexbox"],"author":{"name":"Calvin Spealman","email":"calvin@caktusgroup.com"},"license":"MIT","bugs":{"url":"https://github.com/caktus/responseless/issues"},"homepage":"https://github.com/caktus/responseless#readme","_id":"@caktus/responseless@0.2.0","_shasum":"d08267aa98e722642e19025565a5c86590f18616","_from":".","_npmVersion":"3.8.6","_nodeVersion":"4.2.4","_npmUser":{"name":"caktus","email":"calvin+npm@caktusgroup.com"},"dist":{"shasum":"d08267aa98e722642e19025565a5c86590f18616","tarball":"https://registry.npmjs.org/@caktus/responseless/-/responseless-0.2.0.tgz","integrity":"sha512-d89flNteWB6Umuesp9ECLC/62HLB3NfqQ730J/gZeQmsA6roAAPNPNZ3qN64Uvv2qVG5U0QflknzoEaN2VFYQg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNCp4E4LQEmVok1fwDVc5igxCk1qpzT7KA3tDCpYYEtgIhALYNL/ALPv2mFBEhUARqEbm9DxA7Pk4mV6lTLRHJg/pG"}]},"maintainers":[{"name":"caktus","email":"calvin+npm@caktusgroup.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/responseless-0.2.0.tgz_1463716255352_0.17256744182668626"}}},"readme":"# Responseless\n\nResponseless is a set of LESS mixins for working with responsive layouts.\n\nResponseless was created to deal with a common scenario web developers face: being handed a pair of\ndesigns for a website for mobile and desktop layouts. Often we get little information on the gulf\nbetween these two extremes. Just as often the \"mobile\" layout adheres to a single device, and does\nnot address the enormous variety of devices represented by \"Mobile\". The range of devices, between\nlarge 30 inch displays and 10 inch netbooks, which might need to support \"Desktop\" is also often\nunder appreciated at this stage.\n\n## Getting Started\n\nFirst, you'll want to install Responseless from NPM.\n\n    npm install responseless\n\nAnd you'll be able to import it in your project's LESS stylesheets.\n\n    @import (reference) \"../../../node_modules/@caktus/responseless/response.less\";\n\nBefore you use Responseless, you'll need to initialize the mixins by invoking the\n`setup-responseless()` mixin, which takes two parameters:\n\n- `max-mobile` The largest size supported for mobile or phone layouts\n- `max-page-width` The largest size the main content well for the desktop layout should expand to\n\nOnce initialize, all Responseless mixins will become available.\n\n## Layouts\n\n### Small Layout\n\nUp to the `@max-mobile` width we work with the Small Layout.\n\n### Full Layout\n\nAbove the `@min-desktop` width we work with the Full Layout.\n\n### Shim Layout\n\nThe gap above the `@max-mobile` but below the `@min-desktop` is called the *Shim*. This is the\nspace between the mobile and desktop mockups we often have to work with.\n\n## Mixins\n\n### `small(rules)`\n\nDefine a ruleset that applies only to the Small Layout\n\n### `shim(rules)`\n\nDefine a ruleset that applies only to the Shim Layout\n\n### `full(rules)`\n\nDefine a ruleset that applies only to the Full Layout\n\n### `not-full(rules)`\n\nDefine a ruleset that applies above the Small Layout, to both the Shim and Full Layouts.\n\n### `responsive(defaults, small, full)`\n\nThe power-horse mixin of Responseless:\n\n    responsive({\n        // Default style properties\n        // Applies to all layouts\n    }, {\n        // Small style properties\n        // Applies only to Small Layout\n        // Overrides defaults\n    }, {\n        // Full style properties\n        // Applies only to Full Layout\n        // Overrides defaults\n    });\n\nThe third ruleset, for Large Layout styles, can be omitted.\n\n### `shim-interpolate(property, from, to)`\n\nThis magical property will help with styles in the gap between Small and Full layouts. The\n`shim-interpolate()` mixin defines how a property can scale between the low and high ends of the\nShim. The `from` value will apply just above the largest Small Layout, while the `to` value will\napply just below the smallest Full Layout. Between these two sizes, the values will be\ninterpolated. You can use this to scale font sizes, letter spacing, or many other properties\nto allow a layout to gracefully cross this gap.\n\n    shim-interpolate(font-size, 10pt, 14pt);\n","maintainers":[{"name":"caktus","email":"calvin+npm@caktusgroup.com"}],"time":{"modified":"2022-06-12T15:37:15.383Z","created":"2016-05-17T15:48:06.510Z","0.1.0":"2016-05-17T15:48:06.510Z","0.2.0":"2016-05-20T03:50:57.862Z"},"homepage":"https://github.com/caktus/responseless#readme","keywords":["less","stylesheet","css","flexbox"],"repository":{"type":"git","url":"git+https://github.com/caktus/responseless.git"},"author":{"name":"Calvin Spealman","email":"calvin@caktusgroup.com"},"bugs":{"url":"https://github.com/caktus/responseless/issues"},"license":"MIT","readmeFilename":"README.md"}