{"_id":"@adapt-retail/banner-style","_rev":"5-e4c65bb809342558ee124d6090cb527a","name":"@adapt-retail/banner-style","description":"Core design features for web banners.","dist-tags":{"latest":"1.1.1"},"versions":{"0.0.1":{"name":"@adapt-retail/banner-style","version":"0.0.1","description":"Core design features for web banners.","main":"src/main.scss","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/AdaptRetail/banner-style.git"},"author":{"name":"Adapt Retail"},"license":"MIT","bugs":{"url":"https://github.com/AdaptRetail/banner-style/issues"},"homepage":"https://github.com/AdaptRetail/banner-style#readme","gitHead":"0f44480a200791bac654fd569b92c30c0db3b8f5","_id":"@adapt-retail/banner-style@0.0.1","_npmVersion":"5.3.0","_nodeVersion":"8.3.0","_npmUser":{"name":"lassehaslev","email":"lasse@haslev.no"},"dist":{"integrity":"sha512-DPfkA83xb0IQ2mdFtXdxdhK6fjZ27IQHa3MJsP/3gr+s8r16/EbcemcKoNlrgtMqaBhc9Wg9ulMK9LKm4gZ+6A==","shasum":"b3f29d4abacc43bd198b6a1773c881a00f3ef0bf","tarball":"https://registry.npmjs.org/@adapt-retail/banner-style/-/banner-style-0.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJy6MiBqIr1XEf8JkRhSgaqXqxx8ggmn0L2b9GVPLoYQIgAcI1FnhhMGdh7x7gYPHV+1ytI6Q+PaefT4QhY9u1lFg="}]},"maintainers":[{"name":"lassehaslev","email":"lasse@haslev.no"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/banner-style-0.0.1.tgz_1504345510288_0.030312743270769715"}},"1.0.0":{"name":"@adapt-retail/banner-style","version":"1.0.0","description":"Core design features for web banners.","main":"src/main.scss","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/AdaptRetail/banner-style.git"},"author":{"name":"Adapt Retail"},"license":"MIT","bugs":{"url":"https://github.com/AdaptRetail/banner-style/issues"},"homepage":"https://github.com/AdaptRetail/banner-style#readme","gitHead":"5a96c7515028ef00177b0cdde97b1314322c2d8c","_id":"@adapt-retail/banner-style@1.0.0","_npmVersion":"5.5.1","_nodeVersion":"8.4.0","_npmUser":{"name":"lassehaslev","email":"lasse@haslev.no"},"dist":{"integrity":"sha512-EcIVmKXNta4qYsjjQZDAWbjmroFXm/1GDAx4kOnlZrR+Heznkwl9jjZYcTA8KEi2LF2wvWjCEwjYNPX5ygF6kw==","shasum":"2aa5b036f589694c6f9a3bdbcdfb8c8f46ef71f7","tarball":"https://registry.npmjs.org/@adapt-retail/banner-style/-/banner-style-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbit9pLpZxcgpw8kP9cKJUkgiCCfazlCVO82H1k8DnSAiEA4F6fwWUZvTBMx1XGAl97h0ZVTsrDDUF0pCPWHkgp2Sg="}]},"maintainers":[{"email":"lasse@haslev.no","name":"lassehaslev"},{"email":"lasse.haslev@kodient.com","name":"adapt-retail-owner"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/banner-style-1.0.0.tgz_1509379624671_0.9781721085309982"}},"1.1.0":{"name":"@adapt-retail/banner-style","version":"1.1.0","description":"Core design features for web banners.","main":"src/main.scss","scripts":{"test":"ava","tdd":"executor 'npm run test' --watch='**/*' --ignore='node_modules/' --ignore='dist/'"},"repository":{"type":"git","url":"git+https://github.com/AdaptRetail/banner-style.git"},"author":{"name":"Adapt Retail"},"license":"MIT","bugs":{"url":"https://github.com/AdaptRetail/banner-style/issues"},"homepage":"https://github.com/AdaptRetail/banner-style#readme","devDependencies":{"@lassehaslev/executor":"^1.0.1","ava":"^0.24.0","node-sass":"^4.7.2"},"dependencies":{"sass-google-fonts":"^1.0.1"},"gitHead":"59f16058a8b913f5b1fe6ab68004a9faf89af8db","_id":"@adapt-retail/banner-style@1.1.0","_npmVersion":"5.4.1","_nodeVersion":"8.3.0","_npmUser":{"name":"lassehaslev","email":"lasse@haslev.no"},"dist":{"integrity":"sha512-Ad3Wi0MAUDHGToY8N0ZFhfRqJm5FKDw3jApN4AhNpU8dFxWDhaiW17xgQBIrhgcBFET1uX+djAvbuSHQr6caMg==","shasum":"4c0ed05cd7140599ce62db86a8ce9c8d0ed73efc","tarball":"https://registry.npmjs.org/@adapt-retail/banner-style/-/banner-style-1.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsZBYlg9vvwQuom+Qx9iHhCHydSpVMcqSf3Ep2oM/eGgIgWAbfCscg62H4aj52RdX7qfALwafNe53WDZ9J4AECP14="}]},"maintainers":[{"email":"lasse@haslev.no","name":"lassehaslev"},{"email":"lasse.haslev@kodient.com","name":"adapt-retail-owner"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/banner-style-1.1.0.tgz_1514359380231_0.7215292360633612"}},"1.1.1":{"name":"@adapt-retail/banner-style","version":"1.1.1","description":"Core design features for web banners.","main":"src/main.scss","scripts":{"test":"ava","tdd":"executor 'npm run test' --watch='**/*' --ignore='node_modules/' --ignore='dist/'"},"repository":{"type":"git","url":"git+https://github.com/AdaptRetail/banner-style.git"},"author":{"name":"Adapt Retail"},"license":"MIT","bugs":{"url":"https://github.com/AdaptRetail/banner-style/issues"},"homepage":"https://github.com/AdaptRetail/banner-style#readme","devDependencies":{"@lassehaslev/executor":"^1.0.1","ava":"^0.24.0","node-sass":"^4.7.2"},"dependencies":{"sass-google-fonts":"^1.0.1"},"ava":{"require":["./test/helpers/compile-sass.js"]},"gitHead":"ed7790f102468360a0fd225b2c8de8130e32193d","_id":"@adapt-retail/banner-style@1.1.1","_npmVersion":"5.4.1","_nodeVersion":"8.3.0","_npmUser":{"name":"lassehaslev","email":"lasse@haslev.no"},"dist":{"integrity":"sha512-iBx2xaoaktn9cRXs5/wHUskedSZ93Q2eznaeCFHy/+EuXBGvvt4typwsdTIjZpjfiiKSP/aIRn0i+aOnLJDbfA==","shasum":"66e96930a1708b32de2bcc7dcdfaf410a03bf856","tarball":"https://registry.npmjs.org/@adapt-retail/banner-style/-/banner-style-1.1.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWEA8BgoCW7Avfv38wdq705zALFLzC/+K/jThcD1N8iAiA+BY3BEvvZtAdZiXgcCPxsmHk5urceOxyR3lhq2qUvyg=="}]},"maintainers":[{"email":"lasse@haslev.no","name":"lassehaslev"},{"email":"lasse.haslev@kodient.com","name":"adapt-retail-owner"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/banner-style-1.1.1.tgz_1514364547815_0.04396931896917522"}}},"readme":"# @adapt-retail/banner-style [](https://travis-ci.org/AdaptRetail/banner-style)\n> Micro style framework for building banners. \n\nBanner helper is a micro `sass` framework for helping you out creating web banners.\n\nThe micro framework includes\n- Smart grid using `flexbox`.\n- [Bomb logic element](#bomb)\n\n## Quick install\n\n### NPM\n```bash\nnpm install @adapt-retail/banner-style\n```\n\n### YARN\n```bash\nyarn add @adapt-retail/banner-style\n```\n\n## Good starting point\nFor a good starting point of creating ads see the [Adapt banner template](https://github.com/AdaptRetail/banner-template).\n\n## Grid\n\nThe framework includes a micro grid system. To activate it, just add the `@include banner-grid` mixin where you want your grid to show.\n\n### Usage\n\nEach column will by default take equally space of the width\n\n```html\n
\n \n \n
\n```\n\nAdd `.is-vertical` to the grid if you want it to flow downwards.\n```html\n\n```\n\n### `.grid.is-vertical`\n\nChanges the flex direction of the grid to go top to bottom instead of left to right\n\n### `.grid.is-vcentered`\n\nPosition children based on center\n\n### `.grid.is-vbottom`\n\nPosition children from bottom to top\n\n### Special columns\n\nWe have a couple of special classes for columns. This is to help distribute the objects if you want it to fill the container or just use the space it needs.\n\n#### `.column.is-narrow`\n\nThe `.column.is-narrow` class does not take up any more space that the children needs.\n\n> Warning: Do not use anythings that calculates by the height of the column.\n> This is because calculating height need to have a set parent height.\n> This means that the `.is-narrow` parent and child will be in conflict.\n> Ignoring this will cause height flickering in some cases.\n\n#### `.column.is-filled`\n\nIf you use is narrow, and you need to have a child calculate 100% height, you should use `.is-cilled.`\n`.column.is-filled` is actually a `css` hack and will set the first child as height 100% of the container.\n\n> If not using this class you will have trouble filling the children height of 100%.\n\n```html\n
\n
\n
\n ... Your content ...\n
\n
\n
\n```\n\n## Clearfix\n\n`.clearfix` is another css hack, and helps setting the correct height of elements that uses `float` attibute.\n\nTo turn on clearfix include the `@include clearfix` mixin.\n\n## Mixins\n\nMixins contains css logics and this framework has som nice helpers for help you write DRY code.\n\n### Google fonts\n\nWe include the [sass-google-fonts](https://github.com/LasseHaslev/sass-google-fonts) to make it easy to get the google fonts.\n\n```scss\n@include google-font( 'Lobster' );\n```\n\n### Background\n\nIf you want to use a background image, this mixin is for you.\n\n```scss\n.background {\n\n @include background-image;\n // background-size: contain;\n // background-repeat: no-repeat;\n // background-position: center;\n\n @include background-image( red, bottom left, cover );\n // background: red;\n // background-size: cover;\n // background-repeat: no-repeat;\n // background-position: bottom left;\n\n}\n```\n\n\n### Bomb\n\nBomb mixin helps you create logic for centereing content inside a box.\n\n\n\n#### SASS\n```scss\n.bomb {\n @include bomb;\n background-color: red;\n border-radius: 50%;\n}\n\n// Create oval bomb\n.bomb {\n @include bomb( 50% );\n background-color: red;\n border-radius: 50%;\n}\n```\n\n#### HTML element\n```html\n