Phenix includes a wide range of shorthand responsive margins, padding, and utility classes to modify an element’s appearance.
phenix provides 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 size of the medium screen and up,
in the table below you can learn the pattern for each class name and its available values.
| Class name | Description | Markup |
|---|---|---|
.pd-* |
adds padding for all directions. | <any> |
.pdx-* |
add padding horizontally. | <any> |
.pdy-* |
add padding vertically. | <any> |
.pdt-* |
add padding-top. | <any> |
.pdb-* |
add padding-bottom. | <any> |
.pds-* |
add padding start [ltr=left], [rtl=right]. | <any> |
.pde-* |
add padding end [ltr=left], [rtl=right]. | <any> |
**-5 |
adding value equal to 5px padding classes. |
<any> |
**-10 |
adding value equal to 10px padding classes. |
<any> |
**-15 |
adding value equal to 15px padding classes. |
<any> |
**-20 |
adding value equal to 20px padding classes. |
<any> |
**-25 |
adding value equal to 25px padding classes. |
<any> |
**-30 |
adding value equal to 30px padding classes. |
<any> |
**-40 |
adding value equal to 40px padding classes. |
<any> |
**-50 |
adding value equal to 50px padding classes. |
<any> |
**-75 |
adding value equal to 75px padding classes. |
<any> |
**-100 |
adding value equal to 100px padding classes. |
<any> |
| Responsive Pattern | Description | Breakpoints |
|---|---|---|
.pd-{breakpoint}-* |
add padding for all directions. | md, lg, xl |
.pdx-{breakpoint}-* |
add padding horizontally. | md, lg, xl |
.pdt-{breakpoint}-* |
add padding vertically. | md, lg, xl |
.pdt-{breakpoint}-* |
add padding-top. | md, lg, xl |
.pdb-{breakpoint}-* |
add padding-bottom. | md, lg, xl |
.pds-{breakpoint}-* |
add padding start [ltr=left], [rtl=right]. | md, lg, xl |
.pde-{breakpoint}-* |
add padding end [ltr=left], [rtl=right]. | md, lg, xl |
phenix provide a range of shorthand responsive margin classes you can set a margin 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 .mg-md-* to add a margin to the element for the size of the medium screen and up,
in the table below you can learn the pattern for each class name and its available values.
| Class name | Description | Markup |
|---|---|---|
.mg-* |
adds a margin for all directions. | <any> |
.mx-* |
add margin horizontally. | <any> |
.my-* |
add margin vertically. | <any> |
.mt-* |
add margin-top. | <any> |
.mb-* |
add margin-bottom. | <any> |
.ms-* |
add margin start [ltr=left], [rtl=right]. | <any> |
.me-* |
add margin end [ltr=left], [rtl=right]. | <any> |
**-auto |
adding the value auto for margin classes. |
<any> |
**-5 |
adding value equal to 5px margin classes. |
<any> |
**-10 |
adding value equal to 10px margin classes. |
<any> |
**-15 |
adding value equal to 15px margin classes. |
<any> |
**-20 |
adding value equal to 20px margin classes. |
<any> |
**-25 |
adding value equal to 25px margin classes. |
<any> |
**-30 |
adding value equal to 30px margin classes. |
<any> |
**-40 |
adding value equal to 40px margin classes. |
<any> |
**-50 |
adding value equal to 50px margin classes. |
<any> |
| Responsive Pattern | Description | Breakpoints |
|---|---|---|
.mg-{breakpoint}-* |
add a margin for all directions. | md, lg, xl |
.mx-{breakpoint}-* |
add margin horizontally. | md, lg, xl |
.my-{breakpoint}-* |
add margin vertically. | md, lg, xl |
.mt-{breakpoint}-* |
add margin-top. | md, lg, xl |
.mb-{breakpoint}-* |
add margin-bottom. | md, lg, xl |
.ms-{breakpoint}-* |
add margin start [ltr=left], [rtl=right]. | md, lg, xl |
.me-{breakpoint}-* |
add margin end [ltr=left], [rtl=right]. | md, lg, xl |
Phenix includes a wide range of shorthand responsive margins, padding, and utility classes to modify an element’s appearance.
phenix provides 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 size of the medium screen and up,
in the table below you can learn the pattern for each class name and its available values.