in this documentation, you can find a collection of utility class names to add different things to any DOM element using easy-to-remember shorthand classes.
in the table below you can find a list of shorthand classes to change the direction of any element.
| Classname | Description | Markup |
|---|---|---|
| .ltr | set the direction of LTR any element. | <any> |
| .rtl | set direction of RTL any element. | <any> |
| .float-start | set direction of float: ${direction-start} any element. | <any> |
| .float-end | set direction of float: ${direction-end} any element. | <any> |
| .clear-after | clear after a floated element inside .clear-after element. | <floated-wrapper> |
| .clear-fix | fix floated elements overflow. | <any> |
in the table below you can find a list of shorthand classes to add a position property to any element.
| Classname | Description | Markup |
|---|---|---|
| .position-ab | set position of absolute to any element. | <any> |
| .position-rb | set position of relative to any element. | <any> |
| .position-fx | set position of fixed to any element. | <any> |
| .position-st | set position of sticky to any element. | <any> |
| .pos-top-10 | set position – top of 10px to any element. | <any> |
| .pos-top-15 | set position – top of 15px to any element. | <any> |
| .pos-top-20 | set position – top of 20px to any element. | <any> |
| .pos-top-25 | set position – top of 25px to any element. | <any> |
| .pos-top-30 | set position – top of 30px to any element. | <any> |
| .pos-bottom-10 | set position – bottom of 10px to any element. | <any> |
| .pos-bottom-15 | set position – bottom of 15px to any element. | <any> |
| .pos-bottom-20 | set position – bottom of 20px to any element. | <any> |
| .pos-bottom-25 | set position – bottom of 25px to any element. | <any> |
| .pos-bottom-30 | set position – bottom of 30px to any element. | <any> |
| .pos-start-10 | set position – {pagedirection} start of 10px to any element. | <any> |
| .pos-start-15 | set position – {pagedirection} start of 15px to any element. | <any> |
| .pos-start-20 | set position – {pagedirection} start of 20px to any element. | <any> |
| .pos-start-25 | set position – {pagedirection} start of 25px to any element. | <any> |
| .pos-start-30 | set position – {pagedirection} start of 30px to any element. | <any> |
| .pos-end-10 | set position – {pagedirection} end of 10px to any element. | <any> |
| .pos-end-15 | set position – {pagedirection} end of 15px to any element. | <any> |
| .pos-end-20 | set position – {pagedirection} end of 20px to any element. | <any> |
| .pos-end-25 | set position – {pagedirection} end of 25px to any element. | <any> |
| .pos-end-30 | set position – {pagedirection} end of 30px to any element. | <any> |
| .pos-center | set position – {center} to any element. | <any> |
| .pos-center-x | set position – {center} horizontally to any element. | <any> |
| .pos-center-y | set position – {center} vertically to any element. | <any> |
| .pos-before-y | set position – bottom:100% to any element. | <any> |
| .pos-after-y | set position – top:100% to any element. | <any> |
| .pos-before-x | set position – {dir-end}:100% to any element. | <any> |
| .pos-after-x | set position – {dir-start}:100% to any element. | <any> |
in the table below you can find a list of shorthand classes for overflow css property.
| Classname | Description | Markup |
|---|---|---|
| .overflow-hidden | hide any overflow elements inside any DOM element. | <any> |
| .overflow-y-hidden | hide any overflow elements vertically inside any DOM element. | <any> |
| .overflow-x-hidden | hide any overflow elements horizontally inside any DOM element. | <any> |
| .overflow-auto | make the element scrollable when there are any overflow elements. | <any> |
| .overflow-y-auto | make the element vertically scrollable when there are any overflow elements. | <any> |
| .overflow-x-auto | make the element horizontally scrollable when there are any overflow elements. | <any> |
in the table below you can find a list of shorthand classes to create overlay layers.
| Classname | Description | Markup |
|---|---|---|
| .overlay-dark | create a dark overlay layer above the background. | <any> |
| .overlay-light | create a light overlay layer above the background. | <any> |
in the table below you can find a list of shorthand classes to
| Classname | Description | Markup |
|---|---|---|
| .z-index-# | add an z-index of # from 1 to 10 positions | <any> |
| .z-index-header | add an z-index of 999991 | <any> |
| .z-index-modal | add an z-index of 999999 | <any> |
| .z-index-dropdown | add an z-index of 999998 | <any> |
in the table below you can find a list of shorthand preset classes to add shadow to any elements, and all class names available for boxes are also available for text with the class name prefix switched from .bx-shadow to .tx-shadow.
| Classname | Description | Markup |
|---|---|---|
| .bx-shadow-dp-1 | add a box-shadow of level 1 depth to any element. | <any> |
| .bx-shadow-dp-2 | add a box-shadow of level 2 depth to any element. | <any> |
| .bx-shadow-dp-3 | add a box-shadow of level 3 depth to any element. | <any> |
| .bx-shadow-dp-4 | add a box-shadow of level 4 depth to any element. | <any> |
| .bx-shadow-dp-5 | add a box-shadow of level 5 depth to any element. | <any> |
| .bx-shadow-dp-1y | add a box-shadow of level 1 vertically depth to any element. | <any> |
| .bx-shadow-gls-dp-1 | Add Glass Effect Depth Level 01 | <any> |
| .bx-shadow-gls-dp-2 | Add Glass Effect Depth Level 02 | <any> |
| .bx-shadow-gls-dp-3 | Add Glass Effect Depth Level 03 | <any> |
| .bx-shadow-tw-sm | Add Tailwind Shadow [Small] | <any> |
| .bx-shadow-tw-md | Add Tailwind Shadow [Medium] | <any> |
| .bx-shadow-tw-lg | Add Tailwind Shadow [Large] | <any> |
| .bx-shadow-tw-xl | Add Tailwind Shadow [xLarge] | <any> |
| .bx-shadow-tw-2xl | Add Tailwind Shadow [Huge] | <any> |