{"_id":"@288-toolkit/css","_rev":"6-f80961851bef32cc527dc76c72fe7bd7","name":"@288-toolkit/css","dist-tags":{"latest":"3.0.0"},"versions":{"1.0.0":{"name":"@288-toolkit/css","version":"1.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/css@1.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"fb9e865ebcb93579dc123af36a2de1be73648993","tarball":"https://registry.npmjs.org/@288-toolkit/css/-/css-1.0.0.tgz","fileCount":5,"integrity":"sha512-w3nzqLPQXQPsKio/5ZhAc5DmupXvNEz+aKkwCA+XI3kFl3AV4qgMgdHOdAOapMy87ok7Kbl2I64Sixxm5QHjvg==","signatures":[{"sig":"MEYCIQCnsWhARa0TghTPrBiN3dC2WMLKknBtPh0yXEHfx33KrwIhAM7FiLCS+kkvUHvdHCeTHZz99oZ3dV58sX5e4bQvO5yW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5115},"type":"module","_from":"file:288-toolkit-css-1.0.0.tgz","_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/ea700133321161accbcea7f9f6060bb8/288-toolkit-css-1.0.0.tgz","_integrity":"sha512-w3nzqLPQXQPsKio/5ZhAc5DmupXvNEz+aKkwCA+XI3kFl3AV4qgMgdHOdAOapMy87ok7Kbl2I64Sixxm5QHjvg==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/css ```","directories":{},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/css_1.0.0_1714573466002_0.10241562598229725","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@288-toolkit/css","version":"1.1.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/css@1.1.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"d3f421a55103736b2729aee87d8946187a87d670","tarball":"https://registry.npmjs.org/@288-toolkit/css/-/css-1.1.0.tgz","fileCount":4,"integrity":"sha512-Y13uvAbOeTP7iGisfsx7RvsTkNrEp/7fqsmV/iKOLCuNFM+YF0M7Yz3Lr8WEp/jJMofeSiIuDqPu1VJ5KBmNAQ==","signatures":[{"sig":"MEUCIQDi3xhCLu0xd71k+fd8/KEfDVwJT3TjoAPkfjkfGzLkRwIgJzof0pS8q4+yzsZAlvavezb9PIR25HfoKMg4uP7NmMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3123},"type":"module","_from":"file:288-toolkit-css-1.1.0.tgz","_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/7be26e84e9390f81e789f6b68716ba99/288-toolkit-css-1.1.0.tgz","_integrity":"sha512-Y13uvAbOeTP7iGisfsx7RvsTkNrEp/7fqsmV/iKOLCuNFM+YF0M7Yz3Lr8WEp/jJMofeSiIuDqPu1VJ5KBmNAQ==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/css ```","directories":{},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/css_1.1.0_1714573937649_0.03503166222030418","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@288-toolkit/css","version":"2.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/css@2.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"5fc4acd72ef3d66aead3bda1accdc6dc1c360681","tarball":"https://registry.npmjs.org/@288-toolkit/css/-/css-2.0.0.tgz","fileCount":4,"integrity":"sha512-sveq2LTLAwLjCZw/Csf/dBq6EvPQyq4AO+dkyjQqeC6U78Z0VbbOC+vCG0qqtZqPc7P7pXweNQcac32dvHgFsg==","signatures":[{"sig":"MEQCIF0Nt5pJ0cGTXBi3i7FqzzQKKSp8XJaMRCBm5ZpJhLVHAiA4/xaXMFVIFa78DqNw8YGRYqSip/nz19G9vH4RTacatg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3439},"type":"module","_from":"file:288-toolkit-css-2.0.0.tgz","_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/51d4746395ae06691a89515a83fe39f2/288-toolkit-css-2.0.0.tgz","_integrity":"sha512-sveq2LTLAwLjCZw/Csf/dBq6EvPQyq4AO+dkyjQqeC6U78Z0VbbOC+vCG0qqtZqPc7P7pXweNQcac32dvHgFsg==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/css ```","directories":{},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/css_2.0.0_1714574581705_0.2061140111217692","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@288-toolkit/css","version":"2.0.1","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/css@2.0.1","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"1994fd047c71621dad2d4122822552db7f705abe","tarball":"https://registry.npmjs.org/@288-toolkit/css/-/css-2.0.1.tgz","fileCount":4,"integrity":"sha512-pDpxLGRk1Zwh8TNq5LiT00XdcLoLsAnFg7sXh5FZcn103+ud13Jn8YSea40T7BMeekh4dDU/5PvYjdsb5hNASQ==","signatures":[{"sig":"MEQCIEOTgbr/prfgfPfHQo3XW+qVSgFWsDXPF3R1zVGljhPvAiB2T9xY3LMDHYNqTZCGpYu4DCtc3SFqfIIlMIa819+/Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3477},"type":"module","_from":"file:288-toolkit-css-2.0.1.tgz","_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/baecaf6fe080eb8e8ef0ade2bc128f4b/288-toolkit-css-2.0.1.tgz","_integrity":"sha512-pDpxLGRk1Zwh8TNq5LiT00XdcLoLsAnFg7sXh5FZcn103+ud13Jn8YSea40T7BMeekh4dDU/5PvYjdsb5hNASQ==","_npmVersion":"10.8.1","description":"```sh npm i @288-toolkit/css ```","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/css_2.0.1_1724268922205_0.8224101991202446","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@288-toolkit/css","version":"3.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/css@3.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"6c3eec38a9062b59fd012c7324616d58b7ca4e0c","tarball":"https://registry.npmjs.org/@288-toolkit/css/-/css-3.0.0.tgz","fileCount":5,"integrity":"sha512-aQnU3WEdD0TjvUafP3Gd4JgpSAMePnOU/fjbPjD3+hru2ujUqkQDsim7ep5YWB77RGHwzoHLBCTmVxv4ZG9Pfg==","signatures":[{"sig":"MEUCIQCLdJqXTbVNdboiajksVmWNwRm3HLa7P7KtYLuSjWD4VQIgEIAzf/k8B4/zD1VOcIL/dG9Ev0Rqo/kV+u4u7byaPKA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4783},"type":"module","_from":"file:288-toolkit-css-3.0.0.tgz","_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/71ce64a75cad0a171d07d073fda32ccb/288-toolkit-css-3.0.0.tgz","_integrity":"sha512-aQnU3WEdD0TjvUafP3Gd4JgpSAMePnOU/fjbPjD3+hru2ujUqkQDsim7ep5YWB77RGHwzoHLBCTmVxv4ZG9Pfg==","_npmVersion":"10.9.0","description":"```sh npm i @288-toolkit/css ```","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"peerDependencies":{"tailwindcss":"4.x"},"_npmOperationalInternal":{"tmp":"tmp/css_3.0.0_1746027593576_0.4406985415803195","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2024-05-01T14:24:25.900Z","modified":"2025-09-23T15:34:34.371Z","1.0.0":"2024-05-01T14:24:26.230Z","1.1.0":"2024-05-01T14:32:17.798Z","2.0.0":"2024-05-01T14:43:01.856Z","2.0.1":"2024-08-21T19:35:22.432Z","3.0.0":"2025-04-30T15:39:53.754Z"},"author":{"name":"DeuxHuitHuit"},"license":"MIT","description":"```sh npm i @288-toolkit/css ```","maintainers":[{"email":"open-source@deuxhuithuit.com","name":"nitriques"}],"readme":"# Css\n\n```sh\nnpm i @288-toolkit/css\n```\n\nA collection of useful css files. Must be used with Tailwindcss.\n\n## `viewport.css`\n\nMakes `rem` units responsive between 2 viewport sizes.\n\nWhen the viewport is below the `min`, 1 rem equals 9px, which is the smallest value allowed by\nSafari.\n\nWhen the viewport is above the `max`, 1 rem equals 10px.\n\nWhen the viewport is between `min` and `max`, 1 rem is tied to the viewport width. The scaling\nfactor changes at one breakpoint between `min` and `max`, called `bp`.\n\n[![rem value in px based on the viewport](./css-responsiveness.svg)](https://www.desmos.com/calculator/dhkjr16m9c)\n\nBetween `min` and `--viewport-bp`, which is 800 by default, 1 rem equals `2vw`. Between\n`--viewport-bp` and `--viewport-max`, which is 1600 by default, 1 rem equals `1vw`.\n\nFor the styles to work properly, you must define those 3 points in your tailwind config screens.\n\nWe recommend the following values.\n\n```ts\nexport default {\n\ttheme: {\n\t\tscreens: {\n\t\t\tmin: '360px',\n\t\t\tbp: '800px',\n\t\t\tmax: '1600px\n\t\t}\n\t}\n}\n```\n\nNote that if you modify `bp` or `max`, you must also set the same value in their respective css\nvariables on the `:root`.\n\n```ts\nexport default {\n\ttheme: {\n\t\tscreens: {\n\t\t\tmin: '360px',\n\t\t\tbp: '1000px',\n\t\t\tmax: '1800px\n\t\t}\n\t}\n}\n```\n\n```css\n:root {\n\t--viewport-bp: 1000;\n\t--viewport-max: 1800;\n}\n```\n\n## `reset.css`\n\nA css reset, added on top of Tailwind's own preflight.css.\n","readmeFilename":"README.md"}