Mixins

Triangle

Sass:

.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
display: block;
}

.triangle-left {
@include triangle('left', $crispy__color-primary);
}

.triangle-right {
@include triangle('right', $crispy__color-primary);
}

.triangle-top {
@include triangle('top', $crispy__color-primary);
}

.triangle-bottom {
@include triangle('bottom', $crispy__color-primary);
}

Media Queries

These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. Reflex-Grid is also used as grid for this Site.

• xs 576px
• sm 768px
• md 992px
• lg 1200px
• xlg 1600px

Html:

<div class="sm">sm</div>
<div class="md">md</div>
<div class="md-only">md-only</div>
<div class="lg-only">lg-only</div>

Sass:

.sm, .md, .md-only, .lg-only {
display: none;
}

.sm {
@include crispy__media-sm() {
display: block;
}
}

.md {
@include crispy__media-md() {
display: block;
}
}

.md-only {
@include crispy__media-md-only() {
display: block;
}
}

.lg-only {
@include crispy__media-lg-only() {
display: block;
}
}