General

functions

opposite-direction

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

Description

Returns the opposite direction of every direction in $directions.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$directions

Positions to revert

List none

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

parameter Name parameter Description parameter Type parameter Default value
$value

Value to clamp between $min and $max

Number none
$min

Minimum value

Number none
$max

Maximum value

Number none

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

parameter Name parameter Description parameter Type parameter Default value
$layer

Layer

String none

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

parameter Name parameter Description parameter Type parameter Default value
$color

Color to fetch

String none

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

parameter Name parameter Description parameter Type parameter Default value
$value

Value to test

Any none

Returns

Bool

Used by

top-shadow

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

Description

Computes a top-shadow for a card effect.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$depth

depth level

Number none

Returns

List

Used by

bottom-shadow

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

Description

Computes a bottom-shadow for a card effect.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$depth

depth level

Number none

Returns

List

Used by

mixins

size

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

Description

Mixin to size elements.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$width

Width

Number none
$height

Height

Number $width

Used by

[private] position

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

Description

Shorthand for positioning.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$position

Position type (either absolute, fixed or relative)

String none
$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

parameter Name parameter Description parameter Type parameter Default value
$args

List of offsets and values

List none

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

parameter Name parameter Description parameter Type parameter Default value
$args

List of offsets and values

List none

Requires

Links

fixed

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

Description

Shorthand for fixed positioning.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$args

List of offsets and values

List none

Requires

Links

respond-to

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

Description

Responsive manager.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$breakpoint

Breakpoint

String none

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

parameter Name parameter Description parameter Type parameter Default value
$direction

Triangle direction

String none
$position

Triangle position

List none
$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

parameter Name parameter Description parameter Type parameter Default value
$align

Vertical align

String null

card

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

Description

Gives a card depth effect.

Parameters

parameter Name parameter Description parameter Type parameter Default value
$depth

depth level (between 1 and 5)

Number none

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

Map key Name Map key Description Map key Type Map key 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

Map key Name Map key Description Map key Type Map key Value
key

aliases for specific z-indexes

Number none

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

parameter Name parameter Description parameter Type parameter Default 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

parameter Name parameter Description parameter Type parameter Default 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

parameter Name parameter Description parameter Type parameter Default value
$opacity

Opacity level, between 0 and 1

Number none

Requires

helpers

mixins

clearfix

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

Description

Float clearing helper.

Parameters

parameter Name parameter Description parameter Type parameter 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

parameter Name parameter Description parameter Type parameter Default value
$extend

Whether or not extend a placeholder.

Bool true

Requires

Used by