{"_id":"@lostmyname/chameleon-sass","_rev":"28-51b2030c484836326e65aad833b87a03","name":"@lostmyname/chameleon-sass","dist-tags":{"latest":"0.8.0"},"versions":{"0.8.0":{"name":"@lostmyname/chameleon-sass","version":"0.8.0","description":"A styleless Sass framework for responsive user interfaces","repository":{"type":"git","url":"git://github.com/Lostmyname/chameleon-sass.git"},"keywords":["sass","css","responsive","oocss","framework"],"contributors":[{"name":"Daniel John Grant"}],"license":"MIT","bugs":{"url":"https://github.com/Lostmyname/chameleon-sass/issues"},"homepage":"https://github.com/Lostmyname/chameleon-sass#readme","main":"index.js","directories":{"doc":"docs"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","gitHead":"f0a1e29f4240613e179ca64d10d7f35409c64487","_id":"@lostmyname/chameleon-sass@0.8.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"k3ypad","email":"ben@tfa.ie"},"dist":{"integrity":"sha512-Gbhs9pxrBA3e90kHsTTwKsFj/GSXjX9L4aJbjjtEYfkbe0BUVU2x9CCRT7lDQKnJyv1AX0Jhd6h3ByXD4uplwg==","shasum":"3e72daf89ca7facbbe00dca1cbaaf55d91bb30fe","tarball":"https://registry.npmjs.org/@lostmyname/chameleon-sass/-/chameleon-sass-0.8.0.tgz","fileCount":48,"unpackedSize":38236,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD15gUiWYtt+hCo+h1jLmQxqr1LzlGIXFJav7Nbf5BYzgIgBMUPE68Ni5L5ZtjEsI1caUwpTz8ao+lF18W8OyvDA60="}]},"maintainers":[{"name":"atomburger","email":"jonathan@wonderbly.com"},{"name":"fulljames","email":"stephen@fulljames.net"},{"name":"gg-ch","email":"giorgia@wonderbly.com"},{"name":"hraban","email":"hraban@0brg.net"},{"name":"k3ypad","email":"ben@tfa.ie"},{"name":"pavdjian","email":"peter@wonderbly.com"},{"name":"rifke","email":"hello@rifke.co.uk"},{"name":"robw","email":"robert@watts.org"},{"name":"vannio","email":"noreply@vann.io"},{"name":"yotamlaufer","email":"ubermutt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-sass_0.8.0_1521033268559_0.9349634445574886"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-14T13:14:28.473Z","0.8.0":"2018-03-14T13:14:28.620Z","modified":"2023-10-12T14:48:26.341Z"},"maintainers":[{"email":"lars@wonderbly.com","name":"lars_wonderbly"},{"email":"npmdev@wonderbly.com","name":"wonderbly-eng"},{"email":"ubermutt@gmail.com","name":"yotamlaufer"},{"email":"robert@watts.org","name":"robw"},{"email":"stephen@fulljames.net","name":"fulljames"},{"email":"gareth@wonderbly.com","name":"garethweaverwonderbly"},{"email":"celine.bourillot@gmail.com","name":"celinebourillot"},{"email":"emmapalo@gmail.com","name":"aimypalo"}],"description":"A styleless Sass framework for responsive user interfaces","homepage":"https://github.com/Lostmyname/chameleon-sass#readme","keywords":["sass","css","responsive","oocss","framework"],"repository":{"type":"git","url":"git://github.com/Lostmyname/chameleon-sass.git"},"contributors":[{"name":"Daniel John Grant"}],"bugs":{"url":"https://github.com/Lostmyname/chameleon-sass/issues"},"license":"MIT","readme":"# Chameleon\n\nChameleon is a Sass layout framework for responsive web sites and applications.\n\nAt the heart of Chameleon is the ability to \"turn on\" classes at different screen sizes:\n\n```html\n<div class=\"padded padded-small-on-mobile\"></div>\n```\n\nOut of the box Chameleon adds 0Kb to your project. Generate only the classes that you need for your project.\n\n```scss\n@include classes('padded', $on: 'base');\n@include classes('padded-right', $on: 'base mobile');\n```\n\n```\n.padded {\n  padding: 20px;\n}\n\n.padded-right {\n  padding-right: 20px;\n}\n\n@media screen and (max-width: 479px) {\n  .padded-right-on-mobile {\n    padding-right: 20px;\n  }\n}\n```\n\nChameleon selectors be used anywhere in your stylesheet  - even if they weren't generated into classes.\n\n```scss\n.myModule {\n  @extend %padded;\n  @extend %padded-small-on-mobile;\n  @extend %padded-on-tablet;\n  border: 3px dashed red;\n}\n```\n\nYou can also create selectors of your own using Chameleon's core mixins.\n\n```scss\n@include placeholders('myHelper') {\n  color: red;\n}\n@include classes('myHelper', $on: 'base mobile tablet-up');\n```\n\nMulti-element modifiers provide a powerful, concise and expressive way to compose modules.\n\n```html\n<div class=\"row cols-spaced cols-to-rows-on-mobile\">\n  <div class=\"col-1-3\"></div>\n  <div class=\"col-1-3\"></div>\n  <div class=\"col-1-3\"></div>\n</div>\n```\n","readmeFilename":"README.md"}