# Helpers

> An overview of the helper classes for alignment, visibility, spacing, and common CSS properties.

## Alignment

Easy-to-use classes to help you align your content.

### Vertical Align

You can easily vertically center things by adding the class `valign-wrapper` to the container holding the items you want to vertically align.

This should be vertically aligned

```
<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>
```

### Text Align

These classes are for horizontally aligning content: `.left-align`, `.right-align` and `.center-align`.

### This should be left aligned

### This should be right aligned

### This should be center aligned

```
<div>
  <h5 class="left-align">This should be left aligned</h5>
</div>
<div>
  <h5 class="right-align">This should be right aligned</h5>
</div>
<div>
  <h5 class="center-align">This should be center aligned</h5>
</div>
```

To center text on mobile only, add `center-on-small-only`.

## Hiding/Showing Content

We provide easy to use classes to hide/show content on specific screen sizes.

| Class | Screen Range |
| --- | --- |
| `**.hide**` | Hidden for all Devices |
| `**.hide-on-compact-only**` | Hidden on Compact (< 600px) |
| `**.hide-on-medium-only**` | Hidden on Medium (600–839px) |
| `**.hide-on-expanded-only**` | Hidden on Expanded (840–1199px) |
| `**.hide-on-expanded-and-up**` | Hidden on Expanded and wider (≥ 840px) |
| `**.hide-on-large-only**` | Hidden on Large (1200–1599px) |
| `**.hide-on-extra-large-only**` | Hidden on Extra-large (≥ 1600px) |
| `**.show-on-compact**` | Shown on Compact (< 600px) |
| `**.show-on-medium**` | Shown on Medium (600–839px) |
| `**.show-on-expanded**` | Shown on Expanded (840–1199px) |
| `**.show-on-large**` | Shown on Large (1200–1599px) |
| `**.show-on-extra-large**` | Shown on Extra-large (≥ 1600px) |
| `**.show-on-medium-and-up**` | Shown on Medium and wider (≥ 600px) |
| `**.show-on-medium-and-down**` | Shown on Compact and Medium (< 840px) |

Legacy `small`, `med`, and `xxl` utility names remain aliases for compatibility.

### Usage

```
<div class="hide-on-compact-only"></div>
```

## Spacing

These classes help space elements with margin and padding helpers for all directions. This works by combining a margin/padding prefix, a direction infix and value suffix.

### Prefix margin and padding modifiers

| Prefix | Modifies |
| --- | --- |
| `**m***` | Modifies the margin according to the infix and suffix values. If no infix is provided, it will be applied to all directions. |
| `**p***` | Modifies the padding according to the infix and suffix values. If no infix is provided, it will be applied to all directions. |

### Infix direction modifiers

| Infix | Direction |
| --- | --- |
| `***t**` | Applies modifier to the top side of the element |
| `***r**` | Applies modifier to the right side of the element |
| `***b**` | Applies modifier to the bottom side of the element |
| `***l**` | Applies modifier to the left side of the element |
| `***x**` | Applies modifier to the left and right sides of the element |
| `***y**` | Applies modifier to the top and bottom sides of the element |

### Suffix values

Any margin or padding modifier must be appended with one of these value suffixes.

| Suffix | Value |
| --- | --- |
| `***-0**` | `**0**` |
| `***-1**` | `**0.25rem**` |
| `***-2**` | `**0.5rem**` |
| `***-3**` | `**0.75rem**` |
| `***-4**` | `**1rem**` |
| `***-5**` | `**1.5rem**` |
| `***-6**` | `**3rem**` |
| `***-auto**` | `**auto**` |

### Tables of all spacing helpers

All margin helpers

| Property | Prefix | Classes |
| --- | --- | --- |
| `**margin**` | `**m**` | `**m-0**` | `**m-1**` | `**m-2**` | `**m-3**` | `**m-4**` | `**m-5**` | `**m-6**` | `**m-auto**` |
| `**margin-top**` | `**mt**` | `**mt-0**` | `**mt-1**` | `**mt-2**` | `**mt-3**` | `**mt-4**` | `**mt-5**` | `**mt-6**` | `**mt-auto**` |
| `**margin-right**` | `**mr**` | `**mr-0**` | `**mr-1**` | `**mr-2**` | `**mr-3**` | `**mr-4**` | `**mr-5**` | `**mr-6**` | `**mr-auto**` |
| `**margin-bottom**` | `**mb**` | `**mb-0**` | `**mb-1**` | `**mb-2**` | `**mb-3**` | `**mb-4**` | `**mb-5**` | `**mb-6**` | `**mb-auto**` |
| `**margin-left**` | `**ml**` | `**ml-0**` | `**ml-1**` | `**ml-2**` | `**ml-3**` | `**ml-4**` | `**ml-5**` | `**ml-6**` | `**ml-auto**` |
| `**margin-top**` and `**margin-bottom**` | `**my**` | `**my-0**` | `**my-1**` | `**my-2**` | `**my-3**` | `**my-4**` | `**my-5**` | `**my-6**` | `**my-auto**` |
| `**margin-left**` and `**margin-right**` | `**mx**` | `**mx-0**` | `**mx-1**` | `**mx-2**` | `**mx-3**` | `**mx-4**` | `**mx-5**` | `**mx-6**` | `**mx-auto**` |
| Values | 0 | 0.25rem | 0.5rem | 0.75rem | 1rem | 1.5rem | 3rem | auto |

All padding helpers

| Property | Prefix | Classes |
| --- | --- | --- |
| `**padding**` | `**p**` | `**p-0**` | `**p-1**` | `**p-2**` | `**p-3**` | `**p-4**` | `**p-5**` | `**p-6**` | `**p-auto**` |
| `**padding-top**` | `**pt**` | `**pt-0**` | `**pt-1**` | `**pt-2**` | `**pt-3**` | `**pt-4**` | `**pt-5**` | `**pt-6**` | `**pt-auto**` |
| `**padding-right**` | `**pr**` | `**pr-0**` | `**pr-1**` | `**pr-2**` | `**pr-3**` | `**pr-4**` | `**pr-5**` | `**pr-6**` | `**pr-auto**` |
| `**padding-bottom**` | `**pb**` | `**pb-0**` | `**pb-1**` | `**pb-2**` | `**pb-3**` | `**pb-4**` | `**pb-5**` | `**pb-6**` | `**pb-auto**` |
| `**padding-left**` | `**pl**` | `**pl-0**` | `**pl-1**` | `**pl-2**` | `**pl-3**` | `**pl-4**` | `**pl-5**` | `**pl-6**` | `**pl-auto**` |
| `**padding-top**` and `**padding-bottom**` | `**py**` | `**py-0**` | `**py-1**` | `**py-2**` | `**py-3**` | `**py-4**` | `**py-5**` | `**py-6**` | `**py-auto**` |
| `**padding-left**` and `**padding-right**` | `**px**` | `**px-0**` | `**px-1**` | `**px-2**` | `**px-3**` | `**px-4**` | `**px-5**` | `**px-6**` | `**px-auto**` |
| Values | 0 | 0.25rem | 0.5rem | 0.75rem | 1rem | 1.5rem | 3rem | auto |

### Usage

```
<div class="p-2">
  <h5 class="mt-1">The div has a padding 0.5rem and the h5 has a margin-top of 0.25rem</h5>
</div>
```

## Formatting

These classes help format various content on your site.

### Truncation

To truncate long lines of text in an ellipsis, add the class `truncate` to the tag which contains the text. See an example below of a header being truncated inside a card.

### This is an extremely long title that will be truncated

```
<h4 class="truncate">This is an extremely long title that will be truncated</h4>
```

#### Hover

The `hoverable` class adds an animation for box shadow as seen below. It can be used on most elements, but is meant for use on cards.

Hoverable article

```
<article class="hoverable">Hoverable article</article>
```

## Browser Defaults

Because we override many of the default browser styles and elements, we provide the `.browser-default` class to opt those elements out of the framework treatment.

| Name of Element | Reverted Style |
| --- | --- |
| SELECT | Browser default select element |
| INPUT | Browser default input |

```
<select class="browser-default">
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
</select>
<input class="browser-default" type="text">
```