{"_id":"@akst.io/lost-config","_rev":"3-f31ffb15984656f586faaf5dd2fc1c11","name":"@akst.io/lost-config","description":"## About","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@akst.io/lost-config","version":"0.1.0","description":"## About","main":"./dist/src/index.js","author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","publishConfig":{"access":"public"},"devDependencies":{"babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-plugin-root-import":"^5.1.0","babel-plugin-syntax-flow":"^6.18.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-function-bind":"^6.22.0","babel-polyfill":"^6.23.0","babel-preset-env":"^1.3.2","babel-preset-es2016":"^6.22.0","babel-preset-stage-1":"^6.22.0","documentation":"^4.0.0-beta.18","eslint":"^3.19.0","eslint-config-standard":"^10.2.0","eslint-plugin-flowtype":"^2.30.4","eslint-plugin-import":"^2.2.0","eslint-plugin-jest":"^19.0.1","eslint-plugin-jsdoc":"^3.0.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","flow-bin":"0.49.1","flow-typed":"2.1.2","jest":"^19.0.2","npm-run-all":"^4.0.2"},"dependencies":{"postcss":"^6.0.13"},"gitHead":"eda269c4576ecda05e81916529e6c938fa547fe0","_id":"@akst.io/lost-config@0.1.0","scripts":{},"_shasum":"a8c6f95f717357253e9f93d81123c3c736e44b82","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.3","_npmUser":{"name":"akst","email":"aksthomsen@gmail.com"},"dist":{"shasum":"a8c6f95f717357253e9f93d81123c3c736e44b82","tarball":"https://registry.npmjs.org/@akst.io/lost-config/-/lost-config-0.1.0.tgz","integrity":"sha512-qK1pA6VN9I9AXQa4nZHY8Yp3BfLzRS9bHZyH4Z8+PegwJB8g2mZnrHrXY5qfPF8tzbLEEXEHixFaZpExBfJopw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1zhG4CHfmn1K7qkTX5/8Nuf+s5jO00mYJZkB9+1jBdAiBVXnBqgEP7tU2jTxHTnB958GXavGWCU+OC5+wnr+hTxg=="}]},"maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lost-config-0.1.0.tgz_1508134203751_0.5887587952893227"}},"0.1.1":{"name":"@akst.io/lost-config","version":"0.1.1","description":"## About","main":"./dist/src/index.js","author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","publishConfig":{"access":"public"},"devDependencies":{"babel-cli":"^6.24.0","babel-eslint":"^7.2.1","babel-plugin-root-import":"^5.1.0","babel-plugin-syntax-flow":"^6.18.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-flow-strip-types":"^6.22.0","babel-plugin-transform-function-bind":"^6.22.0","babel-polyfill":"^6.23.0","babel-preset-env":"^1.3.2","babel-preset-es2016":"^6.22.0","babel-preset-stage-1":"^6.22.0","documentation":"^4.0.0-beta.18","eslint":"^3.19.0","eslint-config-standard":"^10.2.0","eslint-plugin-flowtype":"^2.30.4","eslint-plugin-import":"^2.2.0","eslint-plugin-jest":"^19.0.1","eslint-plugin-jsdoc":"^3.0.0","eslint-plugin-node":"^4.2.2","eslint-plugin-promise":"^3.5.0","eslint-plugin-standard":"^3.0.1","flow-bin":"0.49.1","flow-typed":"2.1.2","jest":"^19.0.2","npm-run-all":"^4.0.2"},"dependencies":{"postcss":"^6.0.13"},"_id":"@akst.io/lost-config@0.1.1","scripts":{},"_shasum":"8d6b6119d0939edac8013b7dfa3bb09afa3d106e","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.11.3","_npmUser":{"name":"akst","email":"aksthomsen@gmail.com"},"dist":{"shasum":"8d6b6119d0939edac8013b7dfa3bb09afa3d106e","tarball":"https://registry.npmjs.org/@akst.io/lost-config/-/lost-config-0.1.1.tgz","integrity":"sha512-jyNAWPB6X2c5prBpkCXHKNAsGfhDypD9KB3ULN8vsKWhCKeWBVjZlvD28F9o2C7BQyR285PYaLV636ZeTe8zHg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsLqhx7BPcM5EL68GkhXcGs3BQcT3rJs4CVfyI2fkbLAiAfDsDtGn76W77yHlVfq3esvzCvlqECl0I5iMeLJCpNag=="}]},"maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lost-config-0.1.1.tgz_1508134213102_0.6508867396041751"}}},"readme":"# Lost Config\n\n## About\n\nThis is a [postCSS][PostCSS] plugin aims to reduce the over head for\nimplementing a responsive grid system where there are different gutter\nsizes for each break point in your application. It is intended to be used\nwith css modules of some kind, along with lost-grid and which ever postcss\nextension allows you to nest media query.\n\n## Installation\n\nI'm kinda assuming you have the post css extension above installed along\nwith post css,\n\n```\nyarn add @akst.io/lost-config\n```\n\nHowever you're specifying your postcss plugins do it in this order.\n\n```js\nconst plugins = [\n  CSSModules({}),\n  LostConfig({}),\n  Lost({}),\n  NestedMediaQuerys({}),\n];\n```\n\n## Usage\n\nSay you defined your config in some file.\n\n```css\n/* app/styles/grid.css */\n\n/* ignore the terrible breakpoints */\n@value config: config(\n  superScreen 50px \"only screen and (min-width: 1501px)\",\n  wideScreen 50px \"only screen and (min-width: 901px) and (max-width: 1500px)\",\n  stdScreen 50px \"only screen and (min-width: 601px) and (max-width: 900px)\",\n  tablet 30px \"only screen and (min-width: 376px) and (max-width: 600px)\",\n  phone 15px \"only screen and (max-width: 375px)\",\n);\n```\n\nAnd you want to import, so you do so and use it like this.\n\n```css\n@value grid: 'app/styles/grid';\n@value config as g from grid;\n\n.tile {\n  lost-config: to-lost(g superScreen 1/4 4);\n  lost-config: to-lost(g wideScreen 1/3 3);\n  lost-config: to-lost(g stdScreen 1/2 2);\n  lost-config: to-lost(g tablet 1/1 1);\n  lost-config: to-lost(g phone 1/1 1);\n}\n```\n\nYou end up with this (which of course needs to be passed through another css post processor.\n\n```css\n\n.tile {\n  @media only screen and (min-width: 1501px) {\n    lost-column: 1/4 4 50px;\n  }\n  @media only screen and (min-width: 901px) and (max-width: 1500px) {\n    lost-column: 1/3 3 50px;\n  }\n  @media only screen and (min-width: 601px) and (max-width: 900px) {\n    lost-column: 1/2 2 50px;\n  }\n  @media only screen and (min-width: 376px) and (max-width: 600px) {\n    lost-column: 1/1 1 30px;\n  }\n  @media only screen and (max-width: 375px) {\n    lost-column: 1/1 1 15px;\n  }\n}\n```\n\nThe alternative to this is, importing your gutter values with your\nmedia query values indivisually into every place that uses the grid\nsystem. We were doing that at our work place originally and someone\ncalled in a tyre fire.\n\n## Contributing\n\nI'm down with anyone contributing, try creating an issue first if\nyou have a feature idea or find a bug, just so I can track somewhere.\nThe only really thing I expect of contributed changes is that they're\nrun against the type checker, linter, and tests. You can do that by\nrunning\n\n```\nmake ci\n```\n\nIf you have [watchman][watchman] installed, just run this for repeated\ntests in the background.\n\n```\nmake watch\n```\n\nYou'll also want to install [Flow][Flow].\n\n\n[Flow]: https://flow.org\n[watchman]: https://facebook.github.io/watchman/\n[PostCSS]: http://postcss.org\n","maintainers":[{"name":"akst","email":"aksthomsen@gmail.com"}],"time":{"modified":"2022-06-12T14:27:16.255Z","created":"2017-10-16T06:10:03.847Z","0.1.0":"2017-10-16T06:10:03.847Z","0.1.1":"2017-10-16T06:10:13.181Z"},"author":{"name":"Angus Thomsen","email":"hmu@akst.io"},"license":"MIT","readmeFilename":"README.md"}