##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Utilities

### Alignments

#### Clearing And Floating

Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.

Class | Description
--- | ---
`.pull-left` | Float the element to the left.
`.pull-right` | Float the element to the right.
`.clearfix` | Add this class to a parent container to clear floats.

#### Vertical Aligns

Add one of these classes to change the display properties of an element.

Class | Description
--- | ---
`.vertical-align` | Add this class to the parent container. This container needs a specific height.
`.vertical-align-middle` | Add this class to the child element to center your content.
`.vertical-align-bottom` | Add this class to the child element to align your content to the bottom.

#### Center Block

Class | Description
--- | ---
`.center-block` | Use the class to center the element.

### Text Related

#### Text Transformation

Transform text in components with text capitalization classes.

Class | Description
--- | ---
`.text-lowercase` | Transform text to lowercase.
`.text-uppercase` | Transform text to uppercase.
`.text-capitalize` | Transform text to capitalize.

Lowercased text.

Uppercased text.

Capitalized text.

#### Text Wrapping

Add one of these classes to wrap the text.

Class | Description
--- | ---
`.text-hide` | Replace an element's text content with a background image.
`.text-truncate` | Prevents text from wrapping into multiple lines, truncating it instead.
`.text-break` | Breaks strings if their length exceeds the width of their container.
`.text-nowrap` | Prevents text from wrapping into multiple lines.

This is text hide.
This is text truncate.This is text truncate.
This-is-text-break.This-is-text-break.This-is-text-break.This-is-text-break.
This is text nowrap.This is text nowrap.

#### Text Alignment

Add one of these useful classes to align your text.

Class | Description
--- | ---
`.text-top` | Aligns text to the top.
`.text-middle` | Aligns text to the middle.
`.text-bottom` | Aligns text to the bottom.
`.text-left` | Left aligned text.
`.text-center` | Center aligned text.
`.text-right` | Right aligned text.
`.text-justify` | Justified text.

Aligns text to the top.
Aligns text to the middle.
Aligns text to the bottom.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.Justified text.Justified text.

#### Quick Font Size

Add one of these classes to set the font size.

All size: 0, 10, 12, 14, 16, 18, 20, 24, 26, 30, 40, 50, 60, 70 , 80.

Class | Description
--- | ---
`.font-size-0` | font-size: 0px
`.font-size-10` | font-size: 10px
`.font-size-12` | font-size: 12px
`.font-size-14` | font-size: 14px
`.font-size-16` | font-size: 16px
`.font-size-18` | font-size: 18px
`.font-size-20` | font-size: 20px

#### Quick Font Weight

Add one of these classes to set the font weight.

All size: unset, 100, 200, 300, 400, 500, 600, 700, 800, 900.

Class | Description
--- | ---
`.font-weight-unset` | font-weight: unset
`.font-weight-100` | font-weight: 100

### Box Modal

#### Quick Padding

All size: 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50.

CLASS | DESCRIPTION
--- | ---
`.padding-5` | padding: 5px
`.padding-vertical-5` | padding-top: 5px padding-bottom: 5px
`.padding-horizontal-5` | padding-left: 5px padding-right: 5px
`.padding-top-5` | padding-top: 5px
`.padding-right-5` | padding-right: 5px
`.padding-bottom-5` | padding-bottom: 5px
`.padding-left-5` | padding-left: 5px

#### Quick Margin

All size: 0, 3, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50.

CLASS | DESCRIPTION
--- | ---
`.margin-5` | margin: 5px
`.margin-vertical-5` | margin-top: 5px margin-bottom: 5px
`.margin-horizontal-5` | margin-left: 5px margin-right: 5px
`.margin-top-5` | margin-top: 5px
`.margin-right-5` | margin-right: 5px
`.margin-bottom-5` | margin-bottom: 5px
`.margin-left-5` | margin-left: 5px

#### Quick Height

All size: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500.

Class | DESCRIPTION
--- | ---
`.height-50` | height: 50px
`.height-100` | height: 100px
`.height-150` | height: 150px
`.height-200` | height: 200px
`.height-250` | height: 250px
`.height-300` | height: 300px
`.height-350` | height: 350px
`.height-400` | height: 400px
`.height-450` | height: 450px
`.height-500` | height: 500px

#### Quick Width

All size: 50, 100, 150, 200, 250, 300, 350, 400, 450, 500.

Class | DESCRIPTION
--- | ---
`.width-50` | width: 50px
`.width-100` | width: 100px
`.width-150` | width: 150px
`.width-200` | width: 200px
`.width-250` | width: 250px
`.width-300` | width: 300px
`.width-350` | width: 350px
`.width-400` | width: 400px
`.width-450` | width: 450px
`.width-500` | width: 500px

#### Responsive Height

| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
50px | `.height-xs-50` | `.height-sm-50` | `.height-md-50` | `.height-lg-50`
100px | `.height-xs-100` | `.height-sm-100` | `.height-md-100` | `.height-lg-100`
150px | `.height-xs-150` | `.height-sm-150` | `.height-md-150` | `.height-lg-150`
200px | `.height-xs-200` | `.height-sm-200` | `.height-md-200` | `.height-lg-200`
250px | `.height-xs-250` | `.height-sm-250` | `.height-md-250` | `.height-lg-250`
300px | `.height-xs-300` | `.height-sm-300` | `.height-md-300` | `.height-lg-300`
350px | `.height-xs-350` | `.height-sm-350` | `.height-md-350` | `.height-lg-350`
400px | `.height-xs-400` | `.height-sm-400` | `.height-md-400` | `.height-lg-400`
450px | `.height-xs-450` | `.height-sm-450` | `.height-md-450` | `.height-lg-450`
500px | `.height-xs-500` | `.height-sm-500` | `.height-md-500` | `.height-lg-500`

### Miscellaneous

#### Quick Grid With No Space

`.row` with `.no-space` to set the columns which directly under no space.

col-3
col-3
col-3
col-3
col-6
col-6

#### Display Utilities

Add one of these classes to change the display properties of an element.

Class | Description
--- | ---
`.inline` | Forces the element to behave like an inline element.
`.inline-block` | Forces the element to behave like an inline-block element.
`.block` | Forces the element to behave like a block element.

#### Screen Reader And Keyboard Navigation Content

Hide an element to all devices except screen readers with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.

#### Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

#### Visibility

| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
`.show` | Visible | Visible | Visible | Visible
`.hide` | Hidden | Hidden | Hidden | Hidden
`.visible-xs-*` | Visible | Hidden | Hidden | Hidden
`.visible-sm-*` | Hidden | Visible | Hidden | Hidden
`.visible-md-*` | Hidden | Hidden | Visible | Hidden
`.visible-lg-*` | Hidden | Hidden | Hidden | Visible
`.hidden-xs` | Hidden | Visible | Visible | Visible
`.hidden-sm` | Visible | Hidden | Visible | Visible
`.hidden-md` | Visible | Visible | Hidden | Visible
`.hidden-lg` | Visible | Visible | Visible | Hidden