{"_id":"@carano-uiux/css-fx-layout","_rev":"4-8c76f94d8af53e85d01c801ee165cd5c","name":"@carano-uiux/css-fx-layout","dist-tags":{"latest":"3.0.6"},"versions":{"3.0.3":{"name":"@carano-uiux/css-fx-layout","version":"3.0.3","description":"Fork of original Library. A lightweight SCSS flexbox library inspired by Angular Flex-Layout.","scripts":{"test":"jest","test:watch":"jest --watch","test:ci":"jest --reporters=\"default\" --reporters=\"jest-junit\"","testbuild":"node testbuild.js"},"author":{"name":"Carano Software Solutions GmbH / Philip Dakowitz"},"license":"MIT","exports":{".":{"sass":"./_index.scss"}},"devDependencies":{"glob":"^8.1.0","jest":"^29.4.3","jest-environment-node-single-context":"^29.0.0","jest-junit":"^15.0.0","sass":"^1.58.1","sass-true":"^7.0.0"},"gitHead":"8875ebe1fb424b8d5b2e139acb0bc66897c1859f","_id":"@carano-uiux/css-fx-layout@3.0.3","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-R5GWaWlrqiY4TmkHZHG13jIF132zN7NPyuxUxrQ3G1umrt5JulfZXl+AY9OJWumPlAcBFoBNUJNGE2UECzL68w==","shasum":"64778c208b918f5f060ca98848521a7ded9b6bf8","tarball":"https://registry.npmjs.org/@carano-uiux/css-fx-layout/-/css-fx-layout-3.0.3.tgz","fileCount":22,"unpackedSize":47135,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjMVTn5dZMS/Yk+HJu2ZefvilVBp631liaTyGNwOz5UAiA4kUEgJwRGvV+yZ1isZ4QcHR3WfFqrD21V+kGgzLxWqw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGa8zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv5Q/9HGh5MNvwgXVK/XPbmEZjjuTxisXrSV0zeP2FhCG40al8Bdnq\r\n6O5AHv3T3kJza/Nl/+DpCpzPEGPSxxLbgcgcXcmfZqujzy+swf2OxyqLVQEY\r\nC6YJX2BSfihR/hxhtbjjsLwWm0kdvtLzZrW3Iz6o19FaZd+cBUAeZ2AjSnAS\r\nTryEe5+ojvRpN0kjq61zbEyIHIpqV1yEXYtQL+kotRSZb2D2BaDL5CKKhnoH\r\nf534hyQQQH8JezA+hxRuwPH1h1DTc0eurE3L1NGlX0ad4pos33UKcqmx6NdU\r\nqV1i/oPWvHgxzQHRSgBUq48S1ygY6d6wKt+BaI5CBKUiy8q33hme5xgLYRVH\r\niDN917qM2z1RQ4G5Sk+kzAr5YcFGIZled/9hsDZS+IgZvrCqkNePR/OCLFB4\r\n6l8fRYJpYSyn1elne5o0t5x41AM5ieThQav3Ilj1SVIWl8quTkIhshMJY49p\r\nHDF5b4/ydxKmLCCa3e5sqtO6PnZ0qQv7OApMPcImJ5uvXfPbGjWueLNFDUua\r\nQnAQ3Wp5OuIYsIywmelvT0Ly2FBNOhoZC2RinAeIRcVjTFpexYgIqRqg/cEP\r\nt90PjuHsBwmhuyeY5wTsiTeA12xQBTL0ejLdoHp9RU8Dgp5BJnooTFxakGqQ\r\n1g9Nd5czxEftse33wKqMbrM2swMpykGVuCc=\r\n=SL4p\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"rwenzel","email":"robin.wenzel@carano.de"},"directories":{},"maintainers":[{"name":"phillip_fiala","email":"phillip.fiala@carano.de"},{"name":"jfmcarano","email":"jan-friedrich.mallis@carano.de"},{"name":"nevo-nives-nevo","email":"nives.boni@carano.de"},{"name":"rwenzel","email":"robin.wenzel@carano.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-fx-layout_3.0.3_1679404851063_0.5687492710297475"},"_hasShrinkwrap":false},"3.0.4":{"name":"@carano-uiux/css-fx-layout","version":"3.0.4","description":"Fork of original Library. A lightweight SCSS flexbox library inspired by Angular Flex-Layout.","scripts":{"test":"jest","test:watch":"jest --watch","test:ci":"jest --reporters=\"default\" --reporters=\"jest-junit\"","testbuild":"node testbuild.js"},"author":{"name":"Carano Software Solutions GmbH / Philip Dakowitz"},"license":"MIT","exports":{".":{"sass":"./_index.scss"}},"devDependencies":{"glob":"^8.1.0","jest":"^29.4.3","jest-environment-node-single-context":"^29.0.0","jest-junit":"^15.0.0","sass":"^1.58.1","sass-true":"^7.0.0"},"gitHead":"c65574e6510eba09450c6fe9387586cf9f4f93b7","_id":"@carano-uiux/css-fx-layout@3.0.4","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-9IYQX+Arm89UotXcaYQyYX7KKXICa2yai3zTTD3/3GZcktQ7g907ST0jBwIoZcn08EnfB9xp0PxpkOu9FhclPg==","shasum":"75d702baffbfa4c5b9757e4339807a321a4780ff","tarball":"https://registry.npmjs.org/@carano-uiux/css-fx-layout/-/css-fx-layout-3.0.4.tgz","fileCount":22,"unpackedSize":47885,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkm9PCGS4VPrXN83fbJBxg3nYSooYAHLm25zVdnoSELAiEAlvCntoZna+zijDSdhnBvepIld8Ee9LFsJz7UegIm4mQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGbqKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplrQ/8Cy7Ghz1IX6KtimhImWFuoiJu1cT+g0OVizHlxhdHwot/5WdY\r\ngoXkbmmAsIyqgTJeCcViDNJNmDOYxKstJ2SUNyOB9pw5gH31r+pK9elHNqmE\r\nY897dxX1m5xsRnerCyd/Mm53jeagiJR247T97V8PQ1ZzopReK3C8qut2+cMV\r\nVWVZsyyp6vJJDBV/LRdYr5pyMd9uzay9YDLBu/MtxWr73j089Um/EVdgcwVE\r\nQTERFET2OIv1D7yMwf62GVb0oYL1ovtufspCovtus8dH5+N8XRe3yQ4fY+Xl\r\nf1IzQR2hPolYkWF9ft2Oh6ch0kMmAD0DPzZY8jTG2RGBM0KTGkruUITpIVaY\r\nMvXpWQLh+suqQjlthv2661QAmF/6uQJ0PZSuAhc3OTnMnqj1nvUgxhwxwAnV\r\nME54swUzpX8HOA1UMd/cxvtshrakqF4BS+tohfI1JU+H02QHbAE3EJx0XW51\r\n8dbtC5ipIGu0gbqMp5iPf2KuniG33FapC8Bb1Fii11tcrTa92PBYjFnr/O2e\r\nKpQMNYGxlnWxiUR7KZOpaIQrxwVKyh+MTCG0qXtFzVoiFtzVfVBddoa6Jmv8\r\nTALdcDayJFzPYzVMHksBcvCKD32B6AB8qouAG7ICIvgfa3RD/uGcXawmXMQs\r\nJ2TjXcj9sOE5OwExmWlBnSPPwnEeP5mZaxU=\r\n=ct/g\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"rwenzel","email":"robin.wenzel@carano.de"},"directories":{},"maintainers":[{"name":"phillip_fiala","email":"phillip.fiala@carano.de"},{"name":"jfmcarano","email":"jan-friedrich.mallis@carano.de"},{"name":"nevo-nives-nevo","email":"nives.boni@carano.de"},{"name":"rwenzel","email":"robin.wenzel@carano.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-fx-layout_3.0.4_1679407754640_0.022326137472749474"},"_hasShrinkwrap":false},"3.0.5":{"name":"@carano-uiux/css-fx-layout","version":"3.0.5","description":"Fork of original Library. A lightweight SCSS flexbox library inspired by Angular Flex-Layout.","scripts":{"test":"jest","test:watch":"jest --watch","test:ci":"jest --reporters=\"default\" --reporters=\"jest-junit\"","testbuild":"node testbuild.js"},"author":{"name":"Carano Software Solutions GmbH / Philip Dakowitz"},"license":"MIT","exports":{".":{"sass":"./_index.scss"}},"devDependencies":{"glob":"^8.1.0","jest":"^29.4.3","jest-environment-node-single-context":"^29.0.0","jest-junit":"^15.0.0","sass":"^1.58.1","sass-true":"^7.0.0"},"gitHead":"ffb4b5055ba0b90afbc9e8ee05467d408813d2c4","_id":"@carano-uiux/css-fx-layout@3.0.5","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-GrM01ax3tcXSum/+pKdEmJ/AIbBt/I2X4OHkEwtgRa8J1l3lcV4u94iGtKOV4IWDmnKWN7oRnrtAGTTAwOw9Ug==","shasum":"87578338d2b2a1e02cc9f446008fc6a8a6f6cd5a","tarball":"https://registry.npmjs.org/@carano-uiux/css-fx-layout/-/css-fx-layout-3.0.5.tgz","fileCount":22,"unpackedSize":49658,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXCTNSh3nWMdTmMR3ms4Mp6cnAz1/HrmelfIod8qgzEgIhAIfcLCvb+HjP3NUM+zT2N5RyMkzthFiMYo1Zp+YHLsDn"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGc68ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3WxAAjXfaJYO/9Sd0ur6DgugxH6wqbJV98kn0pAHSaXmsQwRhLOwP\r\nPuYCJrRrOn7de2Tk/E6NhxctPE/WbT/4vxBc1qwtpYwLrL/pO7DIu5fr/xv+\r\nkGhLFiNt0sHsMn8hOOneJJC1Hc/ZyEUNXpBwqal/rpOch5BJTRvwWz3Ylf0t\r\nDpHRT+c7owskf1xnViDMH2pkUoIcO2/xjwUK2VUv2ZCCoEjxjiVrqUIbzHl/\r\nqJtYvoHAFbPkBDMMNMI8Gm0I3RbKZujEiP4oWJfA668K23b6dK11dVe2ylWf\r\nIellyzIXCTgPr7KTQ2djlGaqnBzuCNb9yyof/dnH3yLozMWM+t5mVsaUS9Vt\r\nQyN3TA+e7lQZ0u/7cupx+cNFY+F7CRM9pCuU0nOSMPATb/aQ2JjcUJoafvqz\r\nNceXkwkWgUaiOeGvJsgs0sqVyLMLRxx9hhj+rv1jjuWTa/Vq5wjPCFpuvwVW\r\nkvdiZrEOOJfb7OKEkbIzY3XHiK9HdyT1v1IbgAGCX4kwMqpNA9910Qx3AimS\r\nIUnRMwyXUv5pXd7J5BPS49a54XvwmNlbXCXjjOVC2stpMLFRx6mjYstqAVQ0\r\nm7IFKS5FzmsXmrohlSM5upuD9yRTxkCvSgn0i9tD3xucUfpJdsxF+ehQJE/r\r\nHJ7PV/B9FPkdyc5Ed4eUcgd2LIsfQoVbRV0=\r\n=zTg5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"rwenzel","email":"robin.wenzel@carano.de"},"directories":{},"maintainers":[{"name":"phillip_fiala","email":"phillip.fiala@carano.de"},{"name":"jfmcarano","email":"jan-friedrich.mallis@carano.de"},{"name":"nevo-nives-nevo","email":"nives.boni@carano.de"},{"name":"rwenzel","email":"robin.wenzel@carano.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-fx-layout_3.0.5_1679412924180_0.6405408575208718"},"_hasShrinkwrap":false},"3.0.6":{"name":"@carano-uiux/css-fx-layout","version":"3.0.6","description":"Fork of original Library. A lightweight SCSS flexbox library inspired by Angular Flex-Layout.","scripts":{"test":"jest","test:watch":"jest --watch","test:ci":"jest --reporters=\"default\" --reporters=\"jest-junit\"","testbuild":"node testbuild.js"},"author":{"name":"Carano Software Solutions GmbH / Philip Dakowitz"},"license":"MIT","exports":{".":{"sass":"./_index.scss"}},"devDependencies":{"glob":"^8.1.0","jest":"^29.4.3","jest-environment-node-single-context":"^29.0.0","jest-junit":"^15.0.0","sass":"^1.58.1","sass-true":"^7.0.0"},"gitHead":"691cffbe24ab1514abe21d9b721cb5423230e921","_id":"@carano-uiux/css-fx-layout@3.0.6","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-PChA5AwfC8IF0EVTO2YTx9DoW27DIptodYqawNxLvd9JYmuXZQyyV6cSurIFCE8KhLcsq55LoZBZs1MYEh/XHw==","shasum":"999419edec3e9f32385bfca8aca0092d0a0faf4b","tarball":"https://registry.npmjs.org/@carano-uiux/css-fx-layout/-/css-fx-layout-3.0.6.tgz","fileCount":22,"unpackedSize":49708,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyP+cqsXDIZXo/lM159RjeCOFUXiss0PzWIH39vb3legIhAPbYc5vjdUJRP1qoJgrrlGi1fEi8g4p0OSn8rwz3opbG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPp3GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmokfg//TztAC7yDtSh5bMDOpez7dyHg7kMq8TQUiVUtXCbHE/vD3NFj\r\nEvmpAut/oA/K26GqYDKWjcjOG+x5yWFOGsJc8DPtaWHPp5CZhIRLFyi0LPpH\r\n8O/+hzV4ke1fHbhAZJy5T8nJIDbtmk4bOipIoO6zx3WuFb4P2h48Fc03DgHa\r\nbNGEDdukJNxFr3uEJPMgRKBppsYRKYHmdSj4b8ASnCa05tel0jgMPdHCODc2\r\ndV9ZD9dxY2+5/ynCXQB6oO2qw9o1cFLc2vDKDm+N96m/mrVAyKCLFD+vdRaq\r\n1yaJIAkyUsPL6O6QEkX7BLRBEfRvEPvkEzpRfzotHw1I5pbaiedlnFwDP5IO\r\nB3Mpw4KY6vCr86TnBZRqp7SSCkz7fHI6iNouE3oeTWKTAqGDksfoHt1SmGf+\r\nVLat8XVv93r22+JKG7C1PutMKOPki4QPs/3gGHkX/4JtzhwSw8uaw5Y5pAf8\r\nOm3emPOiHhJmNnJ1ZI8o6B4wKZNrxj+AhmOO5DygqzKR/AlW/OSlrpZqPorz\r\nPov5qq+u9W9S1bw8aZNxqaKa/iaLy0zyvPV2TpI4SRu6/ZEhYY6AHoiAJiiH\r\n7z8T2cOlJ5NJ8Z48dGNwG0dwOrodbzXzQfzU7WEJgzpPzwv1o8oaB6fcfs10\r\n7D0GYFZaZX3IqKojtXget/nekGwkLKiirIo=\r\n=VfpW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"rwenzel","email":"robin.wenzel@carano.de"},"directories":{},"maintainers":[{"name":"marie230","email":"marie.schumacher@carano.de"},{"name":"phillip_fiala","email":"phillip.fiala@carano.de"},{"name":"jfmcarano","email":"jan-friedrich.mallis@carano.de"},{"name":"nevo-nives-nevo","email":"nives.boni@carano.de"},{"name":"rwenzel","email":"robin.wenzel@carano.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-fx-layout_3.0.6_1681825221908_0.2454476474027314"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-21T13:20:50.976Z","3.0.3":"2023-03-21T13:20:51.211Z","modified":"2023-04-18T13:40:22.314Z","3.0.4":"2023-03-21T14:09:14.848Z","3.0.5":"2023-03-21T15:35:24.349Z","3.0.6":"2023-04-18T13:40:22.125Z"},"maintainers":[{"name":"marie230","email":"marie.schumacher@carano.de"},{"name":"phillip_fiala","email":"phillip.fiala@carano.de"},{"name":"jfmcarano","email":"jan-friedrich.mallis@carano.de"},{"name":"nevo-nives-nevo","email":"nives.boni@carano.de"},{"name":"rwenzel","email":"robin.wenzel@carano.de"}],"description":"Fork of original Library. A lightweight SCSS flexbox library inspired by Angular Flex-Layout.","author":{"name":"Carano Software Solutions GmbH / Philip Dakowitz"},"license":"MIT","readme":"# Fork from https://github.com/philmtd/css-fx-layout for UIUXTEAM purposes\r\n\r\n# css-fx-layout\r\n\r\nThis is a lightweight and modular SCSS flexbox library. It is inspired by Angular's [Flex-Layout](https://github.com/angular/flex-layout) and can replace the\r\nmost popular functions of the (by now deprecated) Angular library.\r\n\r\n## Features\r\n\r\nThis library gives you the option between using CSS classes or data-attributes. Both options give you the same features but the CSS classes can be more verbose when you want a more complex layout.\r\n\r\n**Please refer to the documentation on [https://philmtd.github.io/css-fx-layout](https://philmtd.github.io/css-fx-layout) for a full list of all available selectors and features.**\r\n\r\n### HTML data-attribute selectors\r\n\r\nUsing the data attributes is the easiest way to use this library and easier to migrate to from Angular Flex-Layout:\r\n\r\nFor example css-fx-layout provides attributes like the following, which can be configured through the values passed to them:\r\n\r\n* `data-layout` and `data-layout-align`\r\n* `data-layout-gap`\r\n* `data-hide-...` and `data-show-...`\r\n* `data-flex`\r\n\r\n### CSS class selectors\r\n\r\nUsing the CSS classes is more verbose and the more \"CSS-y\" way of styling your HTML:\r\n\r\nFor example css-fx-layout provides classes with naming patterns like:\r\n\r\n* `fx-layout-...` and `fx-align-...`\r\n* `fx-gap-...`\r\n* `show-...` and `hide-...`\r\n* `fx-flex-...`\r\n\r\n### Responsive API\r\n\r\nThe library provides a responsive API which allows to create different layouts for different screen sizes using known breakpoints\r\nlike `xs`, `sm`, `md`, `lg`, `xl` and including `lt-` and `gt-` variations of them. Please check out the [documentation](https://philmtd.github.io/css-fx-layout/docs/responsive)\r\nfor details on how to use it.\r\n\r\n## Getting started\r\n\r\nAdd the library to your project's `package.json`:\r\n\r\n```bash\r\nnpm i -s css-fx-layout\r\n```\r\n\r\nThen follow the [Getting Started](https://philmtd.github.io/css-fx-layout/docs/getting-started) guide in the documentation.\r\n\r\n## Examples\r\n\r\nThese are just two simple examples how to use `css-fx-layout`. Visit [the examples page](https://philmtd.github.io/css-fx-layout/examples) for more and live-rendered\r\nexamples.\r\n\r\n### Layout\r\n\r\n#### Example 1\r\nThis is the simplest example. It will make the div a flex container and align the three spans in a row:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n\r\n\r\n
CSS ClassesData Attributes
\r\n\r\n```html\r\n
\r\n One\r\n Two\r\n Three\r\n
\r\n```\r\n\r\n		 \r\n\r\n```html\r\n
\r\n One\r\n Two\r\n Three\r\n
\r\n```\r\n\r\n
\r\n\r\nThe resulting layout:\r\n\r\n\"Example\r\n\r\n\r\n#### Example 2\r\nAn advanced example that aligns the items in reverse order with a gap of four pixels and vertically centered:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n\r\n\r\n
CSS ClassesData Attributes
\r\n\r\n````html\r\n
\r\n One\r\n Two\r\n Three\r\n
\r\n````\r\n\r\n		 \r\n\r\n````html\r\n
\r\n One\r\n Two\r\n Three\r\n
\r\n````\r\n\r\n
\r\n\r\nThe resulting layout:\r\n\r\n\"Example\r\n\r\n\r\n## What problem does this library solve?\r\n\r\nInitially I created this library because I liked the convenient syntax of Angular Flex-Layout and wanted to use it in non-Angular \r\nprojects and without JavaScript.\r\n\r\nBy now Angular Flex-Layout has been deprecated and this library can be a replacement for most of the popular parts.\r\n","readmeFilename":"README.md"}