General

mixins

respond-from

@mixin respond-from($min) { ... }

Description

Simpliies media query for min-width.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min

Respond From

Number none

Example

from 60em and higher

@include respond-from(60em) {
  li {
     width: 25%;
  }
}

respond-until

@mixin respond-until($max) { ... }

Description

Simpliies media query for max-width.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$max

Respond Until

Number none

Example

till 30em

@include respond-until(30em) {
  li {
     width: 100%;
  }
}

respond-between

@mixin respond-between($min, $max) { ... }

Description

Simpliies media query for min-width and max-width.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min

Respond From

Number none
$max

Respond Til

Number none

Example

between 30em and 60em

@include respond-between(30em, 60em) {
  li {
     width: 50%;
  }
}

size

@mixin size($width, $height: $width) { ... }

Description

Sets width and height for an element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Width

Number none
$height

Height

Number$width

Example

width and height of 100px

.foo {
  @include size(100px);
}

width of 600px and height of 400px

.bar {
  @include size(600px, 400px);
}

trbl

@mixin trbl($coords) { ... }

Description

Shortcut for top, right, bottom, left properties.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$coords

top, right, bottom, left values

List none

Example

top 50vh, right 25%, bottom 25% left 10rem

.foo {
  @include trbl(50vh, 25%, 25%, 10rem);
}

all values 0

.bar {
  @include trbl(0);
}

clearfix

@mixin clearfix() { ... }

Description

Provides an easy way to include a clearfix for containing floats.

Parameters

None.

Example

clearing float on .element

.element {
  @include clearfix;
}

center-background

@mixin center-background($size: cover) { ... }

Description

Center a background image.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

vertical, horizontal

Stringcover

Example

Center an image

.foo {
  @include center-background;
}

center-transform

@mixin center-transform($direction) { ... }

Description

Center an absolutely positioned element using transform.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$direction

vertical, horizontal

String none

Example

Center both vertically and horizontally

.foo {
  @include center;
}

Center vertically

.bar {
  @include center(vertical);
}

Center horizontally

.bar {
  @include center(horizontal);
}

center-flex

@mixin center-flex($direction: column) { ... }

Description

Center using flexbox.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$direction

row, column

Stringcolumn

Example

Center an image

.foo {
  @include center-flex;
}

center-margins

@mixin center-margins() { ... }

Description

Center horizontally.

Parameters

None.

Example

Center an image

.foo {
  @include center-margins;
}

rem

@mixin rem($property, $px-values) { ... }

Description

Coverts px units to rem.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$property

css property

String none
$px-values

property values in px

String none

Example

Convert font-size to rem from px

.el {
    @include rem('font-size', 16px);
}