animation

mixins

keyframes

Since 2.0.1
@mixin keyframes($value) { ... }

Description

keyframe mixin

Parameters

NameDescriptionTypeDefault value
$value

name of animation

String—

Content

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

Example

keyframes(width) {
  0% {
    width: 8px;
  }
  100% {
    width: 16px;
  }
}

Author

  • Bernhard Ruoff

animation

Since 2.0.1
@mixin animation($str) { ... }

Description

keyframe animation

Parameters

NameDescriptionTypeDefault value
$str

string for animation

String—

Example

animation(width .4s infinite);

Author

  • Bernhard Ruoff

color-functions

functions

borderColor

Since 2.0.1
@function borderColor($color1, $color2) { ... }

Description

color function to automatically generate a harmonic border-color based on two colors

Parameters

NameDescriptionTypeDefault value
$color1

first color

Variable—
$color2

second color

Variable—

Example

border-color: borderColor($background, $text) // returns #555555

Throws

  • Sorry, but #{$color1} is equal to #{$color2}.

Author

  • Bernhard Ruoff

flattenColor

Since 4.0.0
@function flattenColor($foreground, $background: getColor(background)) { ... }

Description

Mixes a color with another color, considering its opacity

Parameters

NameDescriptionTypeDefault value
$foreground

color to be flattened

Color—
$background

background-color

ColorgetColor(background)

Returns

Color —

$flatColor - flattened color without opacity

Example

color: flattenColor(rgba(black, .2);

Requires

Author

  • Bernhard Ruoff

getColor

Since 3.0.10
@function getColor($color) { ... }

Description

Easily retrieve colors for use.

Parameters

NameDescriptionTypeDefault value
$color

Name of the color

String—

Returns

Color —

Value of the color

Example

color: getColor(text, invert);
color: getColor(link);

Used by

Author

  • Bernhard Ruoff

setColor

Since 2.1.5
@function setColor($color, $setDark: #000, $setLight: #fff) { ... }

Description

sets color based on luminosity of another color

Parameters

NameDescriptionTypeDefault value
$color

Name of base color

Color—
$setDark

Name of dark color

Color#000
$setLight

Name of light color

Color#fff

Returns

Color —

value of $setLight or $setDark

Example

color: setColor(#222222); // returns #fff

Requires

Author

  • Bernhard Ruoff

setLightness

Since 2.0.1
@function setLightness($color, $value) { ... }

Description

set lightness of a color to a specific value

Parameters

NameDescriptionTypeDefault value
$color

Name of base color

Color—
$value

lightness value

Color—

Returns

Color —

value with new value for lightness

Example

color: setLightness(#E51F00, 100); // returns #ff2200

Author

  • Bernhard Ruoff

setSaturation

Since 2.0.1
@function setSaturation($color, $value) { ... }

Description

set saturation of a color to a specific value

Parameters

NameDescriptionTypeDefault value
$color

Name of base color

Color—
$value

saturation value

Color—

Returns

Color —

value with new saturation value

Example

color: setSaturation(#E51F00, 40); // returns #E5968A

Author

  • Bernhard Ruoff

systemColor

Since 2.0.1
@function systemColor($target, $colors: $link $super $minor $highlight) { ... }

Description

generate color based on a set of colors

Parameters

NameDescriptionTypeDefault value
$target

name of target color

Color—
$colors

string of colors

String$link $super $minor $highlight

Returns

Color —

color with harmonic lightness and saturation

Example

color: systemColor(#00E676); // returns a color with a hue value of 151

Requires

Author

  • Bernhard Ruoff

triad

Since 2.0.1
@function triad($base-color, $nth) { ... }

Description

generate two additional colors based on triad color harmony

Parameters

NameDescriptionTypeDefault value
$base-color

Name of base-color

Color—
$nth

selector for color

1 or 2 or 3—

Returns

Color —

return nth triad-color for base-color

Example

color: triad(#5FEFBF, 2); // returns #bf5fef

Author

  • Michael Locher

varColor

Since 2.0.1
@function varColor($source, $amount) { ... }

Description

generate darker or lighter variation

Parameters

NameDescriptionTypeDefault value
$source

source color

Color—
$amount

positive or negative number for color transformation

Number—

Returns

Color —

color variation

Example

color: varColor(#ff0000, 20); // returns color: #fe6e67;

Requires

Links

Author

  • Bernhard Ruoff

variables

hue

Since 2.0.1
$hue: hue($source);

Map structure

NameDescriptionTypeValue
$hue:

hue value of source color

Value—

Used by

Author

  • Bernhard Ruoff

lightness

Since 2.0.1
$lightness: lightness($source);

Map structure

NameDescriptionTypeValue
$lightness:

lightness value of source color

Value—

Used by

Author

  • Bernhard Ruoff

sat

Since 2.0.1
$sat: saturation($source);

Map structure

NameDescriptionTypeValue
$sat:

saturation value of source color

Value—

Used by

Author

  • Bernhard Ruoff

hueRatio

Since 2.0.1
$hueRatio: .15;

Map structure

NameDescriptionTypeValue
$hueRatio:

ratio for increasing or decreasing hue based on $amount

Number—

Used by

Author

  • Bernhard Ruoff

satRatio

Since 2.0.1
$satRatio: .66;

Map structure

NameDescriptionTypeValue
$satRatio:

ratio for increasing or decreasing saturation based on $amount

Number—

Used by

Author

  • Bernhard Ruoff

target

Since 2.0.1
$target: null;

Map structure

NameDescriptionTypeValue
$target:

target color value

Value—

Used by

Author

  • Bernhard Ruoff

alpha

Since 2.0.1
$alpha: alpha($source);

Map structure

NameDescriptionTypeValue
$alpha:

alpha color value

Value—

Used by

Author

  • Bernhard Ruoff

satTransform

Since 2.0.1
$satTransform: $amount * $satRatio;

Map structure

NameDescriptionTypeValue
$satTransform:

value for desaturation

Value—

Used by

Author

  • Bernhard Ruoff

hueTransform

Since 2.0.1
$hueTransform: $amount * $hueRatio;

Map structure

NameDescriptionTypeValue
$hueTransform:

value for hue adjustment

Value—

Used by

Author

  • Bernhard Ruoff

amount

Since 2.0.1
$amount: $amount * -1;

Description

make value of $amount positive for transformation

Used by

Author

  • Bernhard Ruoff

satTransform

Since 2.0.1
$satTransform: $amount * $satRatio;

Map structure

NameDescriptionTypeValue
$satTransform:

value for desaturation

Value—

Author

  • Bernhard Ruoff

hueTransform

Since 2.0.1
$hueTransform: $amount * $hueRatio;

Map structure

NameDescriptionTypeValue
$hueTransform:

value for hue adjustment

Value—

Author

  • Bernhard Ruoff

csss

/// @prop

Since 2.0.1
/// @prop { ... }

Description

if $amount is positive color transformation to lighter and less saturated. also the hue is transformed depending on its value

Author

  • Bernhard Ruoff

/// make value of $amount positive for transformation $amount: $amount * -1; /// @prop

Since 2.0.1
/// make value of $amount positive for transformation
      $amount: $amount * -1;
      /// @prop { ... }

Description

if $amount is negative color transformation to darker and more saturated. also the hue is transformed depending on its value

Author

  • Bernhard Ruoff

grid

csss

[data-flex]

Since 3.0.6
[data-flex] { ... }

Author

  • Bernhard Ruoff

[data-flex]

Since 3.0.6
[data-flex] { ... }

Author

  • Bernhard Ruoff

[data-col]

Since 3.0.0
[data-col] { ... }

Author

  • Bernhard Ruoff

[data-row]

Since 3.0.0
[data-row] { ... }

Author

  • Bernhard Ruoff

mixins

flex-order

Since 3.0.6
@mixin flex-order() { ... }

Parameters

None.

Author

  • Bernhard Ruoff

container

Since 3.0.0
@mixin container() { ... }

Parameters

None.

Requires

Author

  • Bernhard Ruoff

layout

variables

bp-xs

$bp-xs: 0 !default;

Map structure

NameDescriptionTypeValue
$bp-xs

smartphone

Number0

bp-sm

$bp-sm: 480px !default;

Map structure

NameDescriptionTypeValue
$bp-sm

smartphone landscape

Number480px

bp-md

$bp-md: 720px !default;

Map structure

NameDescriptionTypeValue
$bp-md

tablet portrait

Number720px

bp-lg

$bp-lg: 1024px !default;

Map structure

NameDescriptionTypeValue
$bp-lg

Tablet landscape

Number1024px

bp-xl

$bp-xl: 1280px !default;

Map structure

NameDescriptionTypeValue
$bp-xl

Desktop

Number1280px

bp-xxl

$bp-xxl: 1920px !default;

Map structure

NameDescriptionTypeValue
$bp-xxl

Large screens

Number1920px

bp-xs-max

$bp-xs-max: ($bp-sm - 1) !default;

Map structure

NameDescriptionTypeValue
$bp-xs-max—Number$bp-sm - 1

bp-sm-max

$bp-sm-max: ($bp-md - 1) !default;

Map structure

NameDescriptionTypeValue
$bp-sm-max—Number$bp-md - 1

bp-md-max

$bp-md-max: ($bp-lg - 1) !default;

Map structure

NameDescriptionTypeValue
$bp-md-max—Number$bp-lg - 1

bp-lg-max

$bp-lg-max: ($bp-xl - 1) !default;

Map structure

NameDescriptionTypeValue
$bp-lg-max—Number$bp-xl - 1

bp-xl-max

$bp-xl-max: ($bp-xxl - 1) !default;

Map structure

NameDescriptionTypeValue
$bp-xl-max—Number$bp-xxl - 1

root-size

$root-size: 16;

Map structure

NameDescriptionTypeValue
$root-size

default size used for global size calculations

Number16

Used by

  • [function] em
  • [function] rem

grid-container-width

$grid-container-width: 1200px !default;

Map structure

NameDescriptionTypeValue
$grid-container-width

max-width of container

Number1200px

Used by

grid-gutter

$grid-gutter: 32 !default;

Map structure

NameDescriptionTypeValue
$grid-gutter

gutter size in pixels without unit

Number32

Used by

outer-gutter

$outer-gutter: true !default;

Map structure

NameDescriptionTypeValue
$outer-gutter

sets an outer gutter of ($grid-gutter / 2)

Valuetrue

grid-num-columns

$grid-num-columns: 12 !default;

Map structure

NameDescriptionTypeValue
$grid-num-columns

number of columns in a row

Number12

base-padding

$base-padding: 16;

Map structure

NameDescriptionTypeValue
$base-padding

small padding value for padding helper

Number16

mixins

data-col-bp

Since 3.0.9
@mixin data-col-bp($name) { ... }

Description

mixin to generate breakpoints for data-col values

Parameters

NameDescriptionTypeDefault value
$name

name of value

Value—

Content

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

Example

data-col-bp(name) {
  /*some content*/
}

Author

  • Bernhard Ruoff

data-flex-bp

Since 3.0.9
@mixin data-flex-bp($name) { ... }

Description

mixin to generate breakpoints for data-flex values

Parameters

NameDescriptionTypeDefault value
$name

name of value

Value—

Content

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

Example

data-flex-bp(name) {
  /*some content*/
}

Author

  • Bernhard Ruoff

hide

Since 3.0.0
@mixin hide() { ... }

Parameters

None.

Author

  • Bernhard Ruoff

show

Since 3.0.0
@mixin show() { ... }

Parameters

None.

Author

  • Bernhard Ruoff

resets

mixins

appearance

Since 2.0.1
@mixin appearance($value) { ... }

Description

appearance mixin

Parameters

NameDescriptionTypeDefault value
$value—Normal or Icon or Window or Button or Menu or Field or None—

Example

button {
  @include appearance(none);
}

Author

  • Bernhard Ruoff

size-functions

functions

em

Since 2.0.1
@function em($value, $base: $root-size) { ... }

Description

Converts a px value into a em value

Parameters

NameDescriptionTypeDefault value
$value

value in pixels

Number—
$base

16 !default

Number$root-size

Returns

Number —

Value in em

Example

font-size: em(16); // returns 1em
line-height: em(24, 12); // returns 2em

Requires

Used by

Author

  • Bernhard Ruoff

nearest

Since 3.0.5
@function nearest($base, $multiplier, $divider: 2) { ... }

Description

Use this function calculate a value that is dividable by a certain value.

Parameters

NameDescriptionTypeDefault value
$base

base value

Number—
$multiplier

value of the multiplier

Number—
$divider

value of the divider

Number2

Returns

Number —

Value, which is dividable by the $divider

Author

  • Bernhard Ruoff

rem

Since 2.0.1
@function rem($value, $base: $root-size) { ... }

Description

Converts a px value into a rem value

Parameters

NameDescriptionTypeDefault value
$value

value in pixels

Number—
$base

16 !default

Number$root-size

Returns

Number —

Value in rem

Example

width: rem(32); // returns 2rem

Requires

Used by

Author

  • Bernhard Ruoff

[private] trump

Since 2.0.1
@function trump($vote: 3, $wall: null) { ... }

Description

function to make america a fraction of 100% great again!

Parameters

NameDescriptionTypeDefault value
$vote

divider

Number3
$wall

see for yourself

Stringnull

Returns

Number —

Value in %

Author

  • Bernhard Ruoff

styling

mixins

background-size

Since 2.0.1
@mixin background-size($var) { ... }

Description

cross-browser mixin for background-size

Parameters

NameDescriptionTypeDefault value
$var—Auto or Length or Cover or Contain or Initial or Inherit—

Author

  • Bernhard Ruoff

border-radius

Since 2.0.1
@mixin border-radius($radius) { ... }

Description

cross-browser mixin for border-radius

Parameters

NameDescriptionTypeDefault value
$radius

can be multiple arguments

Value—

Author

  • Bernhard Ruoff

box-shadow

Since 2.0.1
@mixin box-shadow($value) { ... }

Description

cross-browser mixin for box-shadow

Parameters

NameDescriptionTypeDefault value
$value

can be multiple arguments

Value—

Example

box-shadow(0 4px 16px rgba(black, .2), 0 4px 32px rgba(red, .1));

Author

  • Bernhard Ruoff

macro-metrics

Since 4.0.0
@mixin macro-metrics($font-size, $line-height, $min-height, $border: null) { ... }

Description

mixin for precise macro element sizing

Parameters

NameDescriptionTypeDefault value
$font-size

font-size of element

Number—
$line-height

line-height of element

Number—
$min-height

min-height of element

Number—
$border

size of element border

Numbernull

Content

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

Requires

Author

  • Bernhard Ruoff

General

functions

gcd

@function gcd() { ... }

Parameters

None.

Links

luma

@function luma() { ... }

Parameters

None.

Example

color: text-contrast(#B0C4DE);

Requires

Links

convert-angle

@function convert-angle($value, $unit) { ... }

Description

Convert angle

Parameters

NameDescriptionTypeDefault value
$value

Value to convert

Number—
$unit

Unit to convert to

String—

Returns

Number —

Converted angle

Used by

Author

  • Chris Eppstein

is-direction

@function is-direction($value) { ... }

Description

Test if $value is an angle

Parameters

NameDescriptionTypeDefault value
$value

Value to test

Any—

Returns

Bool

Used by

legacy-direction

@function legacy-direction($value) { ... }

Description

Convert a direction to legacy syntax

Parameters

NameDescriptionTypeDefault value
$value

Value to convert

Keyword or Angle—

Requires

Used by

variables

rgba

$rgba: red($color), green($color), blue($color);

Description

Adapted from: https://gist.github.com/voxpelli/6304812

Used by

mixins

linear-gradient

@mixin linear-gradient($direction, $color-stops...) { ... }

Description

Mixin printing a linear-gradient as well as a plain color fallback and the -webkit- prefixed declaration

Parameters

NameDescriptionTypeDefault value
$direction

Linear gradient direction

String or List or Angle—
$color-stops

List of color-stops composing the gradient

Arglist—

Requires

set-colors

Since 4.0.0
@mixin set-colors($color, $hue: $color) { ... }

Description

sets background-color and matching text-color with

Parameters

NameDescriptionTypeDefault value
$color

color value

Color—
$hue

color value for hue orientation

Color$color

Example

include set-colors(getColor(link));

Requires

Author

  • Bernhard Ruoff

setText

Since 3.0.5
Deprecated!

since 4.0.0

@mixin setText($color) { ... }

Description

sets background-color and matching text-color with

Parameters

NameDescriptionTypeDefault value
$color

color map values

String—

Example

include setText(base, super);

Requires

Author

  • Bernhard Ruoff