![Logo of the project](./baukasten.png)

# Utility Classes
Most of the classes (Fluid Classes and Single Classes not) are available for all breakpoints.
Here is a small example how it looks like:

```html
<div class="w-24/24  s:w-12/24  m:w-8/24  l:w-6/24  max:w-3/24">Oh, nice!</div>
```

## Single Classes
| Class | Info |
| :--- | :--- |
| `.section` | Just a simple div with 100% width. For creating sections one the page |
| `.container` | Creates a 100% div with doubled padding left and right (Grid Container) and the maxWidth is set to the Max Breakpoint. Div is centered per default. Nested containers have no padding |
| `.row` | Have a negative margin left and right to bring cols in the right position |


## Width: Percentages
| Class  | Properties |
| :--- | :--- |
| `.w-1/24` | `width: 4.1666666667%;` |
| `.w-2/24` | `width: 8.3333333333%;` |
| `.w-3/24` | `width: 12.5%;` |
| `.w-4/24` | `width: 16.6666666667%;` |
| `.w-5/24` | `width: 20.8333333333%;` |
| `.w-6/24` | `width: 25%;` |
| `.w-7/24` | `width: 29.1666666667%;` |
| `.w-8/24` | `width: 33.3333333333%;` |
| `.w-9/24` | `width: 37.5%;` |
| `.w-10/24` | `width: 41.6666666667%;` |
| `.w-11/24` | `width: 45.8333333333%;` |
| `.w-12/24` | `width: 50%;` |
| `.w-13/24` | `width: 54.1666666667%;` |
| `.w-14/24` | `width: 58.3333333333%;` |
| `.w-15/24` | `width: 62.5%;` |
| `.w-16/24` | `width: 66.6666666667%;` |
| `.w-17/24` | `width: 70.8333333333%;` |
| `.w-18/24` | `width: 75%;` |
| `.w-19/24` | `width: 79.1666666667%;` |
| `.w-20/24` | `width: 83.3333333333%;` |
| `.w-21/24` | `width: 87.5%;` |
| `.w-22/24` | `width: 91.6666666667%;` |
| `.w-23/24` | `width: 95.8333333333%;` |
| `.w-24/24` | `width: 100%;` |


## Offset Classes
| Class  | Properties |
| :--- | :--- |
| `.offset-1/24` | `margin-left: 4.1666666667%;` |
| `.offset-2/24` | `margin-left: 8.3333333333%;` |
| `.offset-3/24` | `margin-left: 12.5%;` |
| `.offset-4/24` | `margin-left: 16.6666666667%;` |
| `.offset-5/24` | `margin-left: 20.8333333333%;` |
| `.offset-6/24` | `margin-left: 25%;` |
| `.offset-7/24` | `margin-left: 29.1666666667%;` |
| `.offset-8/24` | `margin-left: 33.3333333333%;` |
| `.offset-9/24` | `margin-left: 37.5%;` |
| `.offset-10/24` | `margin-left: 41.6666666667%;` |
| `.offset-11/24` | `margin-left: 45.8333333333%;` |
| `.offset-12/24` | `margin-left: 50%;` |
| `.offset-13/24` | `margin-left: 54.1666666667%;` |
| `.offset-14/24` | `margin-left: 58.3333333333%;` |
| `.offset-15/24` | `margin-left: 62.5%;` |
| `.offset-16/24` | `margin-left: 66.6666666667%;` |
| `.offset-17/24` | `margin-left: 70.8333333333%;` |
| `.offset-18/24` | `margin-left: 75%;` |
| `.offset-19/24` | `margin-left: 79.1666666667%;` |
| `.offset-20/24` | `margin-left: 83.3333333333%;` |
| `.offset-21/24` | `margin-left: 87.5%;` |
| `.offset-22/24` | `margin-left: 91.6666666667%;` |
| `.offset-23/24` | `margin-left: 95.8333333333%;` |
| `.offset-24/24` | `margin-left: 100%;` |


## Push Classes
| Class  | Properties |
| :--- | :--- |
| `.push-left-1/24` | `left: 4.1666666667%;` |
| `.push-left-2/24` | `left: 8.3333333333%;` |
| `.push-left-3/24` | `left: 12.5%;` |
| `.push-left-4/24` | `left: 16.6666666667%;` |
| `.push-left-5/24` | `left: 20.8333333333%;` |
| `.push-left-6/24` | `left: 25%;` |
| `.push-left-7/24` | `left: 29.1666666667%;` |
| `.push-left-8/24` | `left: 33.3333333333%;` |
| `.push-left-9/24` | `left: 37.5%;` |
| `.push-left-10/24` | `left: 41.6666666667%;` |
| `.push-left-11/24` | `left: 45.8333333333%;` |
| `.push-left-12/24` | `left: 50%;` |
| `.push-left-13/24` | `left: 54.1666666667%;` |
| `.push-left-14/24` | `left: 58.3333333333%;` |
| `.push-left-15/24` | `left: 62.5%;` |
| `.push-left-16/24` | `left: 66.6666666667%;` |
| `.push-left-17/24` | `left: 70.8333333333%;` |
| `.push-left-18/24` | `left: 75%;` |
| `.push-left-19/24` | `left: 79.1666666667%;` |
| `.push-left-20/24` | `left: 83.3333333333%;` |
| `.push-left-21/24` | `left: 87.5%;` |
| `.push-left-22/24` | `left: 91.6666666667%;` |
| `.push-left-23/24` | `left: 95.8333333333%;` |
| `.push-left-24/24` | `left: 100%;` |
| `.push-right-1/24` | `right: 4.1666666667%;` |
| `.push-right-2/24` | `right: 8.3333333333%;` |
| `.push-right-3/24` | `right: 12.5%;` |
| `.push-right-4/24` | `right: 16.6666666667%;` |
| `.push-right-5/24` | `right: 20.8333333333%;` |
| `.push-right-6/24` | `right: 25%;` |
| `.push-right-7/24` | `right: 29.1666666667%;` |
| `.push-right-8/24` | `right: 33.3333333333%;` |
| `.push-right-9/24` | `right: 37.5%;` |
| `.push-right-10/24` | `right: 41.6666666667%;` |
| `.push-right-11/24` | `right: 45.8333333333%;` |
| `.push-right-12/24` | `right: 50%;` |
| `.push-right-13/24` | `right: 54.1666666667%;` |
| `.push-right-14/24` | `right: 58.3333333333%;` |
| `.push-right-15/24` | `right: 62.5%;` |
| `.push-right-16/24` | `right: 66.6666666667%;` |
| `.push-right-17/24` | `right: 70.8333333333%;` |
| `.push-right-18/24` | `right: 75%;` |
| `.push-right-19/24` | `right: 79.1666666667%;` |
| `.push-right-20/24` | `right: 83.3333333333%;` |
| `.push-right-21/24` | `right: 87.5%;` |
| `.push-right-22/24` | `right: 91.6666666667%;` |
| `.push-right-23/24` | `right: 95.8333333333%;` |
| `.push-right-24/24` | `right: 100%;` |


## Pull Classes
| Class  | Properties |
| :--- | :--- |
| `.pull-left-1/24` | `left: -4.1666666667%;` |
| `.pull-left-2/24` | `left: -8.3333333333%;` |
| `.pull-left-3/24` | `left: -12.5%;` |
| `.pull-left-4/24` | `left: -16.6666666667%;` |
| `.pull-left-5/24` | `left: -20.8333333333%;` |
| `.pull-left-6/24` | `left: -25%;` |
| `.pull-left-7/24` | `left: -29.1666666667%;` |
| `.pull-left-8/24` | `left: -33.3333333333%;` |
| `.pull-left-9/24` | `left: -37.5%;` |
| `.pull-left-10/24` | `left: -41.6666666667%;` |
| `.pull-left-11/24` | `left: -45.8333333333%;` |
| `.pull-left-12/24` | `left: -50%;` |
| `.pull-left-13/24` | `left: -54.1666666667%;` |
| `.pull-left-14/24` | `left: -58.3333333333%;` |
| `.pull-left-15/24` | `left: -62.5%;` |
| `.pull-left-16/24` | `left: -66.6666666667%;` |
| `.pull-left-17/24` | `left: -70.8333333333%;` |
| `.pull-left-18/24` | `left: -75%;` |
| `.pull-left-19/24` | `left: -79.1666666667%;` |
| `.pull-left-20/24` | `left: -83.3333333333%;` |
| `.pull-left-21/24` | `left: -87.5%;` |
| `.pull-left-22/24` | `left: -91.6666666667%;` |
| `.pull-left-23/24` | `left: -95.8333333333%;` |
| `.pull-left-24/24` | `left: -100%;` |
| `.pull-right-1/24` | `right: -4.1666666667%;` |
| `.pull-right-2/24` | `right: -8.3333333333%;` |
| `.pull-right-3/24` | `right: -12.5%;` |
| `.pull-right-4/24` | `right: -16.6666666667%;` |
| `.pull-right-5/24` | `right: -20.8333333333%;` |
| `.pull-right-6/24` | `right: -25%;` |
| `.pull-right-7/24` | `right: -29.1666666667%;` |
| `.pull-right-8/24` | `right: -33.3333333333%;` |
| `.pull-right-9/24` | `right: -37.5%;` |
| `.pull-right-10/24` | `right: -41.6666666667%;` |
| `.pull-right-11/24` | `right: -45.8333333333%;` |
| `.pull-right-12/24` | `right: -50%;` |
| `.pull-right-13/24` | `right: -54.1666666667%;` |
| `.pull-right-14/24` | `right: -58.3333333333%;` |
| `.pull-right-15/24` | `right: -62.5%;` |
| `.pull-right-16/24` | `right: -66.6666666667%;` |
| `.pull-right-17/24` | `right: -70.8333333333%;` |
| `.pull-right-18/24` | `right: -75%;` |
| `.pull-right-19/24` | `right: -79.1666666667%;` |
| `.pull-right-20/24` | `right: -83.3333333333%;` |
| `.pull-right-21/24` | `right: -87.5%;` |
| `.pull-right-22/24` | `right: -91.6666666667%;` |
| `.pull-right-23/24` | `right: -95.8333333333%;` |
| `.pull-right-24/24` | `right: -100%;` |


## Width: Pixel
| Class  | Properties |
| :--- | :--- |
| `.w-8px` | `width: 8px;` |
| `.w-16px` | `width: 16px;` |
| `.w-24px` | `width: 24px;` |
| `.w-32px` | `width: 32px;` |
| `.w-40px` | `width: 40px;` |
| `.w-48px` | `width: 48px;` |
| `.w-56px` | `width: 56px;` |
| `.w-64px` | `width: 64px;` |
| `.w-72px` | `width: 72px;` |
| `.w-80px` | `width: 80px;` |
| `.w-88px` | `width: 88px;` |
| `.w-96px` | `width: 96px;` |
| `.w-104px` | `width: 104px;` |
| `.w-112px` | `width: 112px;` |
| `.w-120px` | `width: 120px;` |
| `.w-128px` | `width: 128px;` |
| `.w-136px` | `width: 136px;` |
| `.w-144px` | `width: 144px;` |
| `.w-152px` | `width: 152px;` |
| `.w-160px` | `width: 160px;` |
| `.w-168px` | `width: 168px;` |
| `.w-176px` | `width: 176px;` |
| `.w-184px` | `width: 184px;` |
| `.w-192px` | `width: 192px;` |
| `.w-200px` | `width: 200px;` |
| `.w-208px` | `width: 208px;` |
| `.w-216px` | `width: 216px;` |
| `.w-224px` | `width: 224px;` |
| `.w-232px` | `width: 232px;` |
| `.w-240px` | `width: 240px;` |
| `.w-248px` | `width: 248px;` |
| `.w-256px` | `width: 256px;` |


## Width: Additional
| Class  | Properties |
| :--- | :--- |
| `.w-full` | `width: 100%;` |
| `.w-screen` | `width: 100vw;` |


## Min-Width
| Class | Properties |
| :--- | :--- |
| `.min-w-0` | `min-width: 0;` |
| `.min-w-full` | `min-width: 100%;` |


## Container
| Class | Properties |
| :--- | :--- |
| `.container` | `width: 320px;` |


## Height: Pixel
| Class  | Properties |
| :--- | :--- |
| `.h-8px` | `height: 8px;` |
| `.h-16px` | `height: 16px;` |
| `.h-24px` | `height: 24px;` |
| `.h-32px` | `height: 32px;` |
| `.h-40px` | `height: 40px;` |
| `.h-48px` | `height: 48px;` |
| `.h-56px` | `height: 56px;` |
| `.h-64px` | `height: 64px;` |
| `.h-72px` | `height: 72px;` |
| `.h-80px` | `height: 80px;` |
| `.h-88px` | `height: 88px;` |
| `.h-96px` | `height: 96px;` |
| `.h-104px` | `height: 104px;` |
| `.h-112px` | `height: 112px;` |
| `.h-120px` | `height: 120px;` |
| `.h-128px` | `height: 128px;` |
| `.h-136px` | `height: 136px;` |
| `.h-144px` | `height: 144px;` |
| `.h-152px` | `height: 152px;` |
| `.h-160px` | `height: 160px;` |
| `.h-168px` | `height: 168px;` |
| `.h-176px` | `height: 176px;` |
| `.h-184px` | `height: 184px;` |
| `.h-192px` | `height: 192px;` |
| `.h-200px` | `height: 200px;` |
| `.h-208px` | `height: 208px;` |
| `.h-216px` | `height: 216px;` |
| `.h-224px` | `height: 224px;` |
| `.h-232px` | `height: 232px;` |
| `.h-240px` | `height: 240px;` |
| `.h-248px` | `height: 248px;` |
| `.h-256px` | `height: 256px;` |


## Height: Additional
| Class  | Properties |
| :--- | :--- |
| `.h-full` | `height: 100%;` |
| `.h-screen` | `height: 100vw;` |


## Min-Height
| Class | Properties |
| :--- | :--- |
| `.min-h-0` | `min-height: 0;` |
| `.min-h-full` | `min-height: 100%;` |
| `.min-h-screen` | `min-height: 100vh;` |


## Max-Height
| Class | Properties |
| :--- | :--- |
| `.max-h-full` | `max-height: 100%;` |
| `.max-h-screen` | `max-height: 100vh;` |


## Stacks
| Class  | Properties |
| :--- | :--- |
| `.stack-0` | `margin-top: 0;` |
| `.stack-0.25` | `@include spaceY(margin-top, 0.25);` |
| `.stack-0.5` | `@include spaceY(margin-top, 0.5);` |
| `.stack-0.75` | `@include spaceY(margin-top, 0.75);` |
| `.stack` | `@include spaceY(margin-top, 1);` |
| `.stack-1` | `@include spaceY(margin-top, 1);` |
| `.stack-1.5` | `@include spaceY(margin-top, 1.5);` |
| `.stack-2` | `@include spaceY(margin-top, 2);` |
| `.stack-2.5` | `@include spaceY(margin-top, 2.5);` |
| `.stack-3` | `@include spaceY(margin-top, 3);` |


## Padding
| Class | Properties |
| :--- | :--- |
| `.p-0` | `padding: 0;` |
| `.pt-0` | `padding-top: 0;` |
| `.pb-0` | `padding-bottom: 0;` |
| `.pl-0` | `padding-left: 0;` |
| `.pr-0` | `padding-right: 0;` |
| `.px-0` | `padding-left: 0; padding-right: 0` |
| `.py-0` | `padding-top: 0; padding-bottom: 0` |
| `.p-8px` | `padding: 8px;` |
| `.p-16px` | `padding: 16px;` |
| `.p-24px` | `padding: 24px;` |
| `.p-32px` | `padding: 32px;` |
| `.p-40px` | `padding: 40px;` |
| `.p-48px` | `padding: 48px;` |
| `.p-56px` | `padding: 56px;` |
| `.p-64px` | `padding: 64px;` |
| `.p-72px` | `padding: 72px;` |
| `.p-80px` | `padding: 80px;` |
| `.p-88px` | `padding: 88px;` |
| `.p-96px` | `padding: 96px;` |
| `.p-104px` | `padding: 104px;` |
| `.p-112px` | `padding: 112px;` |
| `.p-120px` | `padding: 120px;` |
| `.p-128px` | `padding: 128px;` |
| `.pl-8px` | `padding-left: 8px;` |
| `.pl-16px` | `padding-left: 16px;` |
| `.pl-24px` | `padding-left: 24px;` |
| `.pl-32px` | `padding-left: 32px;` |
| `.pl-40px` | `padding-left: 40px;` |
| `.pl-48px` | `padding-left: 48px;` |
| `.pl-56px` | `padding-left: 56px;` |
| `.pl-64px` | `padding-left: 64px;` |
| `.pl-72px` | `padding-left: 72px;` |
| `.pl-80px` | `padding-left: 80px;` |
| `.pl-88px` | `padding-left: 88px;` |
| `.pl-96px` | `padding-left: 96px;` |
| `.pl-104px` | `padding-left: 104px;` |
| `.pl-112px` | `padding-left: 112px;` |
| `.pl-120px` | `padding-left: 120px;` |
| `.pl-128px` | `padding-left: 128px;` |
| `.pr-8px` | `padding-right: 8px;` |
| `.pr-16px` | `padding-right: 16px;` |
| `.pr-24px` | `padding-right: 24px;` |
| `.pr-32px` | `padding-right: 32px;` |
| `.pr-40px` | `padding-right: 40px;` |
| `.pr-48px` | `padding-right: 48px;` |
| `.pr-56px` | `padding-right: 56px;` |
| `.pr-64px` | `padding-right: 64px;` |
| `.pr-72px` | `padding-right: 72px;` |
| `.pr-80px` | `padding-right: 80px;` |
| `.pr-88px` | `padding-right: 88px;` |
| `.pr-96px` | `padding-right: 96px;` |
| `.pr-104px` | `padding-right: 104px;` |
| `.pr-112px` | `padding-right: 112px;` |
| `.pr-120px` | `padding-right: 120px;` |
| `.pr-128px` | `padding-right: 128px;` |
| `.pt-8px` | `padding-top: 8px;` |
| `.pt-16px` | `padding-top: 16px;` |
| `.pt-24px` | `padding-top: 24px;` |
| `.pt-32px` | `padding-top: 32px;` |
| `.pt-40px` | `padding-top: 40px;` |
| `.pt-48px` | `padding-top: 48px;` |
| `.pt-56px` | `padding-top: 56px;` |
| `.pt-64px` | `padding-top: 64px;` |
| `.pt-72px` | `padding-top: 72px;` |
| `.pt-80px` | `padding-top: 80px;` |
| `.pt-88px` | `padding-top: 88px;` |
| `.pt-96px` | `padding-top: 96px;` |
| `.pt-104px` | `padding-top: 104px;` |
| `.pt-112px` | `padding-top: 112px;` |
| `.pt-120px` | `padding-top: 120px;` |
| `.pt-128px` | `padding-top: 128px;` |
| `.pb-8px` | `padding-bottom: 8px;` |
| `.pb-16px` | `padding-bottom: 16px;` |
| `.pb-24px` | `padding-bottom: 24px;` |
| `.pb-32px` | `padding-bottom: 32px;` |
| `.pb-40px` | `padding-bottom: 40px;` |
| `.pb-48px` | `padding-bottom: 48px;` |
| `.pb-56px` | `padding-bottom: 56px;` |
| `.pb-64px` | `padding-bottom: 64px;` |
| `.pb-72px` | `padding-bottom: 72px;` |
| `.pb-80px` | `padding-bottom: 80px;` |
| `.pb-88px` | `padding-bottom: 88px;` |
| `.pb-96px` | `padding-bottom: 96px;` |
| `.pb-104px` | `padding-bottom: 104px;` |
| `.pb-112px` | `padding-bottom: 112px;` |
| `.pb-120px` | `padding-bottom: 120px;` |
| `.pb-128px` | `padding-bottom: 128px;` |
| `.px-8px` | `padding-left: 8px; padding-right: 8px;` |
| `.px-16px` | `padding-left: 16px; padding-right: 16px;` |
| `.px-24px` | `padding-left: 24px; padding-right: 24px;` |
| `.px-32px` | `padding-left: 32px; padding-right: 32px;` |
| `.px-40px` | `padding-left: 40px; padding-right: 40px;` |
| `.px-48px` | `padding-left: 48px; padding-right: 48px;` |
| `.px-56px` | `padding-left: 56px; padding-right: 56px;` |
| `.px-64px` | `padding-left: 64px; padding-right: 64px;` |
| `.px-72px` | `padding-left: 72px; padding-right: 72px;` |
| `.px-80px` | `padding-left: 80px; padding-right: 80px;` |
| `.px-88px` | `padding-left: 88px; padding-right: 88px;` |
| `.px-96px` | `padding-left: 96px; padding-right: 96px;` |
| `.px-104px` | `padding-left: 104px; padding-right: 104px;` |
| `.px-112px` | `padding-left: 112px; padding-right: 112px;` |
| `.px-120px` | `padding-left: 120px; padding-right: 120px;` |
| `.px-128px` | `padding-left: 128px; padding-right: 128px;` |
| `.py-8px` | `padding-top: 8px; padding-bottom: 8px;` |
| `.py-16px` | `padding-top: 16px; padding-bottom: 16px;` |
| `.py-24px` | `padding-top: 24px; padding-bottom: 24px;` |
| `.py-32px` | `padding-top: 32px; padding-bottom: 32px;` |
| `.py-40px` | `padding-top: 40px; padding-bottom: 40px;` |
| `.py-48px` | `padding-top: 48px; padding-bottom: 48px;` |
| `.py-56px` | `padding-top: 56px; padding-bottom: 56px;` |
| `.py-64px` | `padding-top: 64px; padding-bottom: 64px;` |
| `.py-72px` | `padding-top: 72px; padding-bottom: 72px;` |
| `.py-80px` | `padding-top: 80px; padding-bottom: 80px;` |
| `.py-88px` | `padding-top: 88px; padding-bottom: 88px;` |
| `.py-96px` | `padding-top: 96px; padding-bottom: 96px;` |
| `.py-104px` | `padding-top: 104px; padding-bottom: 104px;` |
| `.py-112px` | `padding-top: 112px; padding-bottom: 112px;` |
| `.py-120px` | `padding-top: 120px; padding-bottom: 120px;` |
| `.py-128px` | `padding-top: 128px; padding-bottom: 128px;` |


## Margin
| Class | Properties |
| :--- | :--- |
| `.m-0` | `margin: 0;` |
| `.mt-0` | `margin-top: 0;` |
| `.mb-0` | `margin-bottom: 0;` |
| `.ml-0` | `margin-left: 0;` |
| `.mr-0` | `margin-right: 0;` |
| `.mx-0` | `margin-left: 0; margin-right: 0` |
| `.my-0` | `margin-top: 0; margin-bottom: 0` |
| `.mx-auto` | `margin-left: auto; margin-right: auto;` |
| `.ml-auto` | `margin-left: auto;` |
| `.mr-auto` | `margin-right: auto;` |
| `.m-8px` | `margin: 8px;` |
| `.m-16px` | `margin: 16px;` |
| `.m-24px` | `margin: 24px;` |
| `.m-32px` | `margin: 32px;` |
| `.m-40px` | `margin: 40px;` |
| `.m-48px` | `margin: 48px;` |
| `.m-56px` | `margin: 56px;` |
| `.m-64px` | `margin: 64px;` |
| `.m-72px` | `margin: 72px;` |
| `.m-80px` | `margin: 80px;` |
| `.m-88px` | `margin: 88px;` |
| `.m-96px` | `margin: 96px;` |
| `.m-104px` | `margin: 104px;` |
| `.m-112px` | `margin: 112px;` |
| `.m-120px` | `margin: 120px;` |
| `.m-128px` | `margin: 128px;` |
| `.ml-8px` | `margin-left: 8px;` |
| `.ml-16px` | `margin-left: 16px;` |
| `.ml-24px` | `margin-left: 24px;` |
| `.ml-32px` | `margin-left: 32px;` |
| `.ml-40px` | `margin-left: 40px;` |
| `.ml-48px` | `margin-left: 48px;` |
| `.ml-56px` | `margin-left: 56px;` |
| `.ml-64px` | `margin-left: 64px;` |
| `.ml-72px` | `margin-left: 72px;` |
| `.ml-80px` | `margin-left: 80px;` |
| `.ml-88px` | `margin-left: 88px;` |
| `.ml-96px` | `margin-left: 96px;` |
| `.ml-104px` | `margin-left: 104px;` |
| `.ml-112px` | `margin-left: 112px;` |
| `.ml-120px` | `margin-left: 120px;` |
| `.ml-128px` | `margin-left: 128px;` |
| `.mr-8px` | `margin-right: 8px;` |
| `.mr-16px` | `margin-right: 16px;` |
| `.mr-24px` | `margin-right: 24px;` |
| `.mr-32px` | `margin-right: 32px;` |
| `.mr-40px` | `margin-right: 40px;` |
| `.mr-48px` | `margin-right: 48px;` |
| `.mr-56px` | `margin-right: 56px;` |
| `.mr-64px` | `margin-right: 64px;` |
| `.mr-72px` | `margin-right: 72px;` |
| `.mr-80px` | `margin-right: 80px;` |
| `.mr-88px` | `margin-right: 88px;` |
| `.mr-96px` | `margin-right: 96px;` |
| `.mr-104px` | `margin-right: 104px;` |
| `.mr-112px` | `margin-right: 112px;` |
| `.mr-120px` | `margin-right: 120px;` |
| `.mr-128px` | `margin-right: 128px;` |
| `.mt-8px` | `margin-top: 8px;` |
| `.mt-16px` | `margin-top: 16px;` |
| `.mt-24px` | `margin-top: 24px;` |
| `.mt-32px` | `margin-top: 32px;` |
| `.mt-40px` | `margin-top: 40px;` |
| `.mt-48px` | `margin-top: 48px;` |
| `.mt-56px` | `margin-top: 56px;` |
| `.mt-64px` | `margin-top: 64px;` |
| `.mt-72px` | `margin-top: 72px;` |
| `.mt-80px` | `margin-top: 80px;` |
| `.mt-88px` | `margin-top: 88px;` |
| `.mt-96px` | `margin-top: 96px;` |
| `.mt-104px` | `margin-top: 104px;` |
| `.mt-112px` | `margin-top: 112px;` |
| `.mt-120px` | `margin-top: 120px;` |
| `.mt-128px` | `margin-top: 128px;` |
| `.mb-8px` | `margin-bottom: 8px;` |
| `.mb-16px` | `margin-bottom: 16px;` |
| `.mb-24px` | `margin-bottom: 24px;` |
| `.mb-32px` | `margin-bottom: 32px;` |
| `.mb-40px` | `margin-bottom: 40px;` |
| `.mb-48px` | `margin-bottom: 48px;` |
| `.mb-56px` | `margin-bottom: 56px;` |
| `.mb-64px` | `margin-bottom: 64px;` |
| `.mb-72px` | `margin-bottom: 72px;` |
| `.mb-80px` | `margin-bottom: 80px;` |
| `.mb-88px` | `margin-bottom: 88px;` |
| `.mb-96px` | `margin-bottom: 96px;` |
| `.mb-104px` | `margin-bottom: 104px;` |
| `.mb-112px` | `margin-bottom: 112px;` |
| `.mb-120px` | `margin-bottom: 120px;` |
| `.mb-128px` | `margin-bottom: 128px;` |
| `.mx-8px` | `margin-left: 8px; margin-right: 8px;` |
| `.mx-16px` | `margin-left: 16px; margin-right: 16px;` |
| `.mx-24px` | `margin-left: 24px; margin-right: 24px;` |
| `.mx-32px` | `margin-left: 32px; margin-right: 32px;` |
| `.mx-40px` | `margin-left: 40px; margin-right: 40px;` |
| `.mx-48px` | `margin-left: 48px; margin-right: 48px;` |
| `.mx-56px` | `margin-left: 56px; margin-right: 56px;` |
| `.mx-64px` | `margin-left: 64px; margin-right: 64px;` |
| `.mx-72px` | `margin-left: 72px; margin-right: 72px;` |
| `.mx-80px` | `margin-left: 80px; margin-right: 80px;` |
| `.mx-88px` | `margin-left: 88px; margin-right: 88px;` |
| `.mx-96px` | `margin-left: 96px; margin-right: 96px;` |
| `.mx-104px` | `margin-left: 104px; margin-right: 104px;` |
| `.mx-112px` | `margin-left: 112px; margin-right: 112px;` |
| `.mx-120px` | `margin-left: 120px; margin-right: 120px;` |
| `.mx-128px` | `margin-left: 128px; margin-right: 128px;` |
| `.my-8px` | `margin-top: 8px; margin-bottom: 8px;` |
| `.my-16px` | `margin-top: 16px; margin-bottom: 16px;` |
| `.my-24px` | `margin-top: 24px; margin-bottom: 24px;` |
| `.my-32px` | `margin-top: 32px; margin-bottom: 32px;` |
| `.my-40px` | `margin-top: 40px; margin-bottom: 40px;` |
| `.my-48px` | `margin-top: 48px; margin-bottom: 48px;` |
| `.my-56px` | `margin-top: 56px; margin-bottom: 56px;` |
| `.my-64px` | `margin-top: 64px; margin-bottom: 64px;` |
| `.my-72px` | `margin-top: 72px; margin-bottom: 72px;` |
| `.my-80px` | `margin-top: 80px; margin-bottom: 80px;` |
| `.my-88px` | `margin-top: 88px; margin-bottom: 88px;` |
| `.my-96px` | `margin-top: 96px; margin-bottom: 96px;` |
| `.my-104px` | `margin-top: 104px; margin-bottom: 104px;` |
| `.my-112px` | `margin-top: 112px; margin-bottom: 112px;` |
| `.my-120px` | `margin-top: 120px; margin-bottom: 120px;` |
| `.my-128px` | `margin-top: 128px; margin-bottom: 128px;` |
| `.-m-8px` | `margin: -8px;` |
| `.-m-16px` | `margin: -16px;` |
| `.-m-24px` | `margin: -24px;` |
| `.-m-32px` | `margin: -32px;` |
| `.-m-40px` | `margin: -40px;` |
| `.-m-48px` | `margin: -48px;` |
| `.-m-56px` | `margin: -56px;` |
| `.-m-64px` | `margin: -64px;` |
| `.-m-72px` | `margin: -72px;` |
| `.-m-80px` | `margin: -80px;` |
| `.-m-88px` | `margin: -88px;` |
| `.-m-96px` | `margin: -96px;` |
| `.-m-104px` | `margin: -104px;` |
| `.-m-112px` | `margin: -112px;` |
| `.-m-120px` | `margin: -120px;` |
| `.-m-128px` | `margin: -128px;` |
| `.-ml-8px` | `margin-left: -8px;` |
| `.-ml-16px` | `margin-left: -16px;` |
| `.-ml-24px` | `margin-left: -24px;` |
| `.-ml-32px` | `margin-left: -32px;` |
| `.-ml-40px` | `margin-left: -40px;` |
| `.-ml-48px` | `margin-left: -48px;` |
| `.-ml-56px` | `margin-left: -56px;` |
| `.-ml-64px` | `margin-left: -64px;` |
| `.-ml-72px` | `margin-left: -72px;` |
| `.-ml-80px` | `margin-left: -80px;` |
| `.-ml-88px` | `margin-left: -88px;` |
| `.-ml-96px` | `margin-left: -96px;` |
| `.-ml-104px` | `margin-left: -104px;` |
| `.-ml-112px` | `margin-left: -112px;` |
| `.-ml-120px` | `margin-left: -120px;` |
| `.-ml-128px` | `margin-left: -128px;` |
| `.-mr-8px` | `margin-right: -8px;` |
| `.-mr-16px` | `margin-right: -16px;` |
| `.-mr-24px` | `margin-right: -24px;` |
| `.-mr-32px` | `margin-right: -32px;` |
| `.-mr-40px` | `margin-right: -40px;` |
| `.-mr-48px` | `margin-right: -48px;` |
| `.-mr-56px` | `margin-right: -56px;` |
| `.-mr-64px` | `margin-right: -64px;` |
| `.-mr-72px` | `margin-right: -72px;` |
| `.-mr-80px` | `margin-right: -80px;` |
| `.-mr-88px` | `margin-right: -88px;` |
| `.-mr-96px` | `margin-right: -96px;` |
| `.-mr-104px` | `margin-right: -104px;` |
| `.-mr-112px` | `margin-right: -112px;` |
| `.-mr-120px` | `margin-right: -120px;` |
| `.-mr-128px` | `margin-right: -128px;` |
| `.-mt-8px` | `margin-top: -8px;` |
| `.-mt-16px` | `margin-top: -16px;` |
| `.-mt-24px` | `margin-top: -24px;` |
| `.-mt-32px` | `margin-top: -32px;` |
| `.-mt-40px` | `margin-top: -40px;` |
| `.-mt-48px` | `margin-top: -48px;` |
| `.-mt-56px` | `margin-top: -56px;` |
| `.-mt-64px` | `margin-top: -64px;` |
| `.-mt-72px` | `margin-top: -72px;` |
| `.-mt-80px` | `margin-top: -80px;` |
| `.-mt-88px` | `margin-top: -88px;` |
| `.-mt-96px` | `margin-top: -96px;` |
| `.-mt-104px` | `margin-top: -104px;` |
| `.-mt-112px` | `margin-top: -112px;` |
| `.-mt-120px` | `margin-top: -120px;` |
| `.-mt-128px` | `margin-top: -128px;` |
| `.-mb-8px` | `margin-bottom: -8px;` |
| `.-mb-16px` | `margin-bottom: -16px;` |
| `.-mb-24px` | `margin-bottom: -24px;` |
| `.-mb-32px` | `margin-bottom: -32px;` |
| `.-mb-40px` | `margin-bottom: -40px;` |
| `.-mb-48px` | `margin-bottom: -48px;` |
| `.-mb-56px` | `margin-bottom: -56px;` |
| `.-mb-64px` | `margin-bottom: -64px;` |
| `.-mb-72px` | `margin-bottom: -72px;` |
| `.-mb-80px` | `margin-bottom: -80px;` |
| `.-mb-88px` | `margin-bottom: -88px;` |
| `.-mb-96px` | `margin-bottom: -96px;` |
| `.-mb-104px` | `margin-bottom: -104px;` |
| `.-mb-112px` | `margin-bottom: -112px;` |
| `.-mb-120px` | `margin-bottom: -120px;` |
| `.-mb-128px` | `margin-bottom: -128px;` |
| `.-mx-8px` | `margin-left: -8px; margin-right: -8px;` |
| `.-mx-16px` | `margin-left: -16px; margin-right: -16px;` |
| `.-mx-24px` | `margin-left: -24px; margin-right: -24px;` |
| `.-mx-32px` | `margin-left: -32px; margin-right: -32px;` |
| `.-mx-40px` | `margin-left: -40px; margin-right: -40px;` |
| `.-mx-48px` | `margin-left: -48px; margin-right: -48px;` |
| `.-mx-56px` | `margin-left: -56px; margin-right: -56px;` |
| `.-mx-64px` | `margin-left: -64px; margin-right: -64px;` |
| `.-mx-72px` | `margin-left: -72px; margin-right: -72px;` |
| `.-mx-80px` | `margin-left: -80px; margin-right: -80px;` |
| `.-mx-88px` | `margin-left: -88px; margin-right: -88px;` |
| `.-mx-96px` | `margin-left: -96px; margin-right: -96px;` |
| `.-mx-104px` | `margin-left: -104px; margin-right: -104px;` |
| `.-mx-112px` | `margin-left: -112px; margin-right: -112px;` |
| `.-mx-120px` | `margin-left: -120px; margin-right: -120px;` |
| `.-mx-128px` | `margin-left: -128px; margin-right: -128px;` |
| `.-my-8px` | `margin-top: -8px; margin-bottom: -8px;` |
| `.-my-16px` | `margin-top: -16px; margin-bottom: -16px;` |
| `.-my-24px` | `margin-top: -24px; margin-bottom: -24px;` |
| `.-my-32px` | `margin-top: -32px; margin-bottom: -32px;` |
| `.-my-40px` | `margin-top: -40px; margin-bottom: -40px;` |
| `.-my-48px` | `margin-top: -48px; margin-bottom: -48px;` |
| `.-my-56px` | `margin-top: -56px; margin-bottom: -56px;` |
| `.-my-64px` | `margin-top: -64px; margin-bottom: -64px;` |
| `.-my-72px` | `margin-top: -72px; margin-bottom: -72px;` |
| `.-my-80px` | `margin-top: -80px; margin-bottom: -80px;` |
| `.-my-88px` | `margin-top: -88px; margin-bottom: -88px;` |
| `.-my-96px` | `margin-top: -96px; margin-bottom: -96px;` |
| `.-my-104px` | `margin-top: -104px; margin-bottom: -104px;` |
| `.-my-112px` | `margin-top: -112px; margin-bottom: -112px;` |
| `.-my-120px` | `margin-top: -120px; margin-bottom: -120px;` |
| `.-my-128px` | `margin-top: -128px; margin-bottom: -128px;` |


## Display
| Class | Properties |
| :--- | :--- |
| `.block` | `display: block;` |
| `.inline-block` | `display: inline-block;` |
| `.inline` | `display: inline;` |
| `.flex` | `display: flex;` |
| `.inline-flex` | `display: inline-flex;` |
| `.table` | `display: table;` |
| `.table-ror` | `display: table-ror;` |
| `.table-cell` | `display: table-cell;` |
| `.hidden` | `display: none;` |


## Floats
| Class | Properties |
| :--- | :--- |
| `.float-left` | `float: left;` |
| `.float-right` | `float: right;` |
| `.float-none` | `float: none;` |
| `.clearfix` | `::after { content: ''; display: table; clear: both; }` |


## Object Fit
| Class | Properties |
| :--- | :--- |
| `.object-contain` | `object-fit: contain;` |
| `.object-cover` | `object-fit: cover;` |
| `.object-fill` | `object-fit: fill;` |
| `.object-none` | `object-fit: none;` |
| `.object-scale-down` | `object-fit: scale-down;` |


## Object Position
| Class | Properties |
| :--- | :--- |
| `.object-bottom` | `object-position: bottom;` |
| `.object-center` | `object-position: center;` |
| `.object-left` | `object-position: left;` |
| `.object-left-bottom` | `object-position: left bottom;` |
| `.object-left-top` | `object-position: left top;` |
| `.object-right` | `object-position: right;` |
| `.object-right-bottom` | `object-position: right bottom;` |
| `.object-right-top` | `object-position: right top;` |
| `.object-top` | `object-position: top;` |


## Overflow
| Class | Properties |
| :--- | :--- |
| `.overflow-auto` | `overflow: auto;` |
| `.overflow-hidden` | `overflow: hidden;` |
| `.overflow-visible` | `overflow: visible;` |
| `.overflow-scroll` | `overflow: scroll;` |
| `.overflow-x-auto` | `overflow-x: auto;` |
| `.overflow-y-auto` | `overflow-y: auto;` |
| `.overflow-x-hidden` | `overflow-x: hidden;` |
| `.overflow-y-hidden` | `overflow-y: hidden;` |
| `.overflow-x-visible` | `overflow-x: visible;` |
| `.overflow-y-visible` | `overflow-y: visible;` |
| `.overflow-x-scroll` | `overflow-x: scroll;` |
| `.overflow-y-scroll` | `overflow-y: scroll;` |
| `.scrolling-touch` | `-webkit-overflow-scrolling: touch;` |
| `.scrolling-auto` | `-webkit-overflow-scrolling: auto;` |


## Position
| Class | Properties |
| :--- | :--- |
| `.position-static` | `position: static;` |
| `.position-fixed` | `position: fixed;` |
| `.position-absolute` | `position: absolute;` |
| `.position-relative` | `position: relative;` |
| `.position-sticky` | `position: sticky;` |


## Inset
| Class | Properties |
| :--- | :--- |
| `.inset-0` | `top: 0; right: 0; bottom: 0; left: 0;` |
| `.inset-x-0` | `left: 0; right: 0;` |
| `.inset-y-0` | `top: 0; bottom: 0;` |
| `.top-0` | `top: 0;` |
| `.right-0` | `right: 0;` |
| `.bottom-0` | `bottom: 0;` |
| `.left-0` | `left: 0;` |
| `.inset-auto` | `top: auto; right: auto; bottom: auto; left: auto;` |
| `.inset-x-auto` | `left: auto; right: auto;` |
| `.inset-y-auto` | `top: auto; bottom: auto;` |
| `.top-auto` | `top: auto;` |
| `.right-auto` | `right: auto;` |
| `.bottom-auto` | `bottom: auto;` |
| `.left-auto` | `left: auto;` |


## Visibility
| Class | Properties |
| :--- | :--- |
| `.visible` | `visibility: visible;` |
| `.invisible` | `visibility: hidden;` |


## z-index
| Class | Properties |
| :--- | :--- |
| `.z-0` | `z-index: 0;` |
| `.z-10` | `z-index: 10;` |
| `.z-20` | `z-index: 20;` |
| `.z-30` | `z-index: 30;` |
| `.z-40` | `z-index: 40;` |
| `.z-50` | `z-index: 50;` |
| `.z-auto` | `z-index: auto;` |


## Flex Box
| Class | Properties |
| :--- | :--- |
| `.flex-row` | `flex-direction: row;` |
| `.flex-row-reverse` | `flex-direction: row-reverse;` |
| `.flex-col` | `flex-direction: col;` |
| `.flex-col-reverse` | `flex-direction: col-reverse;` |
| `.flex-no-wrap` | `flex-wrap: nowrap;` |
| `.flex-wrap` | `flex-wrap: wrap;` |
| `.items-stretch` | `align-items: stretch;` |
| `.items-start` | `align-items: flex-start;` |
| `.items-end` | `align-items: flex-end;` |
| `.items-center` | `align-items: center;` |
| `.items-baseline` | `align-items: baseline;` |
| `.content-start` | `align-content: flex-start;` |
| `.content-end` | `align-content: flex-end;` |
| `.content-center` | `align-content: center;` |
| `.content-between` | `align-content: space-between;` |
| `.content-around` | `align-content: space-around;` |
| `.self-auto` | `align-self: auto;` |
| `.self-start` | `align-self: flex-start;` |
| `.self-end` | `align-self: flex-end;` |
| `.self-center` | `align-self: center;` |
| `.self-stretch` | `align-self: stretch;` |
| `.justify-start` | `justify-content: flex-start;` |
| `.justify-end` | `justify-content: flex-end;` |
| `.justify-center` | `justify-content: center;` |
| `.justify-between` | `justify-content: space-between;` |
| `.justify-around` | `justify-content: space-around;` |
| `.flex-initial` | `flex: 0 1 auto;` |
| `.flex-1` | `flex: 1 1 0%;` |
| `.flex-auto` | `flex: 1 1 auto;` |
| `.flex-none` | `flex: none;` |
| `.flex-grow` | `flex-grow: 1;` |
| `.flex-grow-0` | `flex-grow: 0;` |
| `.flex-shrink` | `flex-shrink: 1;` |
| `.flex-shrink-0` | `flex-shrink: 0;` |


## Order
| Class | Properties |
| :--- | :--- |
| `.order-first` | `order: -9999;` |
| `.order-last` | `order: 9999;` |
| `.order-1` | `order: 1;` |
| `.order-2` | `order: 2;` |
| `.order-3` | `order: 3;` |
| `.order-4` | `order: 4;` |
| `.order-5` | `order: 5;` |
| `.order-6` | `order: 6;` |
| `.order-7` | `order: 7;` |
| `.order-8` | `order: 8;` |
| `.order-9` | `order: 9;` |
| `.order-10` | `order: 10;` |
| `.order-11` | `order: 11;` |
| `.order-12` | `order: 12;` |


## Table
| Class | Properties |
| :--- | :--- |
| `.table-auto` | `table-layout: auto;` |
| `.table-fixed` | `table-layout: fixed;` |


## Text Align
| Class | Properties |
| :--- | :--- |
| `.text-left` | `text-align: left;` |
| `.text-center` | `text-align: center;` |
| `.text-right` | `text-align: right;` |
| `.text-justify` | `text-align: justify;` |


## Whitespace
| Class | Properties |
| :--- | :--- |
| `.whitespace-normal` | `white-space: normal;` |
| `.whitespace-nowrap` | `white-space: nowrap;` |
| `.whitespace-pre` | `white-space: pre;` |
| `.whitespace-pre-line` | `white-space: pre-line;` |
| `.whitespace-pre-wrap` | `white-space: pre-wrap;` |


## Word Break
| Class | Properties |
| :--- | :--- |
| `.break-normal` | `word-break: normal; overflow-wrap: normal;` |
| `.break-words` | `overflow-wrap: break-word;` |
| `.break-all` | `word-break: break-all;` |
| `.truncate` | `overflow: hidden; text-overflow: ellipsis; white-space: nowrap` |


## Fluid Stuff
## This classes are not available with Breakpoint Variants
Half numbers are also possible like `.p-0.5--fluid`
| Class | Properties |
| :--- | :--- |
| `.p-0--fluid … .p-10--fluid` | magic calc |
| `.pl-0--fluid … .pl-10--fluid` | magic calc |
| `.pr-0--fluid … .pr-10--fluid` | magic calc |
| `.pt-0--fluid … .pt-10--fluid` | magic calc |
| `.pb-0--fluid … .pb-10--fluid` | magic calc |
| `.px-0--fluid … .px-10--fluid` | magic calc |
| `.py-0--fluid … .py-10--fluid` | magic calc |
| `.m-0--fluid … .m-10--fluid` | magic calc |
| `.ml-0--fluid … .ml-10--fluid` | magic calc |
| `.mr-0--fluid … .mr-10--fluid` | magic calc |
| `.mt-0--fluid … .mt-10--fluid` | magic calc |
| `.mb-0--fluid … .mb-10--fluid` | magic calc |
| `.mx-0--fluid … .mx-10--fluid` | magic calc |
| `.my-0--fluid … .my-10--fluid` | magic calc |
| `.-m-0--fluid … .-m-10--fluid` | magic calc |
| `.-ml-0--fluid … .-ml-10--fluid` | magic calc |
| `.-mr-0--fluid … .-mr-10--fluid` | magic calc |
| `.-mt-0--fluid … .-mt-10--fluid` | magic calc |
| `.-mb-0--fluid … .-mb-10--fluid` | magic calc |
| `.-mx-0--fluid … .-mx-10--fluid` | magic calc |
| `.-my-0--fluid … .-my-10--fluid` | magic calc |