Crispy CSS

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