Animation

mixins

animation

@mixin animation($animate) { ... }

Description

Apply animations to element included on using specified animation/keyframe name, duration, delay, etc.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$animate`	comma-seperated list of animations	`String`	— none

Example

@include animation(3s infinite alternate slidein);

keyframes

@mixin keyframes($animationName) { ... }

Description

Create keyframes at-rule with specified name and provided content.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$animationName`	name of animation	`String`	— none

Example

@include keyframes(slidein) {
       from {
           margin-left: 100%;
           width: 300%;
       }

       to {
          margin-left: 0%;
           width: 100%;
       }
  }

Browser & Font

mixins

mobile-only

@mixin mobile-only() { ... }

Description

Apply styles for element included on for mobile phones only.

Parameters

None.

Example

@include mobile-only {
    font-family: 'Mobile-Font';
}

not-phones

@mixin not-phones() { ... }

Description

Apply styles for element included on for all devices but phones.

Parameters

None.

Example

@include not-phones {
    font-family: 'Not-Phones-Font';
}

tablet-portrait

@mixin tablet-portrait() { ... }

Description

Apply styles for element included on for tablets in portrait rotation.

Parameters

None.

Example

@include tablet-portrait {
    font-family: 'Tab-Font';
}

until-tablet-wide

@mixin until-tablet-wide() { ... }

Description

Apply styles for element included on for all devices small or equal to tablet landscape.

Parameters

None.

Example

@include until-tablet-wide {
    font-family: 'Not-Desktop-Font';
}

desktop

@mixin desktop() { ... }

Description

Apply styles for element included on for desktop.

Parameters

None.

Example

@include desktop {
    font-family: 'Desktop-Font';
}

not-desktop

@mixin not-desktop() { ... }

Description

Apply styles for element included on for all devices desktop.

Parameters

None.

Example

@include not-desktop {
    font-family: 'Not-Desktop-Font';
}

css

.small

.small { ... }

Example

<div class="small">I am small text.</div>

.large

.large { ... }

Example

<div class="large">I am large text.</div>

.xx-large

.xx-large { ... }

Example

<div class="xx-large">I am huge text.</div>

.uppercase

.uppercase { ... }

Example

<div class="uppercase">I WILL LOOK LIKE THIS.</div>

.center

.center { ... }

Example

<div class="center">I am centered.</div>

.hidden

.hidden { ... }

Example

<div class="hidden">I am hidden.</div>

.hidden-desktop

.hidden-desktop { ... }

Description

Hide element on all screens larger than tablet.

Example

<div class="hidden-desktop"></div>

.hidden-tablet-plus

.hidden-tablet-plus { ... }

Example

<div class="hidden-tablet-plus"></div>

.hidden-mobile

.hidden-mobile { ... }

Example

<div class="hidden-mobile"></div>

.hidden-not-mobile

.hidden-not-mobile { ... }

Example

<div class="hidden-not-mobile"></div>

General

mixins

placeholder

@mixin placeholder() { ... }

Description

Apply content as text input placeholder.

Parameters

None.

Example

@include placeholder {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: .4em;
    font-weight: 300;
    font-stretch: condensed;
}

transform

@mixin transform($transforms, $force: false) { ... }

Description

Create universal transform properties on element from given transform input.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$transforms`	the tranform(s) function	`Custom-ident`	— none
`$force`	decorate with !important flag (use sparingly, as it breaks natural cascade!)	`Boolean`	`false`

Example

@include transform(scale(.5))

Used by

[mixin] rotate
[mixin] scale
[mixin] scaleX
[mixin] scaleY
[mixin] skew
[mixin] translate

ng-img

@mixin ng-img() { ... }

Description

Apply style content to AngularJS shadow-pierced image

Parameters

None.

Example

@include ng-img {
    margin-top: 1%;
}

css

.no-margin

.no-margin { ... }

Example

<div class="no-margin">I have no margin.</div>

.no-pad

.no-pad { ... }

Example

<div class="no-pad">I have no padding.</div>

Transitions & Transforms

mixins

rotate

@mixin rotate($deg) { ... }

Description

Rotate element included on by given degrees.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$deg`	degrees to rotate	`Decimal`	— none

Example

@include transform(rotate(180))

Requires

[mixin] transform

scale

@mixin scale($scale) { ... }

Description

Scale element included on by given factor.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	the amount to scale	`Decimal`	— none

Example

@include scale(.5)

Requires

[mixin] transform

scaleX

@mixin scaleX($scale) { ... }

Description

Scale element included on by given factor on X axis.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	the amount to scale	`Decimal`	— none

Example

@include scaleX(.5)

Requires

[mixin] transform

scaleY

@mixin scaleY($scale) { ... }

Description

Scale element included on by given factor on Y axis.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	the amount to scale	`Decimal`	— none

Example

@include scaleY(.5)

Requires

[mixin] transform

skew

@mixin skew($x, $y) { ... }

Description

Skew element included on by given x and y degrees.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x`	amount to skew on x	`Number`	— none
`$y`	amount to skew on y	`Number`	— none

Example

@include skew(5, 10)

Requires

[mixin] transform

translate

@mixin translate($x, $y: 0) { ... }

Description

Move/translate element included on by given x and optional y length or percent.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x`	amount to translate on x-axis	`Length`	— none
`$y`	amount to translate on y-axis	`Length`	`0`

Example

@include translate(15%)

Requires

[mixin] transform

transition

@mixin transition($transition-property, $transition-time, $ease-method: ease) { ... }

Description

Apply transition for element given one property, duration, optional easing method

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$transition-property`	property to transition on	`String`	— none
`$transition-time`	duration of transition	`Number`	— none
`$ease-method`	optional ease type/function	`String`	`ease`

Example

@include transition(width, 5s, ease-in-out)

multi-transition

@mixin multi-transition($transitions) { ... }

Description

Apply multiple transitions for element given properties, durations, easing

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$transitions`	comma-seperated list of transitions	`String`	— none

Example

@include multi-transition(width 2s, height 0.3s ease-in-out)

Requires

[function] unfold-transition

functions

unfold-transition

@function unfold-transition($transforms) { ... }

Description

Breaks down in-line transition for multiple properties into unfolded format.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$transforms`	the tranform(s) function	`Custom-ident`	— none

Example

@include(transform(scale(.5)))

Used by

[mixin] multi-transition

Visuals

variables

cloudinary-account

$cloudinary-account: 'cloudinary' !default;

Description

You must specify this var before using the cdn-image function

Used by

[function] cdn-image

cdn-product

$cdn-product: 'homepage' !default;

Description

You must specify this var before using the cdn-image function

Used by

[function] cdn-image

mixins

filter

@mixin filter($type, $amount) { ... }

Description

Apply any type of filter to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$type`	type of filter	`String`	— none
`$amount`	filter amount	`Percentage` or `Decimal`	— none

Example

@include(filter(grayscale, 100%)), etc:
    sepia    -> sepia(100%);
    saturate -> saturate(0%);
hue-rotate     -> filter: hue-rotate(45deg);
invert         -> filter: invert(100%);
brightness     -> filter: brightness(15%);
contrast       -> filter: contrast(200%);
blur           -> filter: blur(2px);

box-shadow

@mixin box-shadow($top, $left, $blur, $color, $inset: false) { ... }

Description

Apply box shadow to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$top`	shadow offset y	`Length`	— none
`$left`	shadow offset x	`Length`	— none
`$blur`	blur size	`Length`	— none
`$color`	shadow color	`Color`	— none
`$inset`	if true, shadow is inside element frame	`Boolean`	`false`

Example

@include(box-shadow(2px, 2px, 2px, 1px, rgba(0, 0, 0, 0.2))

border-radius

@mixin border-radius($top-left-radius, $top-right: null, $bottom-right: null, $bottom-left: null) { ... }

Description

Apply border radius to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$top-left-radius`	either the radius of the border for all corners, or the top-left corner value if others specified	`Length`	— none
`$top-right`	top-right corner value	`Length`	`null`
`$bottom-right`	bottom-right corner value	`Length`	`null`
`$bottom-left`	bottom-left corner value	`Length`	`null`

Example

@include(border-radius(20))

circular-background

@mixin circular-background($color) { ... }

Description

Create a circular background via radial-gradient.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	color of circle	`Color`	— none

Example

@include(circlular-background(#fff);

functions

cdn-image

@function cdn-image($imgName, $options) { ... }

Description

Create inline URL to Cloudinary-hosted image with any specified transforms.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$imgName`	name of image, including path	`String`	— none
`$options`	comma-seperated list of image options/transforms	`String`	— none

Example

background-image: cdn-image('bg/home-bg', f_auto, c_scale, w_1280)

Requires

[variable] cloudinary-account — Cloudinary account name
[variable] cdn-product — Cloudinary folder (product) to use for image path

Animation

mixins

Description

Parameters

Example

Links

Description

Parameters

Example

Browser & Font

mixins

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

css

Example

Example

Example

Example

Example

Example

Description

Example

Example

Example

Example

General

mixins

Description

Parameters

Example

Description

Parameters

Example

Used by

Description

Parameters

Example

Links

css

Example

Example

Transitions & Transforms

mixins

Description

Parameters

Example

Requires

Description

Parameters

Example

Requires

Description

Parameters

Example

Requires

Description

Parameters

Example

Requires

Description

Parameters

Example

Requires

Description