@allyssonlf/alf-sass-utilities
v1.1.0
Published
SASS lib
Maintainers
allyssonlfReadme
ALF SASS Utilities CSS
Instalação
# Usando NPM
npm install alf-sass-utilities
# Ou usando Yarn
yarn add alf-sass-utilities
## Available Utilities (Usage Examples)
Here are some examples of how to use the generated classes in your HTML.
* **Conventions:**
* Replace `md` with other breakpoint prefixes (`sm`, `lg`, `xl`, `xxl`, `xxxl`).
* Replace `--` with your configured separator (`$responsive-separator`, the default is `"\\3A"` which renders as an escaped `:`).
* Remember that fractional keys use `\/` in the class name (e.g., `.w-1\/2`).
* **Spacing (Margin & Padding):**
* Set padding 4 (1rem) on all sides:
`<div class="p-4">...</div>`
* Set margin top 8 (2rem):
`<div class="mt-8">...</div>`
* Set horizontal margin to auto (center block):
`<div class="mx-auto">...</div>`
* Set vertical padding to 2 (0.5rem), but 6 (1.5rem) on `md` screens and up:
`<div class="py-2 md--py-6">...</div>`
* **Sizing (Width & Height):**
* Set full width:
`<div class="w-full">...</div>`
* Set full screen height:
`<div class="h-screen">...</div>`
* Set width to 50% (half):
`<div class="w-1\/2">...</div>`
* Set full width, but auto width on `lg` screens and up:
`<div class="w-full lg--w-auto">...</div>`
* Set minimum screen height (useful for sticky footer layouts):
`<body class="min-h-screen">...</body>`
* **Colors (Text & Background):**
* Set text color to red 500:
`<p class="text-red-500">Alert!</p>`
* Set background color to white:
`<div class="bg-white">...</div>`
* Black background, but changes to `pearl-white` on `md` screens and up:
`<div class="bg-black md--bg-pearl-white">...</div>`
* Graphite text, but becomes transparent (if useful) on `xl` screens and up:
`<span class="text-graphite-black xl--text-transparent">...</span>`
* **Grid Layout:**
* Set display to grid:
`<div class="grid">...</div>`
* Grid with 3 equal-width columns:
`<div class="grid grid-cols-3">...</div>`
* Item spanning 2 grid columns:
`<div class="col-span-2">...</div>`
* Grid with 4 columns, but 6 on `md` screens and up:
`<div class="grid grid-cols-4 md--grid-cols-6">...</div>`
* Item spanning 1 column, but 4 on `lg` screens and up:
`<div class="col-span-1 lg--col-span-4">...</div>`
* Grid with overall gap 4 (1rem):
`<div class="grid gap-4">...</div>`
* Grid with column gap 8 (2rem):
`<div class="grid gap-x-8">...</div>`
* Grid with gap 4, but gap 6 on `sm` screens and up:
`<div class="grid gap-4 sm--gap-6">...</div>`
* Item starting at column line 2 and ending at line 5:
`<div class="col-start-2 col-end-5">...</div>`
* **Display:**
* Hide element:
`<div class="hidden">...</div>`
* Hide element only on `lg` screens and up:
`<div class="lg--hidden">...</div>`
*(Consult the files in `scss/utilities/` for the complete list and exact logic)*
---
*(You can keep the more complex HTML example block below if desired)*
```html
<div class="grid grid-cols-1 md--grid-cols-3 gap-4 md--gap-6 p-4 xl--p-8 bg-white">
<div class="md--col-span-2 p-4 bg-red-100 text-red-900">
Main Content (spans 2 columns on 'md+')
</div>
<div class="p-4 bg-pearl-white text-graphite-black">
Sidebar (spans 1 column on 'md+')
</div>
<div class="col-span-full mt-4 p-4 bg-black text-white text-center md--text-left">
Footer (spans full grid width)
</div>
</div>