# Helpers

## Border

.round
.radiusless
.bordered
.rounded
.borderless

## Margin / Padding

Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each direction to zero.

### SCSS:

    $crispy__helpers__spacing-gap: 8px;
    $crispy__helpers__spacing-steps: 6;
    $crispy__helpers__spacing-max-steps: 3;
    $crispy__helpers__spacing-breakpoints: (
        $crispy__md: 12px
    );

padding-bottom-0
padding-bottom-1
padding-bottom-2
padding-bottom-3
padding-bottom-4
padding-bottom-5
padding-bottom-6
paddingless
marginless

## Typography

text-left

text-center

text-right

text-justify
I'm baby literally tousled ramps 8-bit franzen, yuccie before they sold out stumptown XOXO palo santo. Blog taiyaki vegan crucifix. Mustache raw denim shabby chic vegan hexagon aesthetic deep v tofu man braid church-key pork belly unicorn pinterest. Palo santo heirloom banh mi waistcoat, neutra listicle selvage sustainable adaptogen tote bag art party migas ethical PBR&B 8-bit. Chillwave hammock VHS post-ironic, tumblr brunch normcore blue bottle chambray. Austin vice microdosing celiac. Bushwick blog farm-to-table succulents mlkshk actually.

text-italic

text-light

text-normal

text-medium

text-bold

text-capitalize

text-uppercase

text-smaller

text-crossed

text-underline

## Font Size

### SCSS:

    $crispy__font-size: 0.9rem;
    $crispy__font-size-breakpoints: (
        $crispy__md: 1.1rem
    );

    $crispy__font-sizes: (
        'default' : $crispy__font-size,
        'small'   : $crispy__font-size * 0.75,
        'medium'  : $crispy__font-size * 1.25,
        'large'   : $crispy__font-size * 1.5,
        'big'     : $crispy__font-size * 1.75,
        'mega'    : $crispy__font-size * 2,
    );

text-size-small

text-size-medium

text-size-large

text-size-big

text-size-mega

## Float

float-left

float-right

float-none

centered

## Colors

### SCSS:

    $crispy__colors: (
        'primary'    : $crispy__color-primary,
        'secondary'  : $crispy__color-secondary,
        'success'    : $crispy__color-success,
        'warning'    : $crispy__color-warning,
        'danger'     : $crispy__color-danger,
        'info'       : $crispy__color-info,
        'grey'       : $crispy__color-grey,
        'grey-light' : $crispy__color-grey-light,
        'grey-dark'  : $crispy__color-grey-dark,
        'white'      : $crispy__color-white
    );

text-color-danger

background-color-info

border-color-success

## Hide & Show

For each Breakpoint there is a hide & show-CSS-Class.

### Html:

    <span class="hide"></span>
    <span class="show"></span>
    <span class="show-inline"></span>
    <span class="show hide-lg"></span>

## Width

### SCSS:

    $crispy__helpers__width: (
        '25' : 25%,
        '50' : 50%,
        '75' : 75%,
        '100': 100%
    );

width-25
width-50
width-75
width-100