cross-browser-support

mixins

keyframes

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

Description

Mixin to handle cross browser keyframes for CSS animations.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	Animation name	`String`	—none

prefixer

@mixin prefixer($property, $value, $vendors: 'webkit' 'moz' 'ms' 'o') { ... }

Description

Mixin to prefix properties that are not prefixed by Compass

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$property`	Property to prefix	`String`	—none
`$value`	Value for property	`Any`	—none
`$vendors`	Vendor prefixes to output	`List`	`'webkit' 'moz' 'ms' 'o'`

Example

 @include prefixer('transform', 'translate(10px)');

opacity

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

Description

Mixin for cross-browser opacity (IE 8). Clamps the value between 0 and 1.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$opacity`	Opacity level, between 0 and 1	`Number`	—none

Requires

[mixin] opacity
[function] clamp

Used by

[mixin] opacity

helpers

mixins

clearfix

@mixin clearfix($extend: true) { ... }

Description

Float clearing helper.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$extend`	Whether or not extend a placeholder.	`Bool`	`true`

Requires

[mixin] clearfix

Used by

[mixin] clearfix
[placeholder] clearfix

visually-hidden

@mixin visually-hidden($extend: true) { ... }

Description

Accessibility hiding helper.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$extend`	Whether or not extend a placeholder.	`Bool`	`true`

Requires

[mixin] visually-hidden
[mixin] size

Used by

[mixin] visually-hidden
[placeholder] visually-hidden

ellipsis

@mixin ellipsis($extend: true) { ... }

Description

Accessibility ellipsis helper.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$extend`	Whether or not extend a placeholder.	`Bool`	`true`

Requires

[mixin] ellipsis

Used by

[mixin] ellipsis
[placeholder] ellipsis

General

functions

opposite-direction

@function opposite-direction($directions) { ... }

Description

Returns the opposite direction of every direction in $directions.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$directions`	Positions to revert	`List`	—none

Returns

List or Null

Throws

No opposite direction found for $direction.

clamp

@function clamp($value, $min, $max) { ... }

Description

Clamp $value between $min and $max.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	Value to clamp between `$min` and `$max`	`Number`	—none
`$min`	Minimum value	`Number`	—none
`$max`	Maximum value	`Number`	—none

Returns

Number or Null

Throws

All parameters must be numbers for clamp.

Used by

[mixin] opacity
[mixin] card

z

@function z($layer) { ... }

Description

Helper to manage z-index. Tries to fetch the z-index mapped to $layer in $z-indexes map. If found, returns it, else returns null.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$layer`	Layer	`String`	—none

Returns

Number or Null

Example

z-index: z("default")

Throws

No z-index found for $layer.

Requires

[variable] z-indexes

is-valid-length

@function is-valid-length($value) { ... }

Description

Tests whether the value is a valid length.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$value`	Value to test	`Any`	—none

Returns

Bool

top-shadow

@function top-shadow($depth) { ... }

Description

Computes a top-shadow for a card effect.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$depth`	depth level	`Number`	—none

Returns

List

Used by

[mixin] card

bottom-shadow

@function bottom-shadow($depth) { ... }

Description

Computes a bottom-shadow for a card effect.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$depth`	depth level	`Number`	—none

Returns

List

Used by

[mixin] card

placeholders

clearfix

%clearfix { ... }

Description

Clearfix helper

Requires

[mixin] clearfix

ellipsis

%ellipsis { ... }

Description

Accessibility ellipsis helper.

Requires

[mixin] ellipsis

mixins

size

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

Description

Mixin to size elements.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	Width	`Number`	—none
`$height`	Height	`Number`	`$width`

Used by

[mixin] visually-hidden

[private] position

@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) { ... }

Description

Shorthand for positioning.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$position`	Position type (either `absolute`, `fixed` or `relative`)	`String`	—none
`$top`	Top offset	`Length`	`null`
`$right`	Right offset	`Length`	`null`
`$bottom`	Bottom offset	`Length`	`null`
`$left`	Left offset	`Length`	`null`

Requires

[mixin] position

Used by

[mixin] position
[mixin] absolute
[mixin] relative
[mixin] fixed

absolute

@mixin absolute($args...) { ... }

Description

Shorthand for absolute positioning.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$args`	Offsets	`Arglist`	—none

Example

Stretch an item over its parent.

 @include absolute($top: 0, $right: 0, $bottom: 0, $left: 0)

Requires

[mixin] position

relative

@mixin relative($args...) { ... }

Description

Shorthand for relative positioning.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$args`	Offsets	`Arglist`	—none

Requires

[mixin] position

fixed

@mixin fixed($args...) { ... }

Description

Shorthand for fixed positioning.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$args`	Offsets	`Arglist`	—none

Requires

[mixin] position

respond-to

@mixin respond-to($breakpoint) { ... }

Description

Responsive manager.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$breakpoint`	Breakpoint	`String`	—none

Throws

No value found for #{$breakpoint}.

Requires

[variable] breakpoints

inline-block

@mixin inline-block($align: null) { ... }

Description

Mixin handling inline-block and vertical-align at once. If no align is specified, then the vertical-align property won't be output.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$align`	Vertical align	`String`	`null`

card

@mixin card($depth) { ... }

Description

Gives a card depth effect.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$depth`	depth level [between 1 and 5]	`Number`	—none

Requires

[function] clamp
[function] top-shadow
[function] bottom-shadow
[variable] light-grey

on-event

@mixin on-event($self: false) { ... }

Description

Event wrapper.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$self`	Whether or not to include current selector	`Bool`	`false`

Author

Harry Roberts

when-inside

@mixin when-inside($context) { ... }

Description

Contexts

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$context`	—none	`String` or `List`	—none

Author

Hugo Giraudel

variables

pink

$pink: #dd5a6f;

Description

Pink

Type

Color

purple

$purple: #5c4863;

Description

Purple

Type

Color

yellow

$yellow: #ffc93c;

Description

Yellow

Type

Color

black

$black: #333;

Description

Black

Type

Color

primary-color

$primary-color: $pink;

Description

Primary color

Type

Color

secondary-color

$secondary-color: $yellow;

Description

Primary color

Type

Color

tertiary-color

$tertiary-color: $purple;

Description

Primary color

Type

Color

light-grey

$light-grey: #e0e0e0;

Description

Light grey

Type

Color

Used by

[mixin] card

medium-grey

$medium-grey: #ddd;

Description

Medium

Type

Color

breakpoints

$breakpoints: (
  'small':  (max-width: 800px),
  'medium': (min-width: 801px)
) !global;

Description

Map of breakpoints for responsive design.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`small`	small screens	`Map`	`(max-width: 800px)`
`medium`	regular screens	`Map`	`(min-width: 801px)`

Used by

[mixin] respond-to

See

[mixin] respond-to

z-indexes

$z-indexes: (
  'goku':       9001,
  'modal':      5000,
  'dropdown':   4000,
  'social':     3000,
  'default':       1,
  'below':        -1
) !global;

Description

Z-indexes layers.

Type

Map

Map structure

Map keyName	Map keyDescription	Map keyType	Map keyValue
`key`	aliases for specific z-indexes	`Number`	—none

Used by

[function] z

See

[function] z

sidebar-width

$sidebar-width: 280px;

Description

Sidebar width

Type

Number

vertical-rhythm

$vertical-rhythm: 1.5rem;

Description

Vertical rhythm

Type

Number

text-font-stack

$text-font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

Description

Text font stack

Type

List

code-font-stack

$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;

Description

Code font stack

Type

List