Spacing
Phenix includes a wide range of shorthand responsive margin, padding, utilities classes to modify an element’s appearance.
Padding Utilities
phenix provide a range of shorthand responsive padding classes you can set a padding for individual properties, all properties, and vertical and horizontal properties with a responsive breakpoint to begin with like any other responsive utilities you add -{breakpoint} after the utility prefix for example .pd-md-* to add padding to the element for the medium screens size and up,
in the table below you can learn the pattern for each class name and its available values.
| Class name | Description | Markup |
|---|---|---|
| add padding for all direction. | <any> |
.pdx-* | add padding horizontally. | |
.pdy-* | add padding vertically. | |
.pdt-* | add padding top. | |
.pdb-* | add padding bottom. | |
.pds-* | add padding start [ltr=left], [rtl=right]. | |
.pde-* | add padding end [ltr=left], [rtl=right]. | |
**-5 | adding value equal to 5px for padding classes. | |
**-10 | adding value equal to 10px for padding classes. | |
**-15 | adding value equal to 15px for padding classes. | |
**-20 | adding value equal to 20px for padding classes. | |
**-25 | adding value equal to 25px for padding classes. | |
**-30 | adding value equal to 30px for padding classes. | |
**-40 | adding value equal to 40px for padding classes. | |
**-50 | adding value equal to 50px for padding classes. | |
**-75 | adding value equal to 75px for padding classes. | |
**-100 | adding value equal to 100px for padding classes. | |
| Responsive Pattern | Description | Breakpoints |
|---|---|---|
| add padding for all direction. | |
| add padding horizontally. | |
| add padding vertically. | |
| add padding top. | |
| add padding bottom. | |
| add padding start [ltr=left], [rtl=right]. | |
| add padding end [ltr=left], [rtl=right]. | |
Margin Utilities
phenix provide a range of shorthand responsive margin classes you can set a margin-{breakpoint} after the utility prefix for example .mg-md-* to add margin to the element for the medium screens size and up,
in the table below you can learn the pattern for each class name and its available values.
| Class name | Description | Markup |
|---|---|---|
| add margin for all direction. | <any> |
.mx-* | add margin horizontally. | |
.my-* | add margin vertically. | |
.mt-* | add margin top. | |
.mb-* | add margin bottom. | |
.ms-* | add margin start [ltr=left], [rtl=right]. | |
.me-* | add margin end [ltr=left], [rtl=right]. | |
**-auto | adding value of auto for margin classes. | |
**-5 | adding value equal to 5px for margin classes. | |
**-10 | adding value equal to 10px for margin classes. | |
**-15 | adding value equal to 15px for margin classes. | |
**-20 | adding value equal to 20px for margin classes. | |
**-25 | adding value equal to 25px for margin classes. | |
**-30 | adding value equal to 30px for margin classes. | |
**-40 | adding value equal to 40px for margin classes. | |
**-50 | adding value equal to 50px for margin classes. | |
| Responsive Pattern | Description | Breakpoints |
|---|---|---|
| add margin for all direction. | |
| add margin horizontally. | |
| add margin vertically. | |
| add margin top. | |
| add margin bottom. | |
| add margin start [ltr=left], [rtl=right]. | |
| add margin end [ltr=left], [rtl=right]. | |