Other Utilities
in this documentation you can find a collection of utilities class names to add different things to any DOM element using easy to remember shorthand classes.
Directions Assets
in the table below you can find a list of shorthand classes to change the direction of any element.
| Classname | Description | Markup |
|---|---|---|
| set direction of LTR to any element. | <any> |
| set direction of RTL to any element. | <any> |
| set direction of float: ${direction-start} to any element. | <any> |
| set direction of float: ${direction-end} to any element. | <any> |
| clear after a floated elements inside .clear-after element. | <floated-wrapper> |
| fix floated elements overflow. | <any> |
Position Assets
in the table below you can find a list of shorthand classes to add a position property to any element.
| Classname | Description | Markup |
|---|---|---|
. | set position of absolute to any element. | <any> |
| set position of relative to any element. | <any> |
| set position of fixed to any element. | <any> |
| set position of sticky to any element. | <any> |
| set position – top of 10px to any element. | <any> |
| set position – top of 15px to any element. | <any> |
| set position – top of 20px to any element. | <any> |
| set position – top of 25px to any element. | <any> |
| set position – top of 30px to any element. | <any> |
| set position – bottom of 10px to any element. | <any> |
| set position – 15px to any element. | <any> |
| set position – 20px to any element. | <any> |
| set position – 25px to any element. | <any> |
| set position – 30px to any element. | <any> |
| set position – {pagedirection} start of 10px to any element. | <any> |
| set position – {pagedirection} of 15px to any element. | <any> |
| set position – {pagedirection} of 20px to any element. | <any> |
| set position – {pagedirection} of 25px to any element. | <any> |
| set position – {pagedirection} of 30px to any element. | <any> |
| set position – {pagedirection} of 10px to any element. | <any> |
| set position – {pagedirection} of 15px to any element. | <any> |
| set position – {pagedirection} of 20px to any element. | <any> |
| set position – {pagedirection} of 25px to any element. | <any> |
| set position – {pagedirection} of 30px to any element. | <any> |
| set position – {center} to any element. | <any> |
| set position – {center} horizontally to any element. | <any> |
| set position – {center} vertically to any element. | <any> |
| set position – bottom:100% to any element. | <any> |
| set position – top:100% to any element. | <any> |
| set position – {dir-end}:100% to any element. | <any> |
| set position – {dir-start}:100% to any element. | <any> |
Overflow Assets
in the table below you can find a list of shorthand classes for overflow css property.
| Classname | Description | Markup |
|---|---|---|
| hide any overflow elements inside any DOM element. | <any> |
| hide any overflow elements vertically inside any DOM element. | <any> |
| hide any overflow elements horizontally inside any DOM element. | <any> |
| make the element scrollable when there is any overflow elements. | <any> |
| make the element vertically scrollable when there is any overflow elements. | <any> |
| make the element horizontally scrollable when there is any overflow elements. | <any> |
Overlay Layer
in the table below you can find a list of shorthand classes to create an overlay layers.
| Classname | Description | Markup |
|---|---|---|
| create a dark overlay layer with above the background. | <any> |
| create a light overlay layer with above the background. | <any> |
Z-index Assets
when you put the CSS, and JS together your document code should look like the one below it is the most basic structure for a Responsive & SEO Friendly WebApp.
| Classname | Description | Markup |
|---|---|---|
| add a z-index of 999991 | <any> |
| add a z-index of 999999 | <any> |
| add a z-index of 999998 | <any> |
Box Shadow
in the table below you can find a list of shorthand preset classes to add shadow to any elements.
| Classname | Description | Markup |
|---|---|---|
| add a box-shadow of level 1 depth to any element. | <any> |
| add a box-shadow of level 2 depth to any element. | <any> |
| add a box-shadow of level 3 depth to any element. | <any> |
| add a box-shadow of level 4 depth to any element. | <any> |
| add a box-shadow of level 5 depth to any element. | <any> |
Misc Classes
in the table below you can find a list of shorthand preset classes to make diffrent things to your element.
| Classname | Description | Markup |
|---|---|---|
| add a fast transtion of 300ms for all properties. | <any> |
| add a smooth transtion of 500ms for all properties. | <any> |
| add a slow transtion of 1000ms for all properties. | <any> |
| add margin-end for the ::before of any element for spacing icons. | <any> |
| change the mouse cursor to a pointer on the element. | <any> |
| change the mouse cursor to a none on the element. | <any> |