The spacing units and font sizes values are in pixel and we use a mixin to translate some of the value in REM. please use the variables instead of pixel or rem units in files specialy for font-size and spacing unit values.
This is a padding tiny paragraph.
This is a padding small paragraph.
This is a padding medium paragraph.
This is a padding large paragraph.
This is a margin tiny paragraph.
This is a margin small paragraph.
This is a margin medium paragraph.
This is a margin large paragraph.
| Class name | desc |
|---|---|
| .padding-tiny | padding: |
| .padding-y-tiny | padding: 0 |
| .padding-x-tiny | padding: 0 |
| .padding-left-tiny | padding-left: |
| .padding-right-tiny | padding-right: |
| .padding-top-tiny | padding-top: |
| .padding-bottom-tiny | padding-bottom: |
| Class name | desc |
|---|---|
| .padding-small | padding: |
| .padding-y-small | padding: 0 |
| .padding-x-small | padding: 0 |
| .padding-left-small | padding-left: |
| .padding-right-small | padding-right: |
| .padding-top-small | padding-top: |
| .padding-bottom-small | padding-bottom: |
| Class name | desc |
|---|---|
| .padding-medium | padding: |
| .padding-y-medium | padding: 0 |
| .padding-x-medium | padding: 0 |
| .padding-left-medium | padding-left: |
| .padding-right-medium | padding-right: |
| .padding-top-medium | padding-top: |
| .padding-bottom-medium | padding-bottom: |
| Class name | desc |
|---|---|
| .padding-large | padding: |
| .padding-y-large | padding: 0 |
| .padding-x-large | padding: 0 |
| .padding-left-large | padding-left: |
| .padding-right-large | padding-right: |
| .padding-top-large | padding-top: |
| .padding-bottom-large | padding-bottom: |
| Class name | desc |
|---|---|
| .margin-tiny | margin: |
| .margin-y-tiny | margin: 0 |
| .margin-x-tiny | margin: 0 |
| .margin-left-tiny | margin-left: |
| .margin-right-tiny | margin-right: |
| .margin-top-tiny | margin-top: |
| .margin-bottom-tiny | margin-bottom: |
| Class name | desc |
|---|---|
| .margin-small | margin: |
| .margin-y-small | margin: 0 |
| .margin-x-small | margin: 0 |
| .margin-left-small | margin-left: |
| .margin-right-small | margin-right: |
| .margin-top-small | margin-top: |
| .margin-bottom-small | margin-bottom: |
| Class name | desc |
|---|---|
| .margin-medium | margin: |
| .margin-y-medium | margin: 0 |
| .margin-x-medium | margin: 0 |
| .margin-left-medium | margin-left: |
| .margin-right-medium | margin-right: |
| .margin-top-medium | margin-top: |
| .margin-bottom-medium | margin-bottom: |
| Class name | desc |
|---|---|
| .margin-large | margin: |
| .margin-y-large | margin: 0 |
| .margin-x-large | margin: 0 |
| .margin-left-large | margin-left: |
| .margin-right-large | margin-right: |
| .margin-top-large | margin-top: |
| .margin-bottom-large | margin-bottom: |
| flushing padding & margin | |
|---|---|
| Class name | desc |
| .padding-reset | padding 0 |
| .padding-left-reset | padding-left: 0 |
| .padding-right-reset | padding-right:0 |
| .padding-top-reset | padding-top: 0 |
| .padding-bottom-reset | padding-bottom:0 |
| .padding-x-reset | padding-left:0; padding-right:0 |
| .padding-y-reset | padding-top:0; padding-bottom:0 |
| .margin-reset | margin: 0 |
| .margin-left-reset | margin-left:0 |
| .margin-right-reset | margin-right:0 |
| .margin-top-reset | margin-top:0 |
| .margin-bottom-reset | margin-bottom:0 |
| .margin-x-reset | margin-left:0; margin-right:0 |
| .margin-y-reset | margin-top:0; margin-bottom:0 |