core - bem

mixins

element

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

Description

Build a BEM Element

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Element name

String none

Content

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

Example

scss

.test {
  height: 200px;
  @include element(mod) {
    color: red;
  }
}

css

.test {
  height: 200px;
}
.test__mod {
  color: red;
}

modifier

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

Description

Build a BEM Modifier. Add a Modification Class (independent form parent style)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Modifier name

String none

Content

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

Example

scss

.test {
  height: 200px;
  @include modifier(mod) {
    color: red;
  }
}

css

.test {
  height: 200px;
}
.test--mod {
  color: red;
}

instance

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

Description

Build a BEM Instance. Use the parent style and combine it with the instance class.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Instance name

String none

Content

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

Example

scss

.test {
  display: inline-block;
  @include instance(instance) {
    height: 200px;
  }
}

css

.test, .test---instance {
  display: inline-block;
}
.test---instance {
  height: 200px;
}

chainroot

@mixin chainroot() { ... }

Description

Setup the Root Element for multiple chained Modifiers.

Parameters

None.

Content

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

Example

scss

.test {
  @include chainroot {
   content: hello;
  }
}

css

.test, [class^="test"] {
  content: hello;
}

chain

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

Description

Build the multiple chain modifier

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Modifier names

String none

Content

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

Example

scss

.main {
  @include chain(smaller) {
    width: 300px;
  }

  @include chain(fill) {
    background-color: red;
  }
}

css

[class^="main"][class*="--smaller"] {
  width: 300px;
}

[class^="main"][class*="--fill"] {
  background-color: red;
}

core - breakpoints

functions

bp

@function bp($target, $entries) { ... }

Description

Pick the Values from the Breakpoint Map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$target

Selected Breakpoint

String none
$entries

Connection to the Breakpoint Map

Map none

Returns

Number

Return the breakpoint width

Example

@media screen and (min-width: bp(2) ){ ... }

Used by

mixins

[private] _breakmode

@mixin _breakmode($size, $mode, $dimension) { ... }

Description

Generate the Between Block

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$mode

Direction Mode

String none
$dimension

Dimension [default: width]

String none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Style declatation inside the Media Bubble]

Used by

[private] _breakbetween

@mixin _breakbetween($size-1, $size-2, $dimension) { ... }

Description

Generate the Between Block

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size-1

First Size

Number none
$size-2

Second Size

Number none
$dimension

Dimension [default: width]

String none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Style declatation inside the Media Bubble]

Used by

break

@mixin break($target, $mode: auto, $list: $kittn-breakpoint-map, $dimension) { ... }

Description

Get a breakpoint from the Map and build the Media Query

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$target

Required Breakpoint (from map)

Any none
$mode

Media Query Mode. (max, min, auto)

Stringauto
$list

Connection to the Breakpoint Map

Map$kittn-breakpoint-map
$dimension

Dimension [default: width]

String none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Style declatation inside the Media Bubble]

Example

scss

.box {
  height: 20px;
  @include break('4') {
    height: 200px;
  }
}

.box2 {
  @include break(330px, max) {
    display: none;
  }
}
.between {
  @include break('2' '5') {
    display: block;
  }
}

css

.box {
  height: 20px;
}
@media screen and (min-width: 768px) {
  .box {
    height: 200px;
  }
}
@media screen and (max-width: 331px) {
 .box {
   display: none; } }
@media screen and (min-width: 480px) and (max-width: 961px) {
  .between {
    display: block; } }

Requires

core - colors

functions

luma

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

Description

Calculate the Luma Value from a Color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color Value

Color none

Returns

Number

Example

scss

.test {
  content: luma(red);
}

Used by

luma-gte

@function luma-gte($color2, $color1) { ... }

Description

Check if Color1 is greater than Color2.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color2

Color Value

Color none
$color1

Color Value

Color none

Returns

Bool

Example

scss

@if luma-gte(red, blue) {}

Requires

luma-lte

@function luma-lte($color1, $color2) { ... }

Description

Check if Color1 is smaller than Color2.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color1

Color Value

Color none
$color2

Color Value

Color none

Returns

Bool

Example

scss

@if luma-lte(red, blue) {}

Requires

luma-diff

@function luma-diff($color1, $color2) { ... }

Description

Calculate the Luma Difference between Color1 and Color2

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color1

Color Value

Color none
$color2

Color Value

Color none

Returns

Number

Example

scss

.test {
  content: luma-diff(red, blue);
}

Requires

tint

@function tint($color, $amount, $tint-color: #fff) { ... }

Description

Tint up the Color - normally mix with white

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color value

Color none
$amount

Mix Value

Number none
$tint-color

Color for Tint

Color#fff

Returns

Color

Example

scss

.test {
  color: tint(#00e5ff,20);
}

Requires

shade

@function shade($color, $amount, $shade-color: #000) { ... }

Description

Shade down the Color - normally mix with black

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color value

Color none
$amount

Mix Value

Number none
$shade-color

Color for shade

Color#000

Returns

Color

Example

scss

.test {
  color: shade(#00e5ff,10);
}

Requires

c

@function c($target, $key, $map) { ... }

Description

Pick the Color Values from the Color Map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$target

Desired color

String none
$key

Optional Key (default: color)

String none
$map

Color Map [$kittn-color-map]

Map none

Returns

Color

Example

scss

.box {
  color: c('white');
  background-color: c('primary');
}

Requires

color-scale

@function color-scale($color, $steps: 2, $pointer: false) { ... }

Description

Build a Color list with eval steps

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color Values

List none
$steps

Number off steps to reach the other color

Number2
$pointer

Move the Pointer to one Color Value from the list

Numberfalse

Returns

List

Returns a List off colors or one color value

Example

scss

.test {
  content: color-scale(red blue, 20, 5);
  content: color-scale(red yellow, 10);
}

css

.test {
  content: #c90036;
  content: red #ff1c00 #ff3900 #ff5500 #ff7100 #ff8e00 #ffaa00 #ffc600 #ffe300 yellow;
}

Requires

color-stack

@function color-stack($color, $stacks) { ... }

Description

Build an individual Color Stack

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color Values

List none
$stacks

Individual steps between the color mix

List none

Returns

List

Example

scss

.test {
  content: color-stack(red blue,2 3 4 5 10);
  content: color-stack(red yellow, 1 5 10);
}

css

.test {
  content: #0500fa #0800f7 #0a00f5 #0d00f2 #1900e6;
  content: #fffc00 #fff200 #ffe600;
}

Requires

core - eqcss

functions

[private] _eq

@function _eq($conditions...) { ... }

Description

Generate Elementquery

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$conditions

1+ of Maps of EQCSS conditions

Arglist none

Returns

String

Element Query

Throws

  • element query must include at least one condition

  • element query conditions must be a map

Used by

mixins

eq

@mixin eq($conditions...) { ... }

Description

EQCSS

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$conditions

1+ of Maps of EQCSS conditions

Arglist none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Style declatation inside the EQCSS Bubble]

Example

scss

.parent {
  @include eq((min-width: 500px)) {
    eq_this {
      display: flex;
    }
  }
}

css

@element '.parent' and (min-width: 500px) {
  eq_this {
    display: flex; } }

Requires

eqr

@mixin eqr($root, $conditions...) { ... }

Description

EQCSS with Root Reference

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$root

Root Selector

String none
$conditions

1+ of Maps of EQCSS conditions

Arglist none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Style declatation inside the EQCSS Bubble]

Example

scss

.child {
  @include eqr('.root', (min-width: 500px)) {
    flex: 1;
  }
}

css

@element '.root' and (min-width: 500px) {
  .child {
    flex: 1 1 0%; } }

Requires

core - family

mixins

first

@mixin first($num) { ... }

Description

Select all children from the first to $num.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

last

@mixin last($num) { ... }

Description

Select all children from the last to $num.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

after-first

@mixin after-first($num) { ... }

Description

Select all children after the first to $num.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

from-end

@mixin from-end($num) { ... }

Description

Select all children before $num from the last.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

between

@mixin between() { ... }

Description

Select all children between $first and $last.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

pair-between

@mixin pair-between() { ... }

Description

Select all even children between $first and $last.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

impair-between

@mixin impair-between() { ... }

Description

Select all odd children between $first and $last.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

n-between

@mixin n-between() { ... }

Description

Select all $num children between $first and $last.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

all-but

@mixin all-but($num) { ... }

Description

Select all children but $num.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

every

@mixin every($num) { ... }

Description

Select children each $num.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

from-first-last

@mixin from-first-last($num) { ... }

Description

Select the $num child from the start and the $num child from the last.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

middle

@mixin middle($num) { ... }

Description

Select the item in the middle of $num child. Only works with odd number chain.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

all-but-first-last

@mixin all-but-first-last($num) { ... }

Description

Select all children between the $num first and the $num last.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

id of the child

Number none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

first-of

@mixin first-of($limit) { ... }

Description

This I/O mixin will only select the first of $limit items. It will not work if there is not as much as item as you set in $limit.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$limit noneNumber none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

last-of

@mixin last-of($limit) { ... }

Description

This I/O mixin will only select the last of $limit items. It will not if there is not as much as item as you set in $limit.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$limit noneNumber none

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

even

@mixin even() { ... }

Description

Select all even children.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

odd

@mixin odd() { ... }

Description

Select all odd children.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

first-last

@mixin first-last() { ... }

Description

Select only the first and last child.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

only

@mixin only() { ... }

Description

Will only select the child if it’s unique.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

not-unique

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

Description

Will only select children if they are not unique. Meaning if there is at least 2 children, the style is applied.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

child-index

@mixin child-index($num, $direction: forward, $index: 0) { ... }

Description

This mixin is used to automatically sort z-index in numerical order. But it can also sort them in anti-numerical order, depending the parameters you use.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

Number of children

Number none
$direction

Direction of the sort

Stringforward
$index

Index of the sorting

Number0

Content

This mixin allows extra content to be passed (through the @content directive). Role: [Write the style you want to apply to the children, and it will be added within the @content directive]

Requires

functions

[private] order-index

@function order-index($num, $index) { ... }

Description

Used by the child-index mixin. It will returned the proper sorted numbers depending on the $index value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$num

Number of children

Number none
$index

Index of the sorting

Number none

Used by

core - fluidtype

mixins

fluid-type

@mixin fluid-type($min-value, $max-value, $properties, $min-vw, $max-vw) { ... }

Description

Mixin for Fluidtype

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min-value

Min Fontsize in px

List none
$max-value

Max Fontsize in px

List none
$properties

Property-List (margin, padding, font-size...)

List none
$min-vw

Min Viewport Width in VW

List none
$max-vw

Max Viewport Width in VW

List none

Example

scss

.test {
  @include ft(18px, 24px, padding-left padding-right);
}

Requires

fontface

@mixin fontface($fontname, $o, $o.name: false, $o.weight: normal, $o.style: normal, $o.short: true) { ... }

Description

Generate the Font-Face

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$fontname

Fontname

String none
$o

Setup args

Map none
$o.name

Desired filename, otherwise use the Fontname

Stringfalse
$o.weight

Fontweight

Stringnormal
$o.style

Fontstyle

Stringnormal
$o.short

Use the Short Fontface Declaration

Booltrue

Example

scss

@include fontface(myArial,(
  filename: 'arial'
));
@include fontface(myVerdana, (
  short: false
));

css

@font-face {
  font-family: myArial;
  src: url("../fonts/arial.woff2") format("woff2"),
       url("../fonts/arial.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: myVerdana;
  src: url("../fonts/myVerdana.eot");
  src: url("../fonts/myVerdana.eot?#iefix") format("eot"),
       url("../fonts/myVerdana.woff") format("woff"),
       url("../fonts/myVerdana.ttf") format("truetype"),
       url("../fonts/myVerdana.svg#myVerdana") format("svg");
  font-weight: normal;
  font-style: normal;
}

Used by

core - fontfamily

functions

ff

@function ff($family, $append) { ... }

Description

Function for including Font Families from the Fontstack list. It is also possible to prepand own Fonts to the Stack

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$family

Font-Family from the Stack

String none
$append

Additional Fonts that prepend to the list

List none

Example

scss

.text {
  font-family: ff('helvetica');
  font-family: ff('arial', 'Montserrat');
}

css

.text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: "Montserrat", Arial, sans-serif;
}

Requires

core - inspect

functions

check-args

@function check-args($map, $list, $key) { ... }

Description

Check if the keys are available in the map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Agumentlist map

Map none
$list

List with Arguments

String none
$key

Argument

String none

Returns

Bool

Used by

is-true

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

Description

Checks if a Value is included

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Included value to check

Any none

Returns

Bool

is-map

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

Description

Checks if Value is a map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Included value to check

Any none

Returns

Bool

is-list

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

Description

Checks if Value is a list

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Included value to check

Any none

Returns

Bool

is-number

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

Description

Checks if Value is a number

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Included value to check

Any none

Returns

Bool

Used by

is-string

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

Description

Checks if Value is a string

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Included value to check

Any none

Returns

Bool

Used by

is-not-string

@function is-not-string($value) { ... }

Description

Checks if Value is not a string

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Included value to check

Any none

Returns

Bool

is-nested

@function is-nested() { ... }

Description

Check if the Selector is nested

Parameters

None.

Returns

Bool

map-filled

@function map-filled($map) { ... }

Description

Check if a map has entries

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none

Returns

Bool

Used by

  • [function] c
  • [function] ff

strip-units

@function strip-units($number) { ... }

Description

Strip Units from Values

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

Value

Number none

Returns

Number

Value without units

Example

scss

.box {
  $s: 25px;
  width: strip-units($s) + 0%;
}

css

.box {
  width: 25%;
}

Used by

unit-check

@function unit-check($value) { ... }

Description

Add the Default Unit on unitless Values

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Value

Number none

Returns

Number

Example

scss

.box {
  $s: 25;
  width: unit-check($s);
}

css

.box {
  width: 25px;
}

Used by

clamp

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

Description

Clamp a Number between a min and max values, Perfect for percentage

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The Value that need to be clamped

Number none
$min

The possible minimal value

Number none
$max

The possible max Value

Number none

Returns

Number

Clamped Value

Example

scss

.box {
  $s1: 25;
  $s2: 13;
  width: clamp($s1, 5, 20) + 0px;
  height: clamp($s2, 5, 20) + 0px;
}

css

.box {
  width: 20px;
  height: 13px;
}

Used by

mixins

warn-args

@mixin warn-args($map, $list, $key, $name) { ... }

Description

Add a warning to the Console when the wrong Keyword is used

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Agumentlist map

Map none
$list

List with Arguments

String none
$key

Argument

String none
$name

Name from the Mixin that drop the Warning

String none

Requires

Used by

core - maps

functions

map-deep-get

@function map-deep-get($map, $keys) { ... }

Description

Easier way to get values from a nested map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map that

Map none
$keys

Keys to fetch

Args none

Returns

Map

Example

scss

.text {
  font-size: map-deep-get($typo, h1, font-size) + px;
}

css

.text {
  font-size: 36px;
}

map-deep-set

@function map-deep-set($map, $keys, $value) { ... }

Description

Easier way to set values from a nested map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to update

Map none
$keys

Keys to access to value to update

Args none
$value

New value (last member of $keys)

Any none

Returns

Map

Updated map

Example

scss

$test: (
  name: kittn,
  type: toolkit
);

.text {
  $test: map-deep-set($test,type, css);
  content: map-deep-get($test,type);
}

css

.text {
  content: css;
}

Author

  • Hugo Giraudel

map-has-keys

@function map-has-keys($map, $keys) { ... }

Description

Test if map got all $keys at first level

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none
$keys

Keys to test

Args none

Returns

Bool

Example

scss

$test: (
  name: kittn,
  type: toolkit
);

.text {
  content: map-has-keys($test,type);
}

css

.text {
  content: true;
}

Author

  • Hugo Giraudel

map-has-nested-keys

@function map-has-nested-keys($map, $keys) { ... }

Description

Test if map got all $keys nested with each others

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none
$keys

Keys to test

Args none

Returns

Bool

Example

scss

$test: (
  name: kittn,
  type: toolkit
);

.text {
  content: map-has-nested-keys($test,type);
}

css

.text {
  content: true;
}

Author

  • Hugo Giraudel

map-zip

@function map-zip($keys, $values) { ... }

Description

An equivalent of zip function but for maps. Takes two lists, the first for keys, second for values.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$keys

Keys for map

List none
$values

Values for map

List none

Returns

Map

Freshly created map

Example

scss

$keys: name, type;
$values: kittn, toolkit;
$new-map: map-zip($keys,$values);

css

$new-map: (
  name: kittn,
  type: toolkit
);

map-extend

@function map-extend($map, $maps, $deep) { ... }

Description

Merge Maps recursive

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

first map

Map none
$maps

other maps

Args none
$deep

recursive mode

Bool none

Returns

Map

map-get-length

@function map-get-length($map) { ... }

Description

Map get length (non recursive)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Main Map

$map none

Returns

Number

Length from the Map

Used by

map-first-index

@function map-first-index($map) { ... }

Description

Map Get First Index

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Main Map

$map none

Returns

Number

First Key Index

map-last-index

@function map-last-index($map) { ... }

Description

Map Get Last Index

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Main Map

$map none

Returns

Number

Last Key Index

Requires

core - placeholder

mixins

antialias

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

Description

Activate Antialias on Webkit Browsers

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include antialias();
}
@include break(4) {
  .box-2 {
    @include antialias(false);
  }
}

css

.box-1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 768px) {
  .box-2 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

block-center

@mixin block-center($extend: true) { ... }

Description

Shorthand for centering Elements

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include block-center();
}
.box-2 {
  @include block-center();
}
@include break(4) {
  .box-3 {
    @include block-center(false);
  }
}

css

.box-1, .box-2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  .box-3 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

clearfix

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

Description

Close Floats

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include clearfix();
}
.box-2 {
  @include clearfix();
}
@include break(4) {
  .box-3 {
    @include clearfix(false);
  }
}

css

.box-1:after, .box-2:after {
  content: '';
  display: table;
  clear: both;
}
@media screen and (min-width: 768px) {
  .box-3:after {
    content: '';
    display: table;
    clear: both;
  }
}

Used by

cleartext-complex

@mixin cleartext-complex($extend: true) { ... }

Description

Text Replacement Method from HTML5 Boilerplate

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include cleartext-complex();
}
.box-2 {
  @include cleartext-complex();
}
@include break(4) {
  .box-3 {
    @include cleartext-complex(false);
  }
}

css

.box-1, .box-2 {
  background-color: transparent;
  border: 0;
  overflow: hidden;
}
.box-1:before, .box-2:before {
  content: '';
  display: block;
  width: 0;
  height: 150%;
}
@media screen and (min-width: 768px) {
  .box-3 {
    background-color: transparent;
    border: 0;
    overflow: hidden;
  }
  .box-3:before {
    content: '';
    display: block;
    width: 0;
    height: 150%;
  }
}

cleartext-simple

@mixin cleartext-simple($extend: true) { ... }

Description

Simpler Cleartext

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include cleartext-simple();
}
.box-2 {
  @include cleartext-simple();
}
.box-3 {
  @include break(4) {
    @include cleartext-simple(false);
  }
}

css

.box-1, .box-2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .box-3 {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}

cleartext

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

Description

Method for Text Replacement

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include cleartext();
}
.box-2 {
  @include cleartext();
}
@include break(4) {
  .box-3 {
    @include cleartext(false);
  }
}

css

.box-1, .box-2 {
  background-color: transparent;
  border: 0;
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .box-3 {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
  }
}

decollapse

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

Description

Helper to prevent collapsing Margins

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include decollapse();
}
.box-2 {
  @include decollapse();
}
.box-3 {
  @include break(4) {
    @include decollapse(false);
  }
}

css

.box-1, .box-2 {
  padding-top: 1px;
  margin-top: 1px;
}
@media screen and (min-width: 768px) {
  .box-3 {
    padding-top: 1px;
    margin-top: 1px;
  }
}

embed-responsive

@mixin embed-responsive($extend: true) { ... }

Description

Make a Embedded Iframe (Youtube Video, Google Maps) responsive

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include embed-responsive();
}
.box-2 {
  @include embed-responsive();
}
.box-3 {
  @include break(4) {
    @include embed-responsive(false);
  }
}

css

.box-1, .box-2 {
  position: relative;
  padding-bottom: 54%;
  padding-top: 15px;
  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
}
.box-1 iframe, .box-2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .box-3 {
    position: relative;
    padding-bottom: 54%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .box-3 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

expand-clickarea

@mixin expand-clickarea($extend: true) { ... }

Description

Expand the Clickable Area

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include expand-clickarea();
}
.box-2 {
  @include expand-clickarea();
}
.box-3 {
  @include break(4) {
    @include expand-clickarea(false);
  }
}

css

.box-1, .box-2 {
  position: relative;
}
.box-1:before, .box-2:before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
}
@media screen and (min-width: 768px) {
  .box-3 {
    position: relative;
  }
  .box-3:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: -10px;
    right: -10px;
  }
}

Links

performance

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

Description

Activate the Hardware Acceleration on Webkit Browsers

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include performance();
}
.box-2 {
  @include performance();
}
.box-3 {
  @include break(4) {
    @include performance(false);
  }
}

css

.box-1, .box-2 {
  transform: translate3d(0, 0, 0);
}
@media screen and (min-width: 768px) {
  .box-3 {
    transform: translate3d(0, 0, 0);
  }
}

simple-button

@mixin simple-button($extend: true) { ... }

Description

Simple Button Element that build a default style for every Button Element

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include simple-button();
}
.box-2 {
  @include simple-button();
}
.box-3 {
  @include break(4) {
    @include simple-button(false);
  }
}

css

.box-1, .box-2 {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  -webkit-appearance: none; }
.box-1::-moz-focus-inner, .box-2::-moz-focus-inner {
  border: 0; }
.box-1:hover, .box-2:hover {
  text-decoration: none; }

@media screen and (min-width: 768px) {
  .box-3 {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none; }
  .box-3::-moz-focus-inner {
    border: 0; }
  .box-3:hover {
    text-decoration: none; } }

text-hyphen

@mixin text-hyphen($extend: true) { ... }

Description

Mixin for Hyphenating Text

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include text-hyphen();
}
.box-2 {
  @include text-hyphen();
}
.box-3 {
  @include break(4) {
    @include text-hyphen(false);
  }
}

css

.box-1, .box-2 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; }

@media screen and (min-width: 768px) {
  .box-3 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; } }

text-truncate

@mixin text-truncate($extend: true) { ... }

Description

Mixin for truncating Text

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include text-truncate();
}
.box-2 {
  @include text-truncate();
}
.box-3 {
  @include break(4) {
    @include text-truncate(false);
  }
}

css

.box-1, .box-2 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal; }

@media screen and (min-width: 768px) {
  .box-3 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal; } }

vertical-align

@mixin vertical-align($extend: true) { ... }

Description

Allows vertical centering of elements with unknown dimensions.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include vertical-align();
}
.box-2 {
  @include vertical-align();
}
.box-3 {
  @include break(4) {
    @include vertical-align(false);
  }
}

css

.box-1:after, .box-2:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle; }

@media screen and (min-width: 768px) {
  .box-3:after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle; } }

vertical-center

@mixin vertical-center($extend: true) { ... }

Description

Vertical Center Elements

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include vertical-center();
}
.box-2 {
  @include vertical-center();
}
.box-3 {
  @include break(4) {
    @include vertical-center(false);
  }
}

css

.box-1, .box-2 {
  display: table-cell;
  vertical-align: middle; }

@media screen and (min-width: 768px) {
  .box-3 {
    display: table-cell;
    vertical-align: middle; } }

visually-hidden

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

Description

Visually hide elements without hiding them from screen readers or crawlers.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include visually-hidden();
}
.box-2 {
  @include visually-hidden();
}
.box-3 {
  @include break(4) {
    @include visually-hidden(false);
  }
}

css

.box-1, .box-2 {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  margin: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute; }

@media screen and (min-width: 768px) {
  .box-3 {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    margin: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute; } }

word-wrap

@mixin word-wrap($extend: true) { ... }

Description

Compatible Mixin for Word-Wrap

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$extend

Set it on false the mixin will used as regular mixin

Booltrue

Example

scss

.box-1 {
  @include word-wrap();
}
.box-2 {
  @include word-wrap();
}
.box-3 {
  @include break(4) {
    @include word-wrap(false);
  }
}

css

.box-1, .box-2 {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word; }

@media screen and (min-width: 768px) {
  .box-3 {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word; } }

core - pos

mixins

pos

@mixin pos($position) { ... }

Description

Set the Position for the Position Mixins. For Zero Position (0) set the value to 'z'

  • One value = top
  • Two values = top left
  • Four values = top right bottom left

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$position

Position Values.

List none

Used by

core - quantify-queries

functions

[private] _last-simple-selector

@function _last-simple-selector($selector) { ... }

Description

Find the last simple selector in a given selector

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector

A single selector

List none

Returns

String

The last simple selector in $selector

Throws

  • #{$selector} contains #{length($parsed)} selectors and the _last-simple-selector()function accepts only 1.

Used by

Author

  • Daniel Guillan

[private] _build-quantity-selector

@function _build-quantity-selector($selector-append, $last-selector) { ... }

Description

Builds the selector for the quantity query

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector-append

The selector to be appended

String none
$last-selector

The item's selector

String none

Returns

List

The final quantity query selector

Requires

Used by

Author

  • Daniel Guillan

mixins

at-least

@mixin at-least($count) { ... }

Description

Query when total items is at least N items

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$count

Quantity to match (equal or more)

Number none

Content

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

Example

scss

ul li {
  @include at-least(4) {
    color: red;
  }
}

css

ul li:nth-last-child(n+4),
ul li:nth-last-child(n+4) ~ li {
  color: red;
}

Throws

  • #{$count} is not a valid number for at-least

  • #{$selector} is not a valid selector for at-least

Requires

Author

  • Daniel Guillan

at-most

@mixin at-most($count) { ... }

Description

Query when total items is at most N items

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$count

Quantity to match (equal or less)

Number none

Content

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

Example

scss

ul li {
  @include at-most(4) {
    color: red;
  }
}

css

ul li:nth-last-child(-n+4):first-child,
ul li:nth-last-child(-n+4):first-child ~ li {
  color: red;
}

Throws

  • #{$count} is not a valid number for at-most.

  • #{$selector} is not a valid selector for at-most

Requires

Author

  • Daniel Guillan

between

@mixin between($at-least, $at-most) { ... }

Description

Query when total items is at least X items and at most Y items

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$at-least

Lower quantity of items to match

Number none
$at-most

Higher quantity of items to match

Number none

Content

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

Example

scss

ul li {
  @include between(4, 8) {
    color: red;
  }
}

css

ul li:nth-last-child(n+4):nth-last-child(-n+8):first-child,
ul li:nth-last-child(n+4):nth-last-child(-n+8):first-child ~ li {
  color: red;
}

Throws

  • #{$first} is not a valid number for between

  • #{$last} is not a valid number for between

  • #{$first} can´t be larger that #{$last} for between

  • #{$selector} is not a valid selector for between

Requires

Author

  • Daniel Guillan

exactly

@mixin exactly($count) { ... }

Description

Query when total items is exactly N items

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$count

Quantity to match (equal)

Number none

Content

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

Example

scss

ul li {
  @include exactly(4) {
    color: red;
  }
}

css

ul li:nth-last-child(4):first-child,
ul li:nth-last-child(4):first-child ~ li {
  color: red;
}

Throws

  • #{$count} is not a valid number for exactly

  • #{$selector} is not a valid selector for exactly

Requires

Author

  • Daniel Guillan

core - rem

functions

[private] rembase

@function rembase() { ... }

Description

Calculate a Fontsize to REM

Parameters

None.

Used by

rem

@function rem($px, $base) { ... }

Description

Calculate px in rem

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$px

The Size in PX

Number none
$base

The Base for the calculation

Number none

Returns

Number

Return the size in rem

Example

scss

.test {
  font-size: rem(14);
}

css

.test {
  font-size: 0.875rem;
}

Requires

Used by

core - sassylist

functions

sl-has-multiple-values

@function sl-has-multiple-values($list) { ... }

Description

Tests whether $list has at least 2 values.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$list

list to run test against

List none

Returns

Bool

[private] sl-str-compare

@function sl-str-compare($a, $b, $matrix) { ... }

Description

Compares $a and $b based on $order.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$a

first value

Any none
$b

second value

Any none
$matrix

alphabetical order

List none

Returns

Bool

sl-to-list

@function sl-to-list($value, $separator) { ... }

Description

Casts $value into a list.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

value to cast to list

Any none
$separator

separator to use

String none

Returns

List

Used by

sl-reverse

@function sl-reverse($list) { ... }

Description

Reverses the order of $list.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$list

list to reverse

List none

Returns

List

Requires

Used by

sl-remove-duplicates

@function sl-remove-duplicates($list) { ... }

Description

Removes duplicate values from $list.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$list

list to remove duplicates from

List none

Returns

List

Requires

Used by

sl-sort

@function sl-sort($list, $order) { ... }

Description

Sorts values of $list using quick-sort algorithm using $order.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$list

list to sort

List none
$order

order to respect

List none

Returns

List

Used by

core - size

mixins

size

@mixin size($size, $lineheight: false) { ... }

Description

For include Element Dimensions in Width, Height and Line-Height. When '$size' have only one Value will height and width the same (square)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Width and/or Height

List none
$lineheight

Line-Height can also added. Either it use the 'size' Value or a Number

Boolfalse

Example

scss

.box-1 {
  @include size(40);
}
.box-2 {
  @include size(200 3rem);
}
.box-3 {
  @include size(50 20, 20);
}

css

.box-1 {
  width: 40px;
  height: 40px;
}
.box-2 {
  width: 200px;
  height: 3rem;
}
.box-3 {
  width: 50px;
  height: 20px;
  line-height: 20px;
}

Requires

Used by

core - spacing

functions

s

@function s($lines, $hard: false, $size: $kittn-global-spacing) { ... }

Description

Multiply the Spacing Value to generate Spacings, integrate the Unit

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$lines

Multiplier for spacing

Number none
$hard

Include an !important

Boolfalse
$size

Connection to the Base Spacing

Number$kittn-global-spacing

Returns

Number

Example

scss

.space {
  margin-bottom: s(2);
}

css

.space {
  margin-bottom: 40px;
}

Requires

gap

@function gap($lines, $imp: false, $u: false, $size: $kittn-global-spacing) { ... }

Description

Multiply the Spacing Value to generate Spacings The Unit is variable

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$lines

Multiplier for Spacing

Number none
$imp

For including an !important

Boolfalse
$u

Unit

Anyfalse
$size

Connection to the Base Spacing

Number$kittn-global-spacing

Returns

Number

Example

scss

.space {
  margin-bottom: gap(.25, $u: em);
}

css

.space {
  margin-bottom: 5em;
}

Requires

generators

mixins

fontface-generator

@mixin fontface-generator($map) { ... }

Description

Include all Font Faces from the Font Face Map Will be activated with Internal Functions

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map none

Requires

icon-generator

@mixin icon-generator($icons: $kittn-font-icons) { ... }

Description

Generate the Icon Classes

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$icons

Icon Font Map

Map$kittn-font-icons

responsive-fontsize

@mixin responsive-fontsize($base) { ... }

Description

Generate Responsive Fonts, based on the Breakpoint Map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$base

The Base Font Size in percent

Number none

Requires

typogenerator

@mixin typogenerator($map: $kittn-typostyles-map) { ... }

Description

Generate the Typo based on the Typo-Map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map

Map$kittn-typostyles-map

Requires

methods - align

mixins

align-height

@mixin align-height($height, $factor: 1) { ... }

Description

Mixin to Insert Height and Line-Height on a Simple Way

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$height

Height

Number none
$factor

Multiplier

Number1

Example

scss

.box {
  @include align-height(20);
}

css

.box {
  height: 20px;
  line-height: 20px;
}

Requires

align-fontsize

@mixin align-fontsize($size, $factor: 1.2) { ... }

Description

Mixin to Insert Height and Line-Height on a Simple Way

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Fontsize

Number none
$factor

Multiplier

Number1.2

Example

scss

.box {
  @include align-fontsize(20);
}

css

.box {
  font-size: 20px;
  line-height: 24px;
}

Requires

center

@mixin center($size) { ... }

Description

Center and Middle a Element in a box

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Width and/or Height

Number none

Example

scss

.box {
  @include center(300);
}

css

.box {
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

Requires

Used by

center-circle

@mixin center-circle($size) { ... }

Description

Center Circle

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size of the Circle

Value none

Example

scss

.box {
  @include center-circle(300);
}

css

.box {
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
  border-radius: 300px;
}

Requires

methods - bar

mixins

bar

@mixin bar($variant, $position, $z-index) { ... }

Description

Style for Bar Elements

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variant

Position Variant (f = fixed, a = absolute)

String none
$position

Position (t = Top, b = Bottom, l = Left, r = Right)

String none
$z-index

Z-Index [9999]

Number none

Example

scss

.header {
  @include bar($variant: f, $position: t);
}

css

.header {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
}

Used by

bar-top

@mixin bar-top($z, $variant: f) { ... }

Description

Set for a Barelement at the top from the Viewport or Document

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$z

Z-Index

Number none
$variant

Position Variant (f = fixed, a = absolute)

Stringf

Example

scss

.header {
  @include bar-top($z: 10, $variant: a);
}

css

.header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
}

Requires

bar-bottom

@mixin bar-bottom($z, $variant: f) { ... }

Description

Set for a Barelement at the bottom from the Viewport or Document

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$z

Z-Index

Number none
$variant

Position Variant (f = fixed, a = absolute)

Stringf

Example

scss

.footer {
  @include bar-bottom();
}

css

.footer {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
}

Requires

methods - grid

functions

span

@function span($columns, $maxcolumns: 12) { ... }

Description

Calculate the width from a column in percent

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

Columns

Number none
$maxcolumns

Max Columns

Number12

Returns

Number

Relative Width in %

Example

scss

.box {
  width: span(4);
  width: span(4,24);
}

css

.box {
  width: 33.33333%;
  width: 16.66667%;
}

Requires

Used by

span-calc

@function span-calc($columns, $maxcolumns: 12, $gutter: 0) { ... }

Description

Build a formula so CSS can Calculate the relative width with CSSCalc. Is also useful to include margins, the CSSCalc can compensate this.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

Number of Columns

Number none
$maxcolumns

Max Columns

Number12
$gutter

Margin Width for 2 Sides

Number0

Example

scss

.box {
  margin: 0 20px;
  width: span-calc(4);
  width: span-calc(4, $gutter: 20);
}

css

.box {
  margin: 0 20px;
  width: calc(33.33333%);
  width: calc(33.33333% - 40px);
}

Requires

Used by

mixins

adaptive

@mixin adaptive($map) { ... }

Description

Setup the Grid Size in Steps based on the Breakpoints

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Connection to the Breakpoint Map

Map none

Example

scss

.container {
  @include adaptive();
}

css

.container {
  width: 320px; }
@media screen and (min-width: 560px) {
  .container {
    width: 560px; } }
@media screen and (min-width: 768px) {
  .container {
    width: 768px; } }
@media screen and (min-width: 960px) {
  .container {
    width: 960px; } }
@media screen and (min-width: 1180px) {
  .container {
    width: 1180px; } }

Requires

container

@mixin container($width: 320 1180, $spacing: 10, $o, $o.position: center, $o.gutter: 0) { ... }

Description

Generate the Page Container, Size and Float Direction

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Container Size. The Max and Min Width of the container. One Value only the Container is static

List320 1180
$spacing

Side Padding of the Container

Number10
$o

Setup Args

Map none
$o.position

Container position (center, left, right)

Stringcenter
$o.gutter

Side Spacing - only relevant on Container Position left or right

Number0

Example

scss

.container {
  @include container();
}

.other-container {
  // To combine with Adaptive
  @include container(false, $spacing: 0);
}

css

.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 320px;
  max-width: 1180px;
  padding-left: 10px;
  padding-right: 10px;
}
.other-container {
  margin-left: auto;
  margin-right: auto;
}

Requires

row

@mixin row($spacing: 10, $layout: block, $o, $o.valign: top, $o.align: left, $o.overlap: false) { ... }

Description

Build the outer Container that hold the Grid-Columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$spacing

To reset the margin off a nested rows. Size from the Gutter.

Number10
$layout

The type from the Layout (block, inline, table, fixedtable, flex)

Stringblock
$o

Setup Args

Map none
$o.valign

Vertical align. (top, bottom, baseline, middle, stretch, baseline)

Stringtop
$o.align

Horizontal align. (left, justify, center, right, left, spacebetween, spacearound)

Stringleft
$o.overlap

Let the Row overlap the parent Container

Numberfalse

Example

scss

.row {
  @include row();
}
.flexrow {
  @include row(0, $layout: flex, $o:(
    valign: stretch
  ));
}

css

.row:after {
  content: '';
  display: table;
  clear: both; }

.row .row {
  margin-left: -10px;
  margin-right: -10px; }

.flexrow {
  display: flex;
  justify-content: flex-start;
  align-items: stretch; }

.flexrow .flexrow {
  margin-left: 0px;
  margin-right: 0px; }

Requires

column

@mixin column($spacing, $layout: block, $o, $o.extras: false, $o.valign: top, $o.align: left, $o.gutter: false) { ... }

Description

Build the Base Style for all Columns. Include the Mixin in your Column Class

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$spacing

Column Side-Spacing

Number none
$layout

The type from the Layout, values: (block, inline, table, flex)

Stringblock
$o

Setup Vars

Map none
$o.extras

For include additional classes for the columns

Boolfalse
$o.valign

Vertical align (top, bottom, baseline, middle, stretch)

Stringtop
$o.align

Horizontal align (left, justify, center, right, left, superleft, superright)

Stringleft
$o.gutter

Vertical Gutter

Numberfalse

Example

scss

.column {
  @include column();
}
.flex-column {
  @include column($layout: flex);
}

css

.column {
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  float: left; }

.column:last-child {
  float: right; }

.flex-column {
  padding-left: 10px;
  padding-right: 10px;
  flex: 0 0 auto;
  align-items: flex-start; }

Requires

span

@mixin span($column: 1, $o, $o.max: 12, $o.flex: false, $o.gutter: false) { ... }

Description

Generate a Grid Column Size

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$column

Number of Columns

Number1
$o

Setup Args

Map none
$o.max

Max available Columns.

Number12
$o.flex

Flexbox Option.

Boolfalse
$o.gutter

Calculate the Size with the Calc Formula

Numberfalse

Example

scss

.column {
  @include span(4);
}
.column-calc {
  @include column(0, $o: (
    gutter: 10px
  ));
  @include span(2, (
    gutter: 10px
  ));
}
.flex-column {
  @include span(4, $o: (
    flex: true
  ));
}

css

.column {
  width: 33.33333%; }

.column-calc {
  display: block;
  margin-left: 10px;
  margin-right: 10px;
  float: left;
  width: calc(16.66667% - 20px); }
.column-calc:last-child {
  float: right; }

.flex-column {
  flex-basis: 33.33333%;
  max-width: 33.33333%; }

Requires

Used by

static-span

@mixin static-span($column: 1, $o, $o.max: 12, $o.margin: 10, $o.space: 1180) { ... }

Description

Generate a Pixel Based Grid Columns

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$column

Number of Columns

Number1
$o

Setup Args

Map none
$o.max

Max available Columns.

Number12
$o.margin

Margin for the left and right Side

Number10
$o.space

Max Width in Px for the outer Container

Number1180

Example

scss

.column {
  @include static-span(4);
}

css

.column {
  width: 373.33333px;
  margin-left: 10px;
  margin-right: 10px;
}

Requires

grid-generator

@mixin grid-generator($columns: 12, $o, $o.select: false, $o.name: false, $o.extend: false, $o.silent: false, $o.gutter: false) { ... }

Description

Generate Column Sizes, it can be also preselected

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

Number of generated columns

Number12
$o

Setup Vars

Map none
$o.select

Include a List with the Sizes that you want.

Listfalse
$o.name

Classname when the Mixin is not nested in a class.

Stringfalse
$o.extend

Connect the generated classes with a other class.

Stringfalse
$o.silent

Generate Placeholder Classes.

Boolfalse
$o.gutter

Calculate the Size with the Calc Formula

Numberfalse

Example

scss

.column {
  @include grid-generator(4);
}
.size {
  @include grid-generator(12, $o: (
    select: 3 4 6 8 12
  ));
}

css

.column--1 {
  width: 25%; }
.column--2 {
  width: 50%; }
.column--3 {
  width: 75%; }
.column--4 {
  width: 100%; }

.size--3 {
  width: 25%; }
.size--4 {
  width: 33.33333%; }
.size--6 {
  width: 50%; }
.size--8 {
  width: 66.66667%; }
.size--12 {
  width: 100%; }

Requires

offset

@mixin offset($column: 1, $o, $o.max: 12, $o.direction: left) { ... }

Description

Generate the Offset Width for a Column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$column

The desired Offset-Size based on the Columnsizes

Number1
$o

Setup Vars

Map none
$o.max

Max Offset Classes

Number12
$o.direction

Direction off the Offset (left, right)

Stringleft

Example

scss

.column {
  @include offset(4);
}

css

.column {
  margin-left: 33.33333%;
}

Requires

Used by

offset-generator

@mixin offset-generator($columns, $o, $o.name: false, $o.silent) { ... }

Description

Generate a set of Offset Sizes

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

Number of generated offset columns

Number none
$o

Setup Args

Map none
$o.name

Add a classname (without dot) or use the Parent Class Name

Stringfalse
$o.silent

Build it silent

Bool none

Example

scss

.offset {
  @include offset-generator(3);
}

css

.offset-left--1 {
  margin-left: 33.33333%; }

.offset-right--1 {
  margin-right: 33.33333%; }

.offset-left--2 {
  margin-left: 66.66667%; }

.offset-right--2 {
  margin-right: 66.66667%; }

Requires

pushpull

@mixin pushpull($column: 1, $o, $o.max: 12, $o.direction: push, $o.extend: false) { ... }

Description

Move a Column with Position:Relative to left or right - Elements can move out off the container or it change the order

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$column

Width of Push & Pull Class, based on Columnsizes

Number1
$o

Setup args

Map none
$o.max

Max Push & Pull Columns

Number12
$o.direction

The Direct ion off the Offset (push, pull)

Stringpush
$o.extend

Connected with a other class.

Boolfalse

Example

scss

.push {
  @include pushpull(7);
}
.pull {
  @include pushpull(3, $o: (
    direction: pull
  ));
}

css

.push {
  position: relative;
  left: 58.33333%;
}
.pull {
  position: relative;
  right: 25%;
}

Requires

Used by

pushpull-generator

@mixin pushpull-generator($columns, $o, $o.name: false, $o.extend: false, $o.silent: false) { ... }

Description

Generate the Push&Pull Classes

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$columns

Number of generated offset columns

Number none
$o

Setup args

Map none
$o.name

Add a classname (without dot) or use the Parent Class Name

Stringfalse
$o.extend

With 'true' the class will connected with a other class.

Boolfalse
$o.silent

Connected with a other class.

Boolfalse

Example

scss

.pp {
  @include pushpull-generator(3);
}

css

.pp-push--1 {
  position: relative;
  left: 33.33333%; }

.pp-pull--1 {
  position: relative;
  right: 33.33333%; }

.pp-push--2 {
  position: relative;
  left: 66.66667%; }

.pp-pull--2 {
  position: relative;
  right: 66.66667%; }

Requires

grid-reset

@mixin grid-reset($o, $o.name: false, $o.option: blockgrid, $o.important: false) { ... }

Description

Reset Grid Objects. Works only when you not silent the Grid Classes

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$o

Setup Vars

Map none
$o.name

Desired Name off the Selector that need to modified

Stringfalse
$o.option

Layout Type. (blockgrid, inlinetable, offset, pushpull)

Stringblockgrid
$o.important

Add an Important to the Attribute

Boolfalse

Example

scss

@include grid-reset((
  name: offset,
  option: offset
));

css

[class^="offset-right--"],
[class*=" offset-right--"] {
  margin-right: 0;
}

[class^="offset-left--"],
[class*=" offset-left--"] {
  margin-left: 0;
}

Requires

methods - iconfont

functions

icon

@function icon($name) { ... }

Description

Get the Iconcode from the Iconmap

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Icon Keyword

String none

Returns

Any type

Example

scss

.icon {
  &:before {
    content: icon('myIcon');
  }
}

Used by

mixins

[private] iconfont

@mixin iconfont($iconFontName) { ... }

Description

Build the Base Attributes for all Font Icons

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$iconFontName

Iconfont Name

String none

Example

scss

.iconfont {
  @include iconfont(myFont);
}

css

.iconfont {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-family: myFont;
  font-style: normal;
  font-weight: normal !important;
  speak: none;
  text-decoration: inherit;
  line-height: 1;
}

Used by

icon-font-base

@mixin icon-font-base($iconFontName) { ... }

Description

Build the Base Icon Font Behavior

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$iconFontName

Iconfont Name

String none

Example

scss

@include icon-font-base(myFont);

css

%iconfont,
[class^="f-icon--"]:before,
[class*=" f-icon--"]:before,
[data-icon]:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-family: myFont;
  font-style: normal;
  font-weight: normal !important;
  speak: none;
  text-decoration: inherit;
  line-height: 1; }

[data-icon]:before {
  content: attr(data-icon);
}

Requires

icon

@mixin icon($name, $connect: 'container') { ... }

Description

Insert the Icon Value as Content

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Key to the Map Entry

Any none
$connect

Can be connected with the %iconfontcontainer, or a Iconfont (mixin), or false

Any'container'

Example

scss

.icon {
  @include icon(myIcon, container);
}

css

[class^="f-icon--"]:before,
[class*=" f-icon--"]:before,
[data-icon]:before,
.icon:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-family: myIconFont;
  font-style: normal;
  font-weight: normal !important;
  speak: none;
  text-decoration: inherit;
  line-height: 1; }

[data-icon]:before {
  content: attr(data-icon); }

.icon {
  content: "icon"; }

Requires

ext-icon

@mixin ext-icon($name) { ... }

Description

Extend a Class with an existing Icon Font Class

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name off the Icon (from the Map)

String none

Example

scss

.icon {
  @include ext-icon(myIcon);
}

methods - images

mixins

[private] _images

@mixin _images($name, $filetype, $dir, $repeat, $offset, $scale, $dimensions) { ... }

Description

Mixin for include Images

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Image Name

String none
$filetype

Filetype

String none
$dir

File Directory

String none
$repeat

Background Repeat (regular css value)

String none
$offset

Background Position (regular css value)

String none
$scale

Scale factor

Number none
$dimensions

Use Image Dimensions (bool, both, height, width)

String none

Used by

[private] _spriteDimension

@mixin _spriteDimension($dim, $map, $sh, $sw, $scale: 1) { ... }

Description

Include Sprite Dimensions

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$dim

Dimension-Type

String none
$map

Map

Map none
$sh

Height value that subtracted from the Container

Number none
$sw

Width value that subtracted from the Container

Number none
$scale

Scale Factor

Number1

Used by

[private] _sprite

@mixin _sprite($mapfile, $basefile, $dim, $scale, $repeat, $sub) { ... }

Description

Sprite Mixin. Get the Data from the Map File

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$mapfile

Sprite map

Map none
$basefile

Basemap

Map none
$dim

Use Sprite Dimensions (bool, both, width, height)

Bool none
$scale

Scale Factor

Number none
$repeat

Background Repeat (regular css value)

String none
$sub

Substract Container Dimension

Number none

Requires

Used by

bitmap

@mixin bitmap($name, $o, $o.dimensions: both, $o.offset: false, $o.repeat, $o.scale: 1, $o.filetype: 'png') { ... }

Description

Including Bitmap images

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name of the Image

String none
$o

Setup Args

Map none
$o.dimensions

Use Image Dimensions (both, bool, height, width)

Stringboth
$o.offset

Image Position (false, bool, regular css value)

Stringfalse
$o.repeat

Background Repeat (bool, regular css value)

String none
$o.scale

Scale factor (1, one Value = h = w, two Value = w & h)

List1
$o.filetype

Image Filetype

String'png'

Example

scss

.bitmap-1 {
  @include bitmap(image);
}
.bitmap-2 {
  @include bitmap(image, $o: (
    scale: .5
  ));
}
.bitmap-3 {
  @include bitmap(image, $o: (
    dimensions: false,
    repeat: repeat-x
  ));
}

css

.bitmap-1 {
  background-image: url("../img/bitmaps/image.png");
  background-repeat: no-repeat;
  width: 412px;
  height: 48px;
}

.bitmap-2 {
  background-image: url("../img/bitmaps/image.png");
  background-repeat: no-repeat;
  width: 206px;
  height: 24px;
  background-size: 206px 24px;
}

.bitmap-3 {
  background-image: url("../img/bitmaps/image.png");
  background-repeat: repeat-x;
}

Requires

vector

@mixin vector($name, $o, $o.dimensions: both, $o.offset: false, $o.repeat, $o.scale: 1) { ... }

Description

Include Vector Images

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name of the Image

String none
$o

Setup Args

Map none
$o.dimensions

Use Image Dimensions (both, bool, height, width)

Stringboth
$o.offset

Image Position (false, bool, regular css value)

Stringfalse
$o.repeat

Background Repeat (bool, regular css value)

String none
$o.scale

Scale factor (1, one Value = h = w, two Value = w & h)

List1

Example

scss

.vector-1 {
  @include vector(logo);
}
.vector-2 {
  @include vector(logo, $o: (
    scale: 10
  ));
}

css

.vector-1 {
  background-image: url("../img/svgfiles/logo.svg");
  background-repeat: no-repeat;
  width: 282px;
  height: 101px;
}

.vector-2 {
  background-image: url("../img/svgfiles/logo.svg");
  background-repeat: no-repeat;
  width: 2820px;
  height: 1010px;
  background-size: 2820px 1010px;
}

Requires

vsprite

@mixin vsprite($name, $o, $o.dimensions: both, $o.scale: false, $o.repeat: false, $o.subtract: 0) { ... }

Description

Include a Vector Sprite

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name from the Sprite SVG in the Map

String none
$o

Setup args

Any none
$o.dimensions

Use Sprite Dimensions (both, bool, width, height)

Stringboth
$o.scale

Scale Factor

Numberfalse
$o.repeat

Background Repeat (regular css value)

Stringfalse
$o.subtract

Subtract Container Dimension

List0

Example

scss

.vector-1 {
  @include vsprite(picto-calendar);
}
.vector-2 {
  @include vsprite(picto-clock, $o: (
    scale: 2,
    subtract: 10 20
  ));
}

css

.vector-1, .vector-2 {
  background: url("../img/vector-sprite.svg") no-repeat;
}
.vector-1 {
  background-position: 0px 0px;
  height: 30px;
  width: 29.38px;
}
.vector-2 {
  background-position: -63.76px -10px;
  background-size: 178px 60px;
  height: 40px;
  width: 50px;
}

Requires

sprite

@mixin sprite($name, $o, $o.dimensions: both, $o.scale: false, $o.repeat: false, $o.subtract: 0) { ... }

Description

Include a Bitmap Sprite

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name from the Bitmap Sprite in the Map

String none
$o

Setup args

Map none
$o.dimensions

Use Sprite Dimensions (both, bool, width, height)

Stringboth
$o.scale

Scale Factor

Numberfalse
$o.repeat

Background Repeat (regular css value)

Stringfalse
$o.subtract

Subtract Container Dimension

List0

Example

scss

.sprite-1 {
  @include sprite(jump-right);
}
.sprite-2 {
  @include sprite(menu-icon, $o: (
    scale: .5
  ));
}

css

.sprite-1, .sprite-2 {
  background: url("../img/sprite.png") no-repeat;
}
.sprite-1 {
  background-position: -40px 0px;
  height: 21px;
  width: 21px;
}
.sprite-2 {
  background-position: 0px 0px;
  background-size: 30.5px 20px;
  height: 20px;
  width: 20px;
}

Requires

methods - overlap

mixins

overlap

@mixin overlap($size) { ... }

Description

Overlaps a Element over the Side Padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Value to be overlapped on the left and right side. You can define two sides with one value, or left and right selective

List none

Example

scss

.overlap {
  @include overlap(20);
}

css

.overlap {
  margin-left: -20px;
  margin-right: -20px;
}

Used by

methods - positioning

mixins

relative

@mixin relative($pos: 0) { ... }

Description

Shorthand for Relative positioning. For Zero Position (0) set the value to 'z'

  • One value = top
  • Two values = top left
  • Four values = top right bottom left

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pos

Position Values

List0

Example

scss

.box-1 {
  @include relative(20 50);
}
.box-2 {
  @include relative(z z 100 50);
}

css

.box-1 {
  position: relative;
  top: 20px;
  left: 50px;
}
.box-2 {
  position: relative;
  top: 0;
  right: 0;
  bottom: 100px;
  left: 50px;
}

Requires

absolute

@mixin absolute($pos: 0) { ... }

Description

Shorthand for Absolute positioning. For Zero Position (0) set the value to 'z'

  • One value = top
  • Two values = top left
  • Four values = top right bottom left

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pos

Position Values

List0

Example

scss

.box-1 {
  @include absolute(30);
}
.box-2 {
  @include absolute(z z z z);
}

css

.box-1 {
  position: absolute;
  top: 30px;
}
.box-2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Requires

fixed

@mixin fixed($pos: 0) { ... }

Description

Shorthand for Fixed positioning. For Zero Position (0) set the value to 'z'

  • One value = top
  • Two values = top left
  • Four values = top right bottom left

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pos

Position Values

List0

Example

scss

.box-1 {
  @include fixed(0 10);
}
.box-2 {
  @include fixed(0 0 10 10);
}

css

.box-1 {
  position: fixed;
  left: 10px;
}
.box-2 {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

Requires

static

@mixin static() { ... }

Description

Shorthand for Static positioning reset all position values

Parameters

None.

Example

scss

.box {
  @include static();
}

css

.box {
  position: static;
  left: inherit;
  right: inherit;
  top: inherit;
  bottom: inherit;
}

methods - ratio

mixins

ratio

@mixin ratio($ratio: 1, $selector: false) { ... }

Description

A Floating Grid System

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$ratio

Ratio between width and height

List1
$selector

Use the following child element or a named selector

Stringfalse

Content

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

Example

scss

.box {
  @include ratio(200 400);
}

css

.box {
  overflow: hidden;
  position: relative;
}
.box:before {
  content: '';
  display: block;
  height: 0;
  padding-top: 200%;
}
.box > * {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Requires

ratio-reset

@mixin ratio-reset($selector: false) { ... }

Description

Reset any ratio

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector

Use the following child element or a named selector

Stringfalse

Content

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

Example

scss

.box {
  @include ratio-reset();
}

css

.box:before {
  height: auto;
  padding-top: 0;
}
.box > * {
  position: inherit;
  left: inherit;
  top: inherit;
  height: inherit;
  width: inherit;
}

methods - reposition

functions

[private] _position-translate

@function _position-translate($pos, $axis) { ... }

Description

Transform named Positions to number

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$pos

Position Value. (left, center, right, top, middle, bottom, number, bool)

String none
$axis

The Position Axis. (vert, horz)

String none

Requires

Used by

mixins

pivot

@mixin pivot($vert: middle, $horz: false) { ... }

Description

Move the Pivot Point from a Element, based on 2D CSS Transform

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$vert

Vertical Position from the Pivot Point. (middle, top, bottom, number, bool)

Stringmiddle
$horz

Horizontal Position from the Pivot Point. (false, left, center, right, number, bool)

Stringfalse

Example

scss

.box-1 {
  @include pivot();
}
.box-2 {
  @include pivot($horz: center);
}

css

.box-1 {
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.box-2 {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Requires

Used by

slide

@mixin slide($vert: 50, $horz: false, $type: absolute) { ... }

Description

Move an Element

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$vert

Vertical Position

Number50
$horz

Horizontal Position

Numberfalse
$type

Position Type (absolute, fixed)

Stringabsolute

Example

scss

.box {
  @include slide();
}

css

.box {
  position: absolute;
  top: 50%;
}

Requires

Used by

pivot-center

@mixin pivot-center() { ... }

Description

Center a absolute positioned Element in the middle

Parameters

None.

Example

scss

.box {
  @include pivot-center();
}

css

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Requires

pivot-middle

@mixin pivot-middle() { ... }

Description

Middle Elements with Pivot

Parameters

None.

Example

scss

.box {
  @include pivot-middle();
}

css

.box {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Requires

absolute-middle

@mixin absolute-middle($dimension) { ... }

Description

Moving an absolute position element in the Center - optional in the Middle (with Height)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$dimension

Dimensions from the Element (Width and the Height)

List none

Example

scss

.box {
  @include absolute-middle(200 300);
}

css

.box {
  height: 300px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -150px;
  margin-left: -100px;
}

methods - scale

mixins

scale

@mixin scale($dimension, $scale: 1, $resize) { ... }

Description

Scale a container with Aspect Ratio

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$dimension

The actual size from the container

List none
$scale

Scale Factor

Number1
$resize

Calculate the nes size ($scale must 'false'). E.g. w 200 => new width with 200px (w, h, bool)

List none

Example

scss

.box {
  @include scale(20 40, .5);
}

css

.box {
  width: 10px;
  height: 20px;
}

methods - spacer

mixins

[private] _margin-padding

@mixin _margin-padding($o, $o.value: false, $o.type: padding, $o.important: false) { ... }

Description

Mixin for build easy margin and paddings

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$o

Setup Vars

Map none
$o.value

Generate all four sides, with different length of values.

Listfalse
$o.type

Margin or Padding Type

Stringpadding
$o.important

For include a '!important'

Boolfalse

Example

scss

.box {
  @include _margin-padding((
    value: 10 20em
  ));
}

css

.box {
  padding-top: 10px;
  padding-right: 20em;
  padding-bottom: 10px;
  padding-left: 20em;
}

Used by

padding

@mixin padding($value: false, $important: false) { ... }

Description

Generate Paddings for all four sides off a box.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Generate all four sides, with different length of values.

Listfalse
$important

For include a '!important'

Boolfalse

Example

scss

.box {
  @include padding(10 30 4rem 5%);
}

css

.box {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 4rem;
  padding-left: 5%;
}

Requires

margin

@mixin margin($value: false, $important: false) { ... }

Description

Generate Margins for all four sides off a box.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Generate all four sides, with different length of values.

Listfalse
$important

For include a '!important'

Boolfalse

Example

scss

.box {
  @include margin(10 30 4rem 5%);
}

css

.box {
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 4rem;
  margin-left: 5%;
}

Requires

spacer

@mixin spacer($options, $lines: 1, $important: false, $size: $kittn-global-spacing) { ... }

Description

Generate Spacing based on the Global Spacing

  • w = width, h = height, lh = line-height
  • pt = padding-top, pb = padding-bottom, pl = padding-left, pr = padding-right
  • mt = margin-top, mb = margin-bottom, ml = margin-left, mr = margin-right
  • mv = margin-vertical, mh = margin-horizontal
  • pv = padding-vertical, ph = padding-horizontal

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$options

Spacing Type (w, h, lh, pt, pb, pl, pr, mt, mb, ml, mr, mv, mh, pv, ph)

List none
$lines

Spacing Multiplicator

Number1
$important

Overwrite Values with !important

Boolfalse
$size

Global Size Value

Number$kittn-global-spacing

Example

scss

.box {
  @include spacer(pt mb h, 2 1 10);
}

css

.box {
  padding-top: 40px;
  margin-bottom: 20px;
  height: 200px;
}

Requires

spacer-reset

@mixin spacer-reset($options, $important: false) { ... }

Description

Reset all spacing Spacing

  • w = width, h = height, lh = line-height
  • pt = padding-top, pb = padding-bottom, pl = padding-left, pr = padding-right
  • mt = margin-top, mb = margin-bottom, ml = margin-left, mr = margin-right
  • mv = margin-vertical, mh = margin-horizontal
  • pv = padding-vertical, ph = padding-horizontal

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$options

Spacing Type (w, h, lh, pt, pb, pl, pr, mt, mb, ml, mr, mv, mh, pv, ph)

List none
$important

Overwrite Values with !important

Boolfalse

Example

scss

.box {
  @include spacer-reset(pt mb h);
}

css

.box {
  padding-top: inherit;
  margin-bottom: inherit;
  height: inherit;
}

Requires

methods - vertical sizes

mixins

remsize

@mixin remsize($arg, $size) { ... }

Description

Recalculate the px values to rem, with lines option

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$arg

Attribute

Any none
$size

Value

Number none

Example

scss

.box {
  @include remsize(font-size, 3);
}

css

.box {
  font-size: 3.9375rem;
}

Requires

Used by

pxsize

@mixin pxsize($arg, $size) { ... }

Description

Recalculate the px values to rem

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$arg

Attribute

Any none
$size

Value

Number none

Example

scss

.box {
  @include pxsize(font-size, 13);
}

css

.box {
  font-size: 0.8125rem;
}

Requires

Used by

rem

@mixin rem($arg, $size, $baseline) { ... }

Description

Calculate the Rem Sizes, with Baseline Option

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$arg

Attribute

Any none
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include rem(font-size,14);
}

css

.box {
  font-size: 0.875rem;
}

Requires

Used by

lineheight

@mixin lineheight($size, $baseline) { ... }

Description

Calculate the Lineheight from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include lineheight(32);
}

css

.box {
  line-height: 2rem;
}

Requires

Used by

fontsize

@mixin fontsize($size) { ... }

Description

Caluclate the Font Size in PX to REM with Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Font Size

Number none

Example

scss

.box {
  @include fontsize(14);
}

css

.box {
  font-size: 0.875rem;
}

Requires

Used by

fontcalc

@mixin fontcalc($fontsize, $lineheight: false, $factor: 1.2) { ... }

Description

Calculate Fontsize and Lineheight

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$fontsize

Font Size

Number none
$lineheight

Lineheight for the Font - can be false than used the factor

Numberfalse
$factor

The Calculationfactor

Number1.2

Example

scss

.box {
  @include fontcalc(14);
}

css

.box {
  font-size: 0.875rem;
  line-height: 1.05rem;
}

Requires

marginbottom

@mixin marginbottom($size, $baseline) { ... }

Description

Calculate the Margin Bottom from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include marginbottom(30);
}

css

.box {
  margin-bottom: 1.875rem;
}

Requires

Used by

margintop

@mixin margintop($size, $baseline) { ... }

Description

Calculate the Margin Top from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include margintop(30);
}

css

.box {
  margin-top: 1.875rem;
}

Requires

marginleft

@mixin marginleft($size, $baseline) { ... }

Description

Calculate the Margin Left from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include marginleft(30);
}

css

.box {
  margin-left: 1.875rem;
}

Requires

marginright

@mixin marginright($size, $baseline) { ... }

Description

Calculate the Margin Right from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include marginright(30);
}

css

.box {
  margin-right: 1.875rem;
}

Requires

paddingtop

@mixin paddingtop($size, $baseline) { ... }

Description

Calculate the Padding Top from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include paddingtop(30);
}

css

.box {
  padding-top: 1.875rem;
}

Requires

paddingbottom

@mixin paddingbottom($size, $baseline) { ... }

Description

Calculate the Padding Bottom from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include paddingbottom(30);
}

css

.box {
  padding-bottom: 1.875rem;
}

Requires

paddingleft

@mixin paddingleft($size, $baseline) { ... }

Description

Calculate the Padding Left from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include paddingleft(30);
}

css

.box {
  padding-left: 1.875rem;
}

Requires

paddingright

@mixin paddingright($size, $baseline) { ... }

Description

Calculate the Padding Right from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include paddingright(30);
}

css

.box {
  padding-right: 1.875rem;
}

Requires

height

@mixin height($size, $baseline) { ... }

Description

Calculate the Height from PX to REM, provides a px Fallback

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size

Number none
$baseline

When 'true', the Value follow the Baselinerule

Any none

Example

scss

.box {
  @include height(200);
}

css

.box {
  height: 12.5rem;
}

Requires