General

functions

opposite-direction 

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

Description

Returns the opposite direction of every direction in $directions.

Parameters

Name Description Type Default value
$directions

Positions to revert

 List —

Returns

List, Null

Throws

  • No opposite direction found for $direction.

Used by

clamp 

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

Description

Clamp $value between $min and $max.

Parameters

Name Description Type Default value
$value

Value to clamp between $min and $max

Number —
$min

Minimum value

 Number —
$max

Maximum value

 Number —

Returns

Number, Null

Throws

  • All parameters must be numbers for clamp.

Used by

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

Name Description Type Default value
$layer

Layer

 String —

Returns

Number, Null

Example

z-index: z("default")

Throws

  • No z-index found for $layer.

Requires

Used by

color 

@function color($color) { ... }

Description

Color getter.

Parameters

Name Description Type Default value
$color

Color to fetch

 String —

Returns

Color, Null

Example

color: color("pink");

Throws

  • No color found for $color. Please make sure it is defined in $colors map.

Requires

Used by

is-valid-length 

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

Description

Tests whether the value is a valid length.

Parameters

Name Description Type Default value
$value

Value to test

 Any —

Returns

Bool

Used by

top-shadow 

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

Description

Computes a top-shadow for a card effect.

Parameters

Name Description Type Default value
$depth

depth level

 Number —

Returns

List

Used by

bottom-shadow 

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

Description

Computes a bottom-shadow for a card effect.

Parameters

Name Description Type Default value
$depth

depth level

 Number —

Returns

List

Used by

mixins

size 

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

Description

Mixin to size elements.

Parameters

Name Description Type Default value
$width

Width

 Number —
$height

Height

 Number $width

Used by

[private] position 

@mixin position($position, $args: ()) { ... }

Description

Shorthand for positioning.

Parameters

Name Description Type Default value
$position

Position type (either absolute, fixed or relative)

 String —
$args

List of offsets and values

 List ()

Throws

  • Invalid value $next for offset $offset.

Requires

Used by

Links

absolute 

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

Description

Shorthand for absolute positioning.

Parameters

Name Description Type Default value
$args

List of offsets and values

 List —

Example

Stretch an item over its parent.

 @include absolute(top 0 right 0 bottom 0 left 0)

Requires

Used by

Links

relative 

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

Description

Shorthand for relative positioning.

Parameters

Name Description Type Default value
$args

List of offsets and values

 List —

Requires

Links

fixed 

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

Description

Shorthand for fixed positioning.

Parameters

Name Description Type Default value
$args

List of offsets and values

 List —

Requires

Links

respond-to 

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

Description

Responsive manager.

Parameters

Name Description Type Default value
$breakpoint

Breakpoint

 String —

Throws

  • No value found for $breakpoint. Please make sure it is defined in $breakpoints map.

Requires

triangle 

@mixin triangle($direction, $position, $color: currentcolor, $size: 1em) { ... }

Description

Mixin to fake CSS triangles with border hacks.

Parameters

Name Description Type Default value
$direction

Triangle direction

 String —
$position

Triangle position

 List —
$color

Triangle color

 Color currentcolor
$size

Triangle size

 Number 1em

Throws

  • Direction must be one of top, right, bottom or left.

Requires

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

Name Description Type Default value
$align

Vertical align

 String null

card 

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

Description

Gives a card depth effect.

Parameters

Name Description Type Default value
$depth

depth level (between 1 and 5)

 Number —

Requires

Links

placeholders

clearfix 

%clearfix { ... }

Description

Clearfix helper

Requires

Used by

visually-hidden 

%visually-hidden { ... }

Description

Accessibility hiding helper.

Requires

Used by

variables

colors 

$colors: (
  "pink":         #c6538c,

  "light-purple": #e9e4f1,
  "purple":       #998099,

  "green":        #699,

  "light-grey":   #e0e0e0,
  "medium-grey":  #ddd,
  "dark-grey":    #444,

  "white":        #f9f9f9
) !global;

Description

Map of colors for quick grabbing.

Type

Map

Map structure

Name Description Type Value
pink

pink

 Color #c6538c
light-purple

light purple

 Color #e9e4f1
purple

purple

 Color #998099
green

green

 Color #699
light-grey

light grey

 Color #e0e0e0
medium-grey

medium grey

 Color #ddd
dark-grey

dark grey

 Color #444
white

white

 Color #f9f9f9

Used by

See

breakpoints 

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

Description

Map of breakpoints for responsive design. Like here.

Type

Map

Used by

See

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

Name Description Type Value
key

aliases for specific z-indexes

 Number —

Used by

See

sidebar-width 

$sidebar-width: 280px;

Description

Sidebar width

Type

Number

cross-browser-support

mixins

keyframes 

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

Description

Mixin to handle cross browser keyframes for CSS animations.

Parameters

Name Description Type Default value
$name

Animation name

 String —

prefixer 

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

Description

Mixin to prefix properties that are not prefixed by Compass

Parameters

Name Description Type Default value
$property

Property to prefix

 String —
$value

Value for property

 Any —
$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

Name Description Type Default value
$opacity

Opacity level, between 0 and 1

 Number —

Requires

helpers

mixins

clearfix 

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

Description

Float clearing helper.

Parameters

Name Description Type Default value
$extend

Whether or not extend a placeholder.

 Bool true

Requires

Used by

visually-hidden 

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

Description

Accessibility hiding helper.

Parameters

Name Description Type Default value
$extend

Whether or not extend a placeholder.

 Bool true

Requires

Used by