{"_id":"@adaptagency/fe_tools","_rev":"42-d6bcb6c5ee8d71f5978c8968ba5a5367","time":{"created":"2022-04-29T11:54:54.083Z","1.0.0":"2018-04-05T11:15:56.102Z","modified":"2022-05-09T08:01:03.403Z","1.0.1":"2018-04-05T11:53:53.615Z","1.0.2":"2018-04-05T14:36:03.868Z","1.0.3":"2018-04-13T09:59:00.231Z","1.0.4":"2018-04-13T12:09:26.949Z","1.0.5":"2018-04-13T12:23:47.287Z","1.1.0":"2018-05-30T15:40:31.741Z","1.1.1":"2018-07-03T13:14:51.763Z","1.1.2":"2018-07-03T13:53:37.998Z","1.1.3":"2018-07-03T14:13:03.606Z","1.1.4":"2018-07-03T14:45:59.657Z","1.1.5":"2018-07-06T14:14:20.669Z","1.1.6":"2018-07-09T07:44:56.913Z","1.1.7":"2018-07-09T07:57:24.946Z","1.1.8":"2018-07-09T08:02:13.942Z","1.1.9":"2018-07-09T12:29:44.604Z","1.1.11":"2018-08-22T14:27:43.452Z","1.1.12":"2018-08-22T14:29:05.984Z","1.1.14":"2018-08-23T11:21:35.933Z","1.1.18":"2018-08-23T12:32:24.458Z","1.1.20":"2018-08-23T12:34:19.916Z","1.1.22":"2018-08-23T14:01:38.123Z","1.2.0":"2018-08-23T14:04:18.026Z","1.2.4":"2018-08-29T12:06:29.485Z","1.5.0":"2018-10-12T12:54:52.931Z","1.6.0":"2018-10-12T12:55:43.975Z","1.6.1":"2018-10-12T13:07:50.255Z","1.6.2":"2018-10-12T13:09:41.391Z","1.6.4":"2018-11-09T10:44:34.547Z","1.6.5":"2022-04-29T11:54:54.269Z"},"name":"@adaptagency/fe_tools","dist-tags":{"latest":"1.6.5"},"versions":{"1.6.5":{"name":"@adaptagency/fe_tools","version":"1.6.5","description":"Adapt Frontend Development Tools","author":{"name":"Adapt"},"main":"main.js","license":"ISC","scripts":{"release":"release-it -n","release-minor":"release-it minor -n","release-major":"release-it major -n"},"devDependencies":{"release-it":"^7.5.1"},"keywords":["Sass","Javascript","Utilities","Mixins","Scss","Adapt","Adapt Agency","Adapt DK","Frontend","Sass Functions","Inner","Responsive Typography","Multiplier","SASS Functions","Multiplier","Root Modifier","Debounce","Throttle"],"repository":{"type":"git","url":"git+https://github.com/adaptdk/fe_tools.git"},"bugs":{"url":"https://github.com/adaptdk/fe_tools/issues"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"homepage":"https://github.com/adaptdk/fe_tools#readme","gitHead":"49759276319e475847e8e2a4aa868291e124b3ff","_id":"@adaptagency/fe_tools@1.6.5","_nodeVersion":"16.14.2","_npmVersion":"8.7.0","dist":{"integrity":"sha512-KVBD70L1bmwuY1N0BzNWD72CuvXQHnlzljtwuX1hXaUT61dvX/eXQpaYVEKygIAd91QYs8kRUvwaBySCi5kotQ==","shasum":"2bf94393e43bff726833fa81ad71a4ecf31dd60a","tarball":"https://registry.npmjs.org/@adaptagency/fe_tools/-/fe_tools-1.6.5.tgz","fileCount":23,"unpackedSize":20342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClqxgH36M0oXZtLKXMoBLE/1orIUPXQZnRO7WuyAfUmwIgaLy9Y7qvbGILP2SngxNA/iJXygTiRuHlRsDLypua1Jw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia9IOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHLA/+K0FAeiyfrxyf3O9DUOQJrg+BCDGnUU6Mkt24HZImg/zp+++O\r\nKhJbwqTlgTw6OCqlxmQaDx/xoL65kcgB/V6OOWWtQfb1rXqDj2ns6TygnDFE\r\n8g2bsLl8Z1XhPyW/NSc9yxCAKwgtW52reMmY5t/2aLd9abVluTULbE+Tv7DM\r\nh7pfRTGUCXwKr+t6UEKgZvuw18znkbtUjOkjRpRCOZdhBPgZzjcjBHrdejs3\r\nWLH32k6qHGDbQVYcpoFWtcOpHAUA0wV5+ybII2PUUR1n+ajdu6wtnR6pz9ue\r\n6eNFO54mHlWRBfQI28BhOzKHSgI/lxG5Zl8Ks6553G/C1BUgL+xBdW+0h/Do\r\nUzZora6CdaVOGkUr0JLTNRqV7h9mnY5PsjkP33WSbDJJb1qinQ+AlDl4qyzI\r\ndNYgRzK+vPhuo9k9fx7Z3Gj/yo9k27SZgL6Tfdpz9LIXTYil7SjRog80IE8m\r\np+hufd2E4uYV2oPnzy0pgqCghYOeGXubrAjNgo9COJlP0LK8uGKk2zr99myD\r\nowBC6029uTiTYK23dMDJdvrf0Cy8PeY3tb7HCwOTcw3sFDBJOFmQz7u+fwHB\r\negOjDQIIkualRaq/3zmabqCqJKOeeFMXeHJnYlKmcfh8VHfG8ESVbzu6y2ob\r\nX7zdcsEOkak85aNhBB04sA24qULeQ9NAojU=\r\n=OAxM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"adaptdk","email":"service@adapt.dk"},"directories":{},"maintainers":[{"name":"karolis-adapt","email":"karolis@adapt.dk"},{"name":"adaptdk","email":"service@adapt.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe_tools_1.6.5_1651233294137_0.7347622086721148"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"maintainers":[{"email":"frederik.nygaard@adaptagency.com","name":"frederiknygaardadapt"},{"email":"karolis@adapt.dk","name":"karolis-adapt"},{"email":"service@adapt.dk","name":"adaptdk"}],"description":"Adapt Frontend Development Tools","homepage":"https://github.com/adaptdk/fe_tools#readme","keywords":["Sass","Javascript","Utilities","Mixins","Scss","Adapt","Adapt Agency","Adapt DK","Frontend","Sass Functions","Inner","Responsive Typography","Multiplier","SASS Functions","Multiplier","Root Modifier","Debounce","Throttle"],"repository":{"type":"git","url":"git+https://github.com/adaptdk/fe_tools.git"},"author":{"name":"Adapt"},"bugs":{"url":"https://github.com/adaptdk/fe_tools/issues"},"license":"ISC","readme":"# Frontend Tools - Adapt Agency\n[![npm version](https://badge.fury.io/js/%40adaptagency%2Ffe_tools.svg)](https://badge.fury.io/js/%40adaptagency%2Ffe_tools)\n\n## 💡 What is it?\nfe_tools is a utility collection made to make development more easy and effecient.\nIt include some common mixins, sass functions and js functions which easily is used on every project.\n\n\n## 📖 Overview\n\n* [Setup](https://github.com/adaptdk/fe_tools#-setup)\n* [Documentation](https://github.com/adaptdk/fe_tools#-documentation)\n  * **SCSS**\n    * [Inner](https://github.com/adaptdk/fe_tools#inner-max-width)\n    * [rootModifier](https://github.com/adaptdk/fe_tools#rootmodifier) *Deprecation*\n    * [respTypo - Responsive Typography](https://github.com/adaptdk/fe_tools#resptypo-responsive-typography)\n* [Development](https://github.com/adaptdk/fe_tools#-development)\n\n## 🛠 Setup\n* Add node module to your package.json\n```console\nyarn add -D @adaptagency/fe_tools\n```\n\n### SCSS\nInclude the adapt-mixins mixin file in your main.scss file\n```scss\n// With tilde importer\n@import \"~@adaptagency/fe_tools/main\";\n\n// Regular\n@import \"node_modules/@adaptagency/fe_tools/main\";\n```\n\n### Javascript\nAssuming you're using a compiler like babel, you can impor the main.js like the following\n```js\n// ES6\n// Importing everything\nimport ft from '@adaptagency/fe_tools';\n\n// Importing individual function\nimport { onKeyPress } from '@adaptagency/fe_tools';\n\n// ES5 >=\nvar ft = require('@adaptagency/fe_tools');     // Importing everything\n```\n\n## 🗂 Documentation\n### JS\n---\n### onKeyPress\nExecute the function if the key is pressed\n```js\n/**\n * Execute the function if the key is pressed\n * @param   {number}   key        The key that should be pressed for the function to be executed\n * @param   {function} func       The function that should be executed\n * @returns {function}            The exectued function\n */\n```\n\n\n### SCSS\n---\n### Inner (Max-Width)\nA mixin for centering, and setting max-width and padding dynamically, changable by breakpoints.\n\n#### Params\n```js\n/**\n * A mixin for centering, and setting max-width and padding dynamically, changable by breakpoints.\n * @param {string} $padding - The padding in pixels - 20px\n * @param {number} [$maxWidth] - The max-width property in pixels - 900px\n * @param {number} [$breakpoint] - When the (min-width: breakpoint) should apply, in pixels - 1024px\n */\n\n@params (\n  $padding $maxWidth,\n  $padding $breakpoint $maxWidth // Recursive\n)\n```\n\n#### Examples\n##### Example 1\n**Input (SCSS)**\n```scss\n.h1 {\n  @include inner(20px 900px);\n}\n```\n\n**Output (CSS)**\n```scss\n.h1 {\n  max-width: 900px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: 20px;\n  padding-right: 20px;\n}\n```\n\n##### Example 2\n**Input (SCSS)**\n```scss\n.h1 {\n  @include inner(10px 600px, 20px 900px, null 1200px 900px);\n}\n```\n\n**Output (CSS)**\n```scss\n.h1 {\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: 10px;\n  padding-right: 10px;\n\n  @media (min-width: 900px) {\n    padding-left: 20px;\n    padding-right: 20px;\n  }\n\n  @media (min-width: 1200px) {\n    max-width: 900px;\n  }\n}\n```\n\n---\n\n### Root Modifier (rootModifier)\nA mixin for appending a string to the first selector. Useful if you're using BEM modifier on root level of your selector.\n\n**If you're using BEM then you can just save the & in a variable.***\n```scss\n.lol {\n  $root: &;\n  .selector {\n    #{&root}--lol & {\n      ...styling\n    }\n  }\n}\n```\n\n#### Params\n```js\n/**\n * A mixin for appending a string to the first selector. Useful if you're using BEM modifier on root level of your selector.\n * @param {string} $stringToAppend - The string which will be added to the first selector in the selector.\n */\n\n@params (\n  $stringToAppend\n)\n```\n\n#### Examples\n##### Example 1\n**Input (SCSS)**\n```scss\n.lol {\n  .mort {\n    @include rootModifier('de') {\n      ...styling\n    }\n  {\n}\n```\n\n**Output (CSS)**\n```scss\n.lolde .mort {\n  ...styling\n}\n```\n\n##### Example 2\n**Input (SCSS)**\n```scss\n.lol {\n  & &de {\n    &mort {\n      @include rootModifier('de') {\n        ...styling\n      }\n    }\n  {\n}\n```\n\n**Output (CSS)**\n```scss\n.lol .loldemort {\n  ...styling\n}\n```\n\n##### Example 3\n**Input (SCSS)**\n```scss\n.block {\n  // The extra \"&\" is important, because we need the first selector to exist isolated.\n  & &__element {\n    .block {\n      &__element {\n        @include rootModifier('--myModifier') {\n          ...styling\n        }\n      }\n    }\n  }\n}\n```\n\n**Output (CSS)**\n```scss\n.block--myModifier .block__element .block__element {\n  ...styling\n}\n```\n\n### Responsive Typography (RespTypo)\nPlace the mixin in the root of the scss file, out of a selector in your base typography scss file\n\n#### Params\n```js\n/**\n * Place the mixin in the root of the scss file, out of a selector in your base typography scss file\n * @param {object} $typoSize - A SCSS map of the sizes\n */\n\n/**\n * variable: $typoSize Params\n * @param {string} $selector - The Selector\n * @param {number} $fontSize - The fontsize in pixels for that breakpoint.\n * @param {number} [$breakpoint] - When the (min-width: breakpoint) should apply, in pixels - 1024px\n */\n\n@params (\n  $typoSize: (\n    $selector:\n      $fontSize, // The first does not accept breakpoint, because it's not wrapped in a media query\n\n      $fontSize, // Recursive\n      // If a custom breakpoint is not entered, take the default breakpoint.\n\n      ($fontSize, $breakpoint) // Recursive\n      // If a custom breakpoint is entered, then your need to wrap $fontSize and $breakpoint in parenthesis ()\n  )\n)\n```\n\n#### Default Params\n```scss\n// Breakpoint\n$breakpoint: (410px, 700px, 1200px);\n```\n\n#### Params Example\n```scss\n$typoSize: (\n  p: (1rem, 1.2rem),\n  h1: (2.4rem, (2.6rem 500px),\n  h2: (2.2rem, 2.1rem),\n)\n```\n\n#### Examples\n##### Example 1\n**Input (SCSS)**\n```scss\n$typoSize: (\n  h1: (2.8rem, 3rem),\n  h2: (2.2rem, (2.4rem 900px), 2.6rem), // Custom Breakpoint for the second param\n  h3: (1.9rem, 2.1rem),\n  h4: (1.6rem, 1.8rem, (2.1rem 1260px)), // Added third property with custom breakpoint as well\n  h5: (1.3rem, 1.6rem),\n  h6: (1.1rem, 1.2rem, 1.5rem), // Added third property using default breakpoint param\n);\n\n@include respTypo($typoSize);\n```\n\n**Output (CSS)**\n```scss\nh1 {\n  font-size: 2.8rem;\n\n  @media (min-width: 410px) {\n    font-size: 3rem;\n  }\n}\n\nh2 {\n  font-size: 2.2rem;\n\n  @media (min-width: 410px) {\n    font-size: 2.4rem;\n  }\n\n  @media (min-width: 900px) {\n    font-size: 2.6rem;\n  }\n}\n\n// etc..\n```\n\n## ⛑ Development\nIf you're an maintainer of the NPM module you can update fe_tools by running the following script.\n### If you don't have auth/OTP on your NPM account.\n```bash\n# Patches\nyarn release\n\n# Minor Changes (New Features)\nyarn release-minor\n\n# Major Changes (Complete Rewrite/Compatibility Breaking)\nyarn release-major\n```\n\n### If you do have auth/OTP on your NPM account.\n```bash\nyarn release --npm.otp=yourAuthKey\n```\n\nRead more about release-it here: https://github.com/webpro/release-it/\n","readmeFilename":"README.md"}