{"_id":"@braunstetter/rock","name":"@braunstetter/rock","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@braunstetter/rock","version":"1.0.0","description":"Assets for the rock.systems ecosystem. Reuse it everywhere.","main":"index.js","author":{"name":"Michael Brauner"},"license":"MIT","private":false,"devDependencies":{"lodash":"^4.17.21","postcss":"^8.3.5","postcss-import":"^14.1.0","postcss-mixins":"^9.0.3","postcss-simple-vars":"^6.0.3"},"gitHead":"5f223a61d665c0578ff885798ce9b31bc92c8c07","_id":"@braunstetter/rock@1.0.0","_nodeVersion":"18.6.0","_npmVersion":"8.13.2","dist":{"integrity":"sha512-CV6mf60bMG6SIQYqw26WFPHRUjHVAt3hO0Wm1cmLmNfX01aGFRs56BG6MJWiHqcWRlPp27kGkQgisgEKwXbrAw==","shasum":"5c42704c46320bbaf2cefc3975d196c0af3e48ec","tarball":"https://registry.npmjs.org/@braunstetter/rock/-/rock-1.0.0.tgz","fileCount":11,"unpackedSize":6258,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICd61Qm+iG/MjpEXDOvUG1cqsm5RzXrBO/tDb1YPpwaQAiBldTEuCgE0KQ/dGpOJGNJHi5ouKIx19uNxee3y4SQ3Dw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjAcKzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJeA/8CmMS6YiBd1WOqB1oFj3X8d7+xn/HZw7KNo1YAcEOFal88iJd\r\nqydtQoHhvUmS8BissOecv+9ahZZ9ZaD+oaVkslwtqvtWLKPbX7ZC2xQbk8DN\r\nDWSt2OHQSh0qNtfGdhIznHIOtz4R5Uhno1jR7hRgM/eW5DkgBv7FOhMcQGRp\r\nZQNSMYR/A67VCMnLCiOm65JCSQ2qfAcSGOvks+wfoWZbN/padwdOxT60s5iK\r\nS6/3PHkd3i5UeA2en2gqRJ8yUMR7VzGyTlqxdB0AtCmA71P+MVsR6EX7+wqB\r\ncyDBQWz3Ow7xjN2YaoFoSi3kdcwm71rAUGhFs6oGdSzjz3SroBOQ3q3+787S\r\nd4K6i4WJ6PvpvJB3DxMhwqO3qFwMjRkPuCgQ7xTtfJ2fKK7AomaTMCAYkQfD\r\na5EAY6TVLITu0KVHEEnBuj3YIIZ+P5FQM32N9GsqshTWibD0PmCBP2Il86p2\r\nDTVJ9/t5C13/ZrBhaIMJ99n9ih4Yorcq4KoNCoecTEf6pZnz7YOuZxxSZlRH\r\naAxEvcHUlwjnTQw/0MFlHMpV22toX6JTicsBNQjjibR+xYeuU6zDiiF5s24Y\r\nd7AeUV99ByfPo2nA+HL7xSE8fQT0LmgvmlH/+RZHIsxxqdZOrR7XiNU+WAS3\r\nnqMMk1+Es1Qb7jGXbMBe0iFelsW0txrDABw=\r\n=VIZm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"michael-brauner","email":"michaelbrauner82@gmail.com"},"directories":{},"maintainers":[{"name":"michael-brauner","email":"michaelbrauner82@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rock_1.0.0_1661059762812_0.9499287123194364"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-21T05:29:22.722Z","1.0.0":"2022-08-21T05:29:22.991Z","modified":"2022-08-21T05:29:23.174Z"},"maintainers":[{"name":"michael-brauner","email":"michaelbrauner82@gmail.com"}],"description":"Assets for the rock.systems ecosystem. Reuse it everywhere.","author":{"name":"Michael Brauner"},"license":"MIT","readme":"# Assets for the rock.systems ecosystem\n\nMake sure every bundle uses consistent assets.\n\n* [Installation](#installation)\n* [CSS](#css)\n  * [Mixins](#mixins)\n    * [Utilities](#utilities)\n      * [svg](#svg)\n      * [contains-svg](#contains-svg)\n      * [space](#space)\n    * [Components](#components)\n      * [Button](#button)\n  * [Variables](#variables)\n    * [Import Variables](#import-variables)\n\n## Installation\n\n```shell\nyarn add braunstetter/rock\n```\n\n## CSS\n\nWe are using the [postcss-mixins](https://github.com/postcss/postcss-mixins) library.\n\n### Mixins\n\nTo use our mixins you have to enable it first.\n\n```js\n\n// example configuration of postcss.config.js\nconst path = require(\"path\");\n\nmodule.exports = {\n    plugins: [\n        require('autoprefixer'),\n        require('postcss-mixins')({\n            mixinsFiles: path.join(__dirname, '/node_modules/@braunstetter/rock/js/mixins', '**/*.js')\n        }),\n        require('postcss-simple-vars'),\n        require('postcss-import'),\n        require('postcss-nested'),\n        require('cssnano')({\n            preset: 'default',\n        }),\n    ]\n}\n```\n\nAfterward you will be able to use the mixins:\n\n```css\n@mixin btn md;\n```\n\n#### Utilities\n\n##### svg\n\nSvg images are used quite often in modern UI components. So this utility mixin focuses on standardizing svg images.\n\n```css\nsvg {\n    @mixin svg md;\n}\n```\n\nAvailable sizes:\n\n**md**  \nheight: 1.25rem  \nwidth: 1.25rem\n\n##### contains-svg\n\nThis utility mixin mirrors the [svg mixin](#svg) - but you don't have to put it inside a `svg` css-selector.\n\n```css\n.my-container {\n    @mixin contains-svg md;\n}\n```\n\n##### space\n\nThis utility is controlling the space between child elements.\n\nYou can use all spacing [variables](#variables):\n\n```css\n/* 3 means it uses the $_3 variable */\n@mixin space x, 3;\n```\n\n> be aware - additionally, variables have to be [imported](#import-variables) before you can use them.\n\n#### Components\n\n##### Button\n\n```css\n/* parameter: size, color */\n@mixin btn md, primary;\n```\n\nAvailable sizes:\n**md**\n\nAvailable colors:\n**primary**\n\nIf you are using this component **without** the color parameter, no styling will be applied except for the padding and\nspacing of the `size` parameter:\n\n```css\n@mixin btn md;\n```\n\n### Variables\n\nWe are using the [`postcss-simple-vars`](https://github.com/postcss/postcss-simple-vars) plugin.\n\n#### Import variables\n\nBefore you can use the variables, you have to import them first into your css document:\n\n```css\n/* all variables available */\n@import \"@braunstetter/rock/css/variables.css\";\n\n/* just a subset */\n@import \"@braunstetter/rock/css/variables/color.css\";\n```\n\n\n\n\n\n\n\n","readmeFilename":"README.md"}