# Utilities

# Spacing

We provide a combination of margin and padding classes similar to bootstrap and tailwindcss.
You can set a padding or margin to any side by providing a class like p{side}-{size} or .m{side}-{size}. The space coincides with our preset list of spacing.

Example: .pt-2 would add 8px of padding to the top of the element, .mx-0 would make the horizontal margin zero, and .ma-0 would make both the horizontal and vertical margins zero.

Class	Side	Space
`p` Padding	`t` Top	`0` 0
`m` Margin	`r` Right	`1` 4px
	`b` Bottom	`2` 8px
	`l` Left	`3` 12px
	`x` Horizontal	`4` 16px
	`y` Vertical	`5` 24px
	`a` All	`6` 32px
		`7` 48px
		`auto` auto

# Examples

Adding top of 8px

<div class="pt-2"></div>

.pt-2 {
  padding-top: 8px;
}

Adding margin x (left and right) of 0px

<div class="mx-0"></div>

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

Adding margin all (left, right, top, bottom) of 0px

<div class="ma-0"></div>

.ma-0 {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

# Display

Class	Properties
.d-none	display: none;
.d-inline	display: inline;
.d-inline-block	display: inline-block;
.d-block	display-block;
.d-flex	display: flex;
.d-inline-flex	display: inline-flex;

# Width

Class	Properties
.w-25	width: 25%;
.w-50	width: 50%;
.w-75	width: 75%;
.w-100	width: 100%;
.w-auto	width: auto;

# Height

Class	Properties
.h-100	height: 100%;
.h-auto	height: auto;
.h-screen	min-height: 100vh;

# Flex

# Direction & Growth

Class	Properties
.flex-fill	flex: 1 1 auto;
.flex-row	flex-direction: row;
.flex-column	flex-direction: column;
.flex-row-reverse	flex-direction: row-reverse;
.flex-column-reverse	flex-direction: column-reverse;
.flex-grow-0	flex-grow: 0;
.flex-grow-1	flex-grow: 1;

# Justification

Class	Properties
.justify-content-start	justify-content: flex-start;
.justify-content-end	justify-content: flex-end;
.justify-content-center	justify-content: center;
.justify-content-between	justify-content: space-between;
.justify-content-around	justify-content: space-around;

# Alignment

Class	Properties
.align-items-start	align-items: flex-start;
.align-items-end	align-items: flex-end;
.align-items-center	align-items: center;
.align-items-baseline	align-items: baseline;
.align-items-stretch	align-items: stretch;
.align-content-start	align-content: flex-start;
.align-content-end	align-content: flex-end;
.align-content-center	align-content: center;
.align-content-between	align-content: space-between;
.align-content-around	align-content: space-around;
.align-content-stretch	align-content: stretch;
.align-self-auto	align-self: auto;
.align-self-start	align-self: flex-start;
.align-self-end	align-self: flex-end;
.align-self-center	align-self: center;
.align-self-baseline	align-self: baseline;
.align-self-stretch	align-self: stretch;

# Float

Class	Properties
.float-left	float: left;
.float-right	float: right;
.float-center	float: center;

# Colors

For each color in our color palette we include a utility class that is prefixed with color-.

Class	Properties	Example
.type-{color}	color: var(--{color})	`class="color-blue-500"`

# Type Sizes

For each size in our type definitions we include a utility class that is prefixed with type-. You can also add the class of .mono to style as mono

Class	Properties	Example
.type-{type-size}	font-size: var(--type-{size})	`class="type-xl"`
.mono	font-size: calc(var(--type-{size}) * .95)	`class="mono type-xl"`

# Truncation

We support both single line truncation as well as multi-line. Multi-line truncation is customizable with the following properties:

TLineHeight - the height of each line
TMaxLines - the maximum number of allowed lines
TFontSize - the size of the font to truncate
TPosRight - css property right position of the ellipsis
TPadRight - the amount of padding on the right side of the container

Class	Properties
.truncate	white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
.truncate-multi	`TLineHeight`, `TMaxLines`, `TFontSize`, `TPosRight`, `TPadRight`

# Example

<div class="truncate-multi" style="width: 425px; border: 1px solid black; padding: 8px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum leo a neque tristique faucibus. Praesent at imperdiet elit, vel tincidunt metus. Praesent elementum mollis libero, et semper diam efficitur tristique. Nam aliquam tortor a leo pretium vestibulum. Proin posuere auctor odio, sit amet elementum massa aliquet in. 
</div>

.truncate-multi {
  --TLineHeight: 24px;
  --TMaxLines: 5;
  --TPosRight: 12px;
  --TPadRight: 8px;
  --TFontSize: 16px;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum leo a neque tristique faucibus. Praesent at imperdiet elit, vel tincidunt metus. Praesent elementum mollis libero, et semper diam efficitur tristique. Nam aliquam tortor a leo pretium vestibulum. Proin posuere auctor odio, sit amet elementum massa aliquet in.

# General Helpers

Class	Properties
.capitalize	text-transform: capitalize;
.lowercase	text-transform: lowercase;
.uppercase	text-transform: uppercase;
.bold-500	font-weight: 500;
.bold-600	font-weight: 600;
.bold-700	font-weight: 700;
.cursor-pointer	cursor: pointer;
.overflow-hidden	overflow: hidden;
.overflow-auto	overflow: auto;

← Forms Alert →