Utilities
Ani-Design provides utility class for paddings, margins, display and positions
Padding
| Utility Class | Meaning |
|---|---|
| .pad-1r | padding: 1rem; |
| .pad-2r | padding: 2rem; |
| .pad-3r | padding: 3rem; |
| .pad-4r | padding: 4rem; |
| .pad-5r | padding: 5rem; |
| .pad-top-1r | padding-top: 1rem; |
| .pad-top-2r | padding-top: 2rem; |
| .pad-top-3r | padding-top: 3rem; |
| .pad-top-4r | padding-top: 4rem; |
| .pad-top-5r | padding-top: 5rem; |
| .pad-btm-1r | padding-bottom: 1rem; |
| .pad-btm-2r | padding-bottom: 2rem; |
| .pad-btm-3r | padding-bottom: 3rem; |
| .pad-btm-4r | padding-bottom: 4rem; |
| .pad-btm-5r | padding-bottom: 5rem; |
| .pad-rt-1r | padding-right: 1rem; |
| .pad-rt-2r | padding-right: 2rem; |
| .pad-rt-3r | padding-right: 3rem; |
| .pad-rt-4r | padding-right: 4rem; |
| .pad-rt-5r | padding-right: 5rem; |
| .pad-lt-1r | padding-left: 1rem; |
| .pad-lt-2r | padding-left: 2rem; |
| .pad-lt-3r | padding-left: 3rem; |
| .pad-lt-4r | padding-left: 4rem; |
| .pad-lt-5r | padding-left: 5rem; |
Margin
| Utility Class | Meaning |
|---|---|
| .mg-1r | margin: 1rem; |
| .mg-2r | margin: 2rem; |
| .mg-3r | margin: 3rem; |
| .mg-4r | margin: 4rem; |
| .mg-5r | margin: 5rem; |
| .mg-top-1r | margin-top: 1rem; |
| .mg-top-2r | margin-top: 2rem; |
| .mg-top-3r | margin-top: 3rem; |
| .mg-top-4r | margin-top: 4rem; |
| .mg-top-5r | margin-top: 5rem; |
| .mg-btm-1r | margin-bottom: 1rem; |
| .mg-btm-2r | margin-bottom: 2rem; |
| .mg-btm-3r | margin-bottom: 3rem; |
| .mg-btm-4r | margin-bottom: 4rem; |
| .mg-btm-5r | margin-bottom: 5rem; |
| .mg-rt-1r | margin-right: 1rem; |
| .mg-rt-2r | margin-right: 2rem; |
| .mg-rt-3r | margin-right: 3rem; |
| .mg-rt-4r | margin-right: 4rem; |
| .mg-rt-5r | margin-right: 5rem; |
| .mg-lt-1r | margin-left: 1rem; |
| .mg-lt-2r | margin-left: 2rem; |
| .mg-lt-3r | margin-left: 3rem; |
| .mg-lt-4r | margin-left: 4rem; |
| .mg-lt-5r | margin-left: 5rem; |
Display and Position
| Utility Class | Meaning |
|---|---|
| .flex | display: flex; |
| .grid | display: grid; |
| .block | display: block; |
| .block-inline | display: inline-block; |
| .block-inline | display: inline-block; |
| .pos-rel | position: relative; |
| .pos-abs | position: absolute; |
| .pos-fix | position: sticky; |
Miscellaneous
| Utility Class | Meaning |
|---|---|
| .pointer | cursor: pointer; |
| .scroll-smooth | scroll-behavior: smooth; |