animations

mixins

keyframes

@mixin keyframes() { ... }

Description

Streamline animations

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

animation

@mixin animation() { ... }

Description

Autoprefix animations

Parameters

None.

buttons

mixins

create-disabled-btn

@mixin create-disabled-btn() { ... }

Description

Create disabled buttons

Parameters

None.

Used by

create-btn

@mixin create-btn() { ... }

Description

Create buttons

Parameters

None.

Requires

Author

  • kymbee

icons

mixins

create-icon

@mixin create-icon($name, $icon) { ... }

Description

Creates pseudo class containing font icon

Parameters

NameDescriptionTypeDefault value
$name

Name of class, ie 'gift' will become '.icon--gift'

String—
$icon

Name of icon you would like to extend, ie '.icon-gift'

String—

Output

.icon--gift { &:before { @extend %icon-gift; } }

Example

@include rem('gift', 'icon-gift');

jacket

mixins

jacket

@mixin jacket() { ... }

Description

Conditional Styles with Sass. Dress you CSS appropriately. Jacket is a Compass component that prints and hides styles based on context variables you set in your stylesheet. Write and maintain a master stylesheet, then output custom tailored stylesheets for modern and legacy browsers, site and app builds, or any other context you can think of.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Links

measurements

functions

calculateEm

@function calculateEm() { ... }

Description

Return EM from PX input

Parameters

None.

Used by

parseInt

@function parseInt() { ... }

Description

Returns boolean

Parameters

None.

Used by

mixins

rem

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

Description

Sets rem values

Parameters

NameDescriptionTypeDefault value
$property

Font-size, margin, etc

String—
$values

Measurement in px (15px 5px)

Number—

Output

ie browsers - padding: 15px 5px; other browsers - padding: 1.5rem 0.5rem;

Example

@include rem(padding, 15px 5px);

Requires

Used by

Links

Author

  • Hugo Giraudel

media queries

mixins

media-query-max-xsmall

@mixin media-query-max-xsmall() { ... }

Description

Extra small devices ONLY (phones, less than 768px)

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Output

@media (max-width: 767px)

Example

@include media-query-max-xsmall

Requires

media-query-below-xsmall

@mixin media-query-below-xsmall() { ... }

Description

Extra small devices ONLY (phones, less than 480px)

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Output

@media (max-width: 479px)

Example

@include media-query-below-xsmall

Requires

media-query-xsmall

@mixin media-query-xsmall() { ... }

Description

Extra small devices (480px and up)

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Output

@media only screen and (min-width: 30em)

Example

@include media-query-xsmall

Requires

media-query-xsmall-small

@mixin media-query-xsmall-small() { ... }

Description

Extra small devices to Small devices(480px to 768px)

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Output

@media (min-width: 30em) and (max-width: 48em)

Example

@include media-query-xsmall-small

Requires

media-query-small

@mixin media-query-small() { ... }

Description

Small devices (tablets, 768px and up)

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Output

@media only screen and (min-width: 48em)

Example

@include media-query-small

Requires

media-query-medium

@mixin media-query-medium() { ... }

Description

Medium devices (desktops, 992px and up)

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Output

@media only screen and (min-width: 62em)

Example

@include media-query-medium

Requires

media-query-large

@mixin media-query-large() { ... }

Description

Large devices (large desktops, 1200px and up)

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Output

@media only screen and (min-width: 75em)

Example

@include media-query-large

Requires

variables

screen-xs

$screen-xs: 480px !default;

Description

Up to mobile portrait

Used by

screen-sm

$screen-sm: 769px !default;

Description

Up to mobile landscape / tablet portrait

Used by

screen-md

$screen-md: 992px !default;

Description

Up to tablet landscape / desktop

Used by

screen-lg

$screen-lg: 1200px !default;

Description

Large desktop

Used by

sprites

mixins

center-horizontally

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

Description

Center an icon (sprite) horizontally

Parameters

None.

center-vertically

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

Description

Center an icon (sprite) vertically

Parameters

None.

General

mixins

[private] -webkit-sibling-fix

@mixin -webkit-sibling-fix() { ... }

Description

Webkit on IOS 7 / 8 does not re-paint when sibling selectors are used The combination of nth-child and tranzlateZ cause the browser to paint any changes.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

create-arrow

@mixin create-arrow($size, $direction, $position, $color) { ... }

Description

Create arrows mixin, based on the CSS version (link provided).

Parameters

NameDescriptionTypeDefault value
$size

ie, 5px

String—
$direction

ie, up | down | left | right

String—
$position

ie, top | bottom | left | right

String—
$color

ie, $color__brand--green

String—

Example

@include create-arrow(5px, up, right, $color__brand--green);

Links

Author

  • kymbee

utility helpers

mixins

vertical-align

@mixin vertical-align() { ... }

Description

Vertically align element in the middle

Parameters

None.