ro:Kit utility classes are provided to give the designer fine control over the style of the page.
Each of the utility classes uses base distance unit with default value of 0.75rem. Each level adds 1 additional unit.
| Variable | Description | Default Value | Location |
|---|---|---|---|
| $unit | Sets the base measure unit used by ro:Kit | 0.75rem | _variables.scss |
| $utility-levels | Sets number of utility levels generated by ro:Kit | 10 | _variables.scss |
| Class | Description |
|---|---|
| .m-[level:number = 0 through 10] | Add [level] * distance unit of margin to element |
| .p-[level:number = 0 through 10] | Add [level] * distance unit of padding to element |
| .m-x-[level:number = 0 through 10] | Add [level] * distance unit of horizontal margin to element |
| .p-x-[level:number = 0 through 10] | Add [level] * distance unit of horizontal padding to element |
| .m-y-[level:number = 0 through 10] | Add [level] * distance unit of vertical margin to element |
| .p-y-[level:number = 0 through 10] | Add [level] * distance unit of vertical padding to element |
| .children-m-[level:number = 0 through 10] | Add [level] * distance unit of margin to element's children elements |
| .children-p-[level:number = 0 through 10] | Add [level] * distance unit of padding to element's children elements |
| .children-m-x-[level:number = 0 through 10] | Add [level] * distance unit of horizontal margin to element's children elements |
| .children-p-x-[level:number = 0 through 10] | Add [level] * distance unit of horizontal padding to element's children elements |
| .children-m-y-[level:number = 0 through 10] | Add [level] * distance unit of vertical margin to element's children elements |
| .children-p-y-[level:number = 0 through 10] | Add [level] * distance unit of vertical padding to element's children elements |
| .children-p-[direction:letter = t | b | r | l]-[level:number = 0 through 10] | Add [level] * distance unit of [direction (t = top, b = bottom, r = right, l = left)] padding to element's children elements |
| .children-m-[direction:letter = t | b | r | l]-[level:number = 0 through 10] | Add [level] * distance unit of [direction (t = top, b = bottom, r = right, l = left)] margin to element's children elements |
| .m-[direction:letter = t | b | r | l]-[level:number = 0 through 10] | Add [level] * distance unit of [direction (t = top, b = bottom, r = right, l = left)] margin to element |
| .p-[direction:letter = t | b | r | l]-[level:number = 0 through 10] | Add [level] * distance unit of [direction (t = top, b = bottom, r = right, l = left)] padding to element |
See responsive utility classes.
| Class | Description |
|---|---|
| .vh-[amount:number = 1 through 100] | Add [amount] vh height to element |
| .[direction:text = left | right | top | bottom] | Sets position [direction] to 0 |
| .z-[level:number = -1 through 100] | Sets z-index to [level] |
| .inline-block | Sets element's display to inline-block |
| .show | Sets element's display property to block |
| .hide | Sets element's display property to none |
| .relative | Sets element's position to relative |
| .fixed | Sets element's position to fixed |
| .full-width | Sets element's width to 100% |