{"_id":"@allyssonlf/alf-sass-utilities","_rev":"2-c6db1d5ad69ae900bffc9ccbe276384a","name":"@allyssonlf/alf-sass-utilities","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@allyssonlf/alf-sass-utilities","version":"1.0.0","keywords":["css","scss","sass","utilities","framework"],"author":{"name":"Allysson Lima Ferreira","email":"ferreira.allysson@outlook.com.br"},"license":"MIT","_id":"@allyssonlf/alf-sass-utilities@1.0.0","maintainers":[{"name":"allyssonlf","email":"ferreira.allysson@outlook.com.br"}],"dist":{"shasum":"8f2055d84c609a7cd394269fd1651cd2e9e264b5","tarball":"https://registry.npmjs.org/@allyssonlf/alf-sass-utilities/-/alf-sass-utilities-1.0.0.tgz","fileCount":12,"integrity":"sha512-gIqtNV4eev06F9EjlizOzj5wmxOoQh/nMecNm7VV1IY+uAxnU0PbHx9PxvB/pGJ6SRyfK7TjFOE2cj2U12/tgg==","signatures":[{"sig":"MEYCIQDdgecSFAyF9fSqSMpAl3k6x7CJYf83qunDkCo+StMPzgIhAJbr6JWuOclJT8rwLGZ91BAH/nBD52LwT3qrXuRiN1ER","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24635},"main":"scss/index.scss","sass":"scss/index.scss","styles":"dist/output","gitHead":"8186fb98a7223bf38d0f63b214194aa8bfe7a1e9","scripts":{"dev":"vite","build:css":"sass scss/index.scss dist/alf-sass-utilities.css --style=compressed --no-source-map"},"_npmUser":{"name":"allyssonlf","email":"ferreira.allysson@outlook.com.br"},"_npmVersion":"10.9.2","description":"SASS lib","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devdependencies":{"vite":"^6.2.6"},"peerDependencies":{"sass":"^1.86.3"},"_npmOperationalInternal":{"tmp":"tmp/alf-sass-utilities_1.0.0_1744312314679_0.20709538578364062","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@allyssonlf/alf-sass-utilities","version":"1.1.0","main":"scss/index.scss","sass":"scss/index.scss","styles":"dist/output","scripts":{"dev":"vite","build:css":"sass scss/index.scss dist/alf-sass-utilities.css --style=compressed --no-source-map"},"keywords":["css","scss","sass","utilities","framework"],"author":{"name":"Allysson Lima Ferreira","email":"ferreira.allysson@outlook.com.br"},"license":"MIT","description":"SASS lib","peerDependencies":{"sass":"^1.86.3"},"devdependencies":{"vite":"^6.2.6"},"_id":"@allyssonlf/alf-sass-utilities@1.1.0","gitHead":"c52a4c71427b28aa251a10dabf9b544ec0ddd00c","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-sUvjNXu92oNPyObVnnBuJIqZS6qCqtPdvNgkareZn3zdg4OLBKXbiDJSj3sZ0WAlBGQfHdPbbjPmIl+TgD0gZA==","shasum":"f1dee733c5bd550ca52b01f5f2a3c4f05fa86c92","tarball":"https://registry.npmjs.org/@allyssonlf/alf-sass-utilities/-/alf-sass-utilities-1.1.0.tgz","fileCount":14,"unpackedSize":28099,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEkHtIQw7/Rg4zi7oNAwW/nfIFn4pFGqpdeMCUvjQOcDAiEA2WJsfYkFrscpdMAVwQMw4PVL7TDzwhoP+u/WepK/JyA="}]},"_npmUser":{"name":"allyssonlf","email":"ferreira.allysson@outlook.com.br"},"directories":{},"maintainers":[{"name":"allyssonlf","email":"ferreira.allysson@outlook.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/alf-sass-utilities_1.1.0_1749477232033_0.3717592556822733"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-10T19:11:54.617Z","modified":"2025-06-09T13:53:52.382Z","1.0.0":"2025-04-10T19:11:54.853Z","1.1.0":"2025-06-09T13:53:52.203Z"},"author":{"name":"Allysson Lima Ferreira","email":"ferreira.allysson@outlook.com.br"},"license":"MIT","keywords":["css","scss","sass","utilities","framework"],"description":"SASS lib","maintainers":[{"name":"allyssonlf","email":"ferreira.allysson@outlook.com.br"}],"readme":"# ALF SASS Utilities CSS\n\n[![npm version](https://badge.fury.io/js/alf-sass-utilities.svg)](https://badge.fury.io/js/alf-sass-utilities) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Instalação\n\n```bash\n# Usando NPM\nnpm install alf-sass-utilities\n\n# Ou usando Yarn\nyarn add alf-sass-utilities\n\n## Available Utilities (Usage Examples)\n\nHere are some examples of how to use the generated classes in your HTML.\n\n* **Conventions:**\n    * Replace `md` with other breakpoint prefixes (`sm`, `lg`, `xl`, `xxl`, `xxxl`).\n    * Replace `--` with your configured separator (`$responsive-separator`, the default is `\"\\\\3A\"` which renders as an escaped `:`).\n    * Remember that fractional keys use `\\/` in the class name (e.g., `.w-1\\/2`).\n\n* **Spacing (Margin & Padding):**\n    * Set padding 4 (1rem) on all sides:\n        `<div class=\"p-4\">...</div>`\n    * Set margin top 8 (2rem):\n        `<div class=\"mt-8\">...</div>`\n    * Set horizontal margin to auto (center block):\n        `<div class=\"mx-auto\">...</div>`\n    * Set vertical padding to 2 (0.5rem), but 6 (1.5rem) on `md` screens and up:\n        `<div class=\"py-2 md--py-6\">...</div>`\n\n* **Sizing (Width & Height):**\n    * Set full width:\n        `<div class=\"w-full\">...</div>`\n    * Set full screen height:\n        `<div class=\"h-screen\">...</div>`\n    * Set width to 50% (half):\n        `<div class=\"w-1\\/2\">...</div>`\n    * Set full width, but auto width on `lg` screens and up:\n        `<div class=\"w-full lg--w-auto\">...</div>`\n    * Set minimum screen height (useful for sticky footer layouts):\n        `<body class=\"min-h-screen\">...</body>`\n\n* **Colors (Text & Background):**\n    * Set text color to red 500:\n        `<p class=\"text-red-500\">Alert!</p>`\n    * Set background color to white:\n        `<div class=\"bg-white\">...</div>`\n    * Black background, but changes to `pearl-white` on `md` screens and up:\n        `<div class=\"bg-black md--bg-pearl-white\">...</div>`\n    * Graphite text, but becomes transparent (if useful) on `xl` screens and up:\n        `<span class=\"text-graphite-black xl--text-transparent\">...</span>`\n\n* **Grid Layout:**\n    * Set display to grid:\n        `<div class=\"grid\">...</div>`\n    * Grid with 3 equal-width columns:\n        `<div class=\"grid grid-cols-3\">...</div>`\n    * Item spanning 2 grid columns:\n        `<div class=\"col-span-2\">...</div>`\n    * Grid with 4 columns, but 6 on `md` screens and up:\n        `<div class=\"grid grid-cols-4 md--grid-cols-6\">...</div>`\n    * Item spanning 1 column, but 4 on `lg` screens and up:\n        `<div class=\"col-span-1 lg--col-span-4\">...</div>`\n    * Grid with overall gap 4 (1rem):\n        `<div class=\"grid gap-4\">...</div>`\n    * Grid with column gap 8 (2rem):\n        `<div class=\"grid gap-x-8\">...</div>`\n    * Grid with gap 4, but gap 6 on `sm` screens and up:\n        `<div class=\"grid gap-4 sm--gap-6\">...</div>`\n    * Item starting at column line 2 and ending at line 5:\n         `<div class=\"col-start-2 col-end-5\">...</div>`\n\n* **Display:**\n    * Hide element:\n        `<div class=\"hidden\">...</div>`\n    * Hide element only on `lg` screens and up:\n        `<div class=\"lg--hidden\">...</div>`\n\n*(Consult the files in `scss/utilities/` for the complete list and exact logic)*\n\n---\n*(You can keep the more complex HTML example block below if desired)*\n\n```html\n<div class=\"grid grid-cols-1 md--grid-cols-3 gap-4 md--gap-6 p-4 xl--p-8 bg-white\">\n  <div class=\"md--col-span-2 p-4 bg-red-100 text-red-900\">\n    Main Content (spans 2 columns on 'md+')\n  </div>\n  <div class=\"p-4 bg-pearl-white text-graphite-black\">\n    Sidebar (spans 1 column on 'md+')\n  </div>\n  <div class=\"col-span-full mt-4 p-4 bg-black text-white text-center md--text-left\">\n    Footer (spans full grid width)\n  </div>\n</div>\n","readmeFilename":"README.md"}