Animation

variables

for-animation-fade-to-opacity

$for-animation-fade-to-opacity: 0.6 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-fade-to-opacity

opacity value during :hover in for-fade()

Float0.6

Used by

Author

  • Michael Becker

for-animation-fade-delay

$for-animation-fade-delay: 0s !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-fade-delay

delay of fade effect in for-fade()

Float0s

Used by

Author

  • Michael Becker

for-animation-fade-duration

$for-animation-fade-duration: 0.4s !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-fade-duration

duration of the fade effect in for-fade()

Float0.4s

Used by

Author

  • Michael Becker

for-animation-fade-timing-function

$for-animation-fade-timing-function: linear !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-fade-timing-function

CSS3 timing function for transition in for-fade()

Stringlinear

Used by

Author

  • Michael Becker

for-animation-zoom-to-scale

$for-animation-zoom-to-scale: 1.1 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-zoom-to-scale

the scale() size of the background image in for-zoom()

Float1.1

Used by

Author

  • Michael Becker

for-animation-zoom-to-opacity

$for-animation-zoom-to-opacity: 0.2 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-zoom-to-opacity

what opacity the colored overlay should get in for-zoom()

Float0.6

Used by

Author

  • Michael Becker

for-animation-zoom-bg-overlay

$for-animation-zoom-bg-overlay: rgba(221, 221, 221, 0.2) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-zoom-bg-overlay

what color the colored overlay should get, when false it doesn't get displayed in for-zoom()

Bool or Colorrgba(221, 221, 221, 0.2)

Used by

Author

  • Michael Becker

for-animation-zoom-delay

$for-animation-zoom-delay: 0s !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-zoom-delay

delay of fade effect in for-zoom()

Float0s

Used by

Author

  • Michael Becker

for-animation-zoom-duration

$for-animation-zoom-duration: 0.4s !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-zoom-duration

duration of the fade effect in for-zoom()

Float0.4s

Used by

Author

  • Michael Becker

for-animation-zoom-timing-function

$for-animation-zoom-timing-function: linear !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-animation-zoom-timing-function

CSS3 timing function for transition in for-zoom()

Stringlinear

Used by

Author

  • Michael Becker

mixins

for-fade

@mixin for-fade($to-opacity: $for-animation-fade-to-opacity, $duration: $for-animation-fade-duration, $timing-function: $for-animation-fade-timing-function, $delay: $for-animation-fade-delay) { ... }

Description

Fade effect with included hover

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$to-opacity

the opacity that should be applied on hover

Float$for-animation-fade-to-opacity
$duration

the duration the opacity should long

Int$for-animation-fade-duration
$timing-function

the css3 transition timing function that should be used

Float$for-animation-fade-timing-function
$delay

the delay that should be there before the transition starts

Float$for-animation-fade-delay

Requires

Author

  • Michael Becker

for-zoom-base

@mixin for-zoom-base($bg-url, $selector-image, $selector-overlay, $bg-overlay: false, $to-scale: null, $to-opacity: null, $duration: null, $timing-function: null, $delay: null) { ... }

Description

Base mixin for all the zoom

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$bg-url

needed for pure css animation, optional for html elements based, will be used as background for zoom effect

String none
$selector-image

selector for thing containing the image for the effect, html or pure pseudo is in use

String none
$selector-overlay

optinal when no overlay wanted, a transparent overlay, behind the content

String none
$bg-overlay

optional, false: not displaying, null: use default config, else: Color Value (rgba(), hex, ..)

Bool or Colorfalse
$to-scale

to which scale the image should animate

Intnull
$to-opacity

to which opacity the overlay should animate

Intnull
$duration

how long the animations should take

Intnull
$timing-function

what css3 timing function should be used for the animation

Intnull
$delay

how long the animation should be delayed

Intnull

Requires

Used by

Author

  • Michael Becker

for-zoom

@mixin for-zoom($bg-url, $bg-overlay: false, $to-scale: null, $to-opacity: null, $duration: null, $timing-function: null, $delay: null) { ... }

Description

Generates a background at this element which zooms in with hover and there could be some overlay over it

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$bg-url

will be used as background for zoom effect

String none
$bg-overlay

optional, false: not displaying, null: use default config, else: Color Value (rgba(), hex, ..)

Bool or Colorfalse
$to-scale

to which scale the image should animate

Intnull
$to-opacity

to which opacity the overlay should animate

Intnull
$duration

how long the animations should take

Intnull
$timing-function

what css3 timing function should be used for the animation

Intnull
$delay

how long the animation should be delayed

Intnull

Requires

Author

  • Michael Becker

for-zoom-html

@mixin for-zoom-html($selector-image, $selector-overlay, $bg-overlay: false, $to-scale: null, $to-opacity: null, $duration: null, $timing-function: null, $delay: null) { ... }

Description

Zoom mixin for html container

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector-image

selector for thing containing the image for the effect, html or pure pseudo is in use

String none
$selector-overlay

optinal when no overlay wanted, a transparent overlay, behind the content

String none
$bg-overlay

optional, false: not displaying, null: use default config, else: Color Value (rgba(), hex, ..)

Bool or Colorfalse
$to-scale

to which scale the image should animate

Intnull
$to-opacity

to which opacity the overlay should animate

Intnull
$duration

how long the animations should take

Intnull
$timing-function

what css3 timing function should be used for the animation

Intnull
$delay

how long the animation should be delayed

Intnull

Requires

Author

  • Michael Becker

csss

.#{$for-output-prefix}fade

.#{$for-output-prefix}fade { ... }

Description

Selector for animation fade, fades away on hover .for-fade

Author

  • Michael Becker

.#{$for-output-prefix}zoom

.#{$for-output-prefix}zoom { ... }

Description

Selector for animation zoom .for-zoom img:first-child - gets background and zooms on hover

Author

  • Michael Becker

.#{$for-output-prefix}zoom-overlay

.#{$for-output-prefix}zoom-overlay { ... }

Description

Selector for animation zoom with overlay .for-zoom img:first-child - gets background and zooms on hover .for-zoom .for-zoom-overlay - gets a semi-transparent overlay on background and background for following elements

Author

  • Michael Becker

Calculation

functions

for-even

@function for-even() { ... }

Description

Returns true if the number is even

Parameters

None.

Author

  • Michael Becker

Color

variables

for-grayscale-qty

$for-grayscale-qty: 5;

Map structure

key Namekey Descriptionkey Typekey Value
$for-grayscale-qty

how big the grayscale should be, needs to be an eneven number, half is negative (n1, n2, n3..), half positive (p1, p2, p3...)

Int5

Author

  • Michael Becker

for-grayscale-base

$for-grayscale-base: #7f7f7f;

Map structure

key Namekey Descriptionkey Typekey Value
$for-grayscale-base

center of the grayscale

Color#7f7f7f

Used by

Author

  • Michael Becker

for-grayscale-base-n2

$for-grayscale-base-n2: for-darken($for-grayscale-base, 80%);

Map structure

key Namekey Descriptionkey Typekey Value
$for-grayscale-base-n2

negative grayscale, dark step 2

Colorfor-darken($for-grayscale-base, 80)

Author

  • Michael Becker

for-grayscale-base-n1

$for-grayscale-base-n1: for-darken($for-grayscale-base, 40%);

Map structure

key Namekey Descriptionkey Typekey Value
$for-grayscale-base-n2

negative grayscale, dark step 1

Colorfor-darken($for-grayscale-base, 40)

Author

  • Michael Becker

for-grayscale-base-p1

$for-grayscale-base-p1: for-lighten($for-grayscale-base, 40%);

Map structure

key Namekey Descriptionkey Typekey Value
$for-grayscale-base-p1

positive grayscale, light step 1

Colorfor-lighten($for-grayscale-base, 40)

Author

  • Michael Becker

for-grayscale-base-p2

$for-grayscale-base-p2: for-lighten($for-grayscale-base, 80%);

Map structure

key Namekey Descriptionkey Typekey Value
$for-grayscale-base-p2

positive grayscale, light step 2

Colorfor-lighten($for-grayscale-base, 80)

Author

  • Michael Becker

for-general-color-primary

$for-general-color-primary: #6ab42a !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-color-primary

primary-color

Color#6ab42a

Author

  • Michael Becker

for-general-color-secondary

$for-general-color-secondary: #04a !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-color-secondary

secondary-color

Color#04a

Author

  • Michael Becker

functions

for-lighten

@function for-lighten($color, $percentage) { ... }

Description

Returns a granular lighted color, uses scale-color not lighten

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

the color which should be lighted

Color none
$percentage

how much the color should be lighted, e.g. 40%

Int none

Used by

Author

  • Michael Becker

for-darken

@function for-darken($color, $percentage) { ... }

Description

Returns a granular darked color, uses scale-color not darken

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

the color which should be darkened

Color none
$percentage

how much the color should be darkened, e.g. 40%

Int none

Used by

Author

  • Michael Becker

for-grayscale

@function for-grayscale($ident, $grayscale-qty: $for-grayscale-qty, $grayscale-base: $for-grayscale-base) { ... }

Description

Generates a grayscale

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$ident

negative values will be dark grayscale, 0 is grayscale-base, positivie is light grayscale

Int none
$grayscale-qty

how much steps the grayscale should have

Int$for-grayscale-qty
$grayscale-base

what should be the center of the grayscale

Color$for-grayscale-base

Requires

Used by

Author

  • Michael Becker

mixins

for-linear-gradient-2-color

@mixin for-linear-gradient-2-color($first-color, $second-color, $angular) { ... }

Description

Generates a 2 color gradient background

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$first-color

first color for the gradient (left one)

Color none
$second-color

second color for the gradient (right one)

Color none
$angular

the degree the gradient should be tilted

Float none

Author

  • Michael Becker

for-grayscale

@mixin for-grayscale($grayscale-qty: $for-grayscale-qty, $grayscale-base: $for-grayscale-base) { ... }

Description

Generates a grayscale

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$grayscale-qty

how much steps the grayscale should have

Int$for-grayscale-qty
$grayscale-base

what should be the center of the grayscale

Color$for-grayscale-base

Requires

Author

  • Michael Becker

config:output

variables

for-output-prefix

$for-output-prefix: for- !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-prefix

will be prefixed on all css output generated by Formanta

Stringfor-

Used by

Author

  • Michael Becker

for-output-all

$for-output-all: true !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-all

turn off or on css output: at all

Booltrue

Author

  • Michael Becker

for-output-animation

$for-output-animation: $for-output-all !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-animation

turn off or on css output: animation

Bool$for-output-all

Author

  • Michael Becker

for-output-color

$for-output-color: $for-output-all !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-color

turn off or on css output: color

Bool$for-output-all

Author

  • Michael Becker

for-output-grid

$for-output-grid: $for-output-all !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-grid

turn off or on css output: grid

Bool$for-output-all

Author

  • Michael Becker

for-output-container

$for-output-container: $for-output-all !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-container

turn off or on css output: container

Bool$for-output-container

Author

  • Michael Becker

for-output-typography

$for-output-typography: $for-output-all !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-typography

turn off or on css output: typography

Bool$for-output-all

Author

  • Michael Becker

for-output-reset

$for-output-reset: $for-output-all !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-output-reset

turn off or on css output: reset rules by formanta

Bool$for-output-all

Author

  • Michael Becker

Container

variables

for-container-lgx-width

$for-container-lgx-width: 1600px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-container-lgx-width

width of the container on bg lgx

Size1600px

Used by

Author

  • Michael Becker

for-container-lg-width

$for-container-lg-width: 1000px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-container-lg-width

width of the container on bg lg

Size1000px

Used by

Author

  • Michael Becker

for-container-md-width

$for-container-md-width: 940px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-container-md-width

width of the container on bg md

Size940px

Used by

Author

  • Michael Becker

for-container-sm-width

$for-container-sm-width: 100% !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-container-sm-width

width of the container on bg sm

Size100%

Used by

Author

  • Michael Becker

for-container-smx-width

$for-container-smx-width: 100% !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-container-smx-width

width of the container on bg smx

Size100%

Used by

Author

  • Michael Becker

mixins

for-container

@mixin for-container() { ... }

Description

Generates the size and property of a for-container with the required breakpoints and centered margin

Parameters

None.

Output

none

Requires

Author

  • Michael Becker

csss

.#{$for-output-prefix}container

.#{$for-output-prefix}container { ... }

Description

.for-container for responsive, centered, basic container

Author

  • Michael Becker

Grid

variables

for-bp-lgx-min-size

$for-bp-lgx-min-size: 3000px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-bp-lgx-min-size

the minimum size for screen size lg eXtra

Size3000px

Used by

Author

  • Michael Becker

for-bp-lg-min-size

$for-bp-lg-min-size: 1200px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-bp-lg-min-size

the minimum size for screen size lg

Size1200px

Used by

Author

  • Michael Becker

for-bp-md-min-size

$for-bp-md-min-size: 992px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-bp-md-min-size

the minimum size for screen size md

Size992px

Used by

Author

  • Michael Becker

for-bp-sm-min-size

$for-bp-sm-min-size: 768px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-bp-sm-min-size

the minimum size for screen size sm

Size768px

Used by

Author

  • Michael Becker

for-bp-smx-max-size

$for-bp-smx-max-size: $for-bp-sm-min-size - 1 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-bp-smx-max-size

the maximum size for screen size smale eXtra

Size$for-bp-sm-min-size - 1

Used by

Author

  • Michael Becker

for-col-qty

$for-col-qty: 24 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-col-qty

how much columns the grid should be based of, 12 or 24 are a good match

Int24

Author

  • Michael Becker

for-col-basic-size

$for-col-basic-size: 100% / $for-col-qty !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-col-basic-size

basic size for one column element

Size100% / $for-col-qty

Author

  • Michael Becker

mixins

for-vertical-align

@mixin for-vertical-align($position: relative) { ... }

Description

Will position elements vertical aligned middle

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$position

The position the element should become, normally relative is working

Stringrelative

Output

positioning with top: 50% and a for-transform with translateY(-50%)

Author

  • Michael Becker

for-horizontal-align

@mixin for-horizontal-align($position: absolute) { ... }

Description

Will position elements horizontal aligned center

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$position

The position the element should become, normally relative is working

Stringabsolute

Output

positioning with left: 50% and a for-transform with translateX(-50%)

Author

  • Michael Becker

for-display-block

@mixin for-display-block() { ... }

Parameters

None.

Output

display: block;

Used by

Author

  • Michael Becker

for-display-inline-block

@mixin for-display-inline-block() { ... }

Parameters

None.

Output

display: inline-block;

Author

  • Michael Becker

for-display-inline

@mixin for-display-inline() { ... }

Parameters

None.

Output

display: inline;

Author

  • Michael Becker

for-clearfix

@mixin for-clearfix() { ... }

Description

Gives float parents its size

Parameters

None.

Example

Include this mixin on a container if all children are floated, gives the container a proper size.

Output

:before and :after tricks with display: table on before and after and clear: both only on :after

Used by

Author

  • Michael Becker

for-clear-both

@mixin for-clear-both() { ... }

Parameters

None.

Output

clear: both;

Author

  • Michael Becker

for-clear-left

@mixin for-clear-left() { ... }

Parameters

None.

Output

clear: left;

Author

  • Michael Becker

for-clear-right

@mixin for-clear-right() { ... }

Parameters

None.

Output

clear: right;

Author

  • Michael Becker

for-col-base

@mixin for-col-base() { ... }

Description

Basic column style

Parameters

None.

Author

  • Michael Becker

for-col

@mixin for-col($number, $col-qty: $for-col-qty) { ... }

Description

Generates size for a column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$for-col-qty

Requires

Author

  • Michael Becker

for-col-sm

@mixin for-col-sm($number, $col-qty: $for-col-qty) { ... }

Description

Generates a column for breakpoint size sm and bigger

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$for-col-qty

Author

  • Michael Becker

for-col-md

@mixin for-col-md($number, $col-qty: $for-col-qty) { ... }

Description

Generates a column for breakpoint size md

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$for-col-qty

Author

  • Michael Becker

for-col-lg

@mixin for-col-lg($number, $col-qty: $for-col-qty) { ... }

Description

Generates a column for breakpoint size lg

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$for-col-qty

Author

  • Michael Becker

for-col-lgx

@mixin for-col-lgx($number, $col-qty: $for-col-qty) { ... }

Description

Generates a column for breakpoint size lgx

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column you want

Int none
$col-qty

max. columns used

Int$for-col-qty

Author

  • Michael Becker

functions

for-col

@function for-col($number, $col-qty: $for-col-qty) { ... }

Description

Easy column size calculator for whatever size the grid wanted is based on

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

id of the column calculated

Int none
$col-qty

max. columns used, overwrites the standard column qty grid

Int$for-col-qty

Example

"1,5" (1 out of 5) gives the size (20)[%] for a column in a 5er grid system, even the default grid system doesn't allow the use of 5 cols per row, this would be a 4.8 column "4.8 out of 24" with default $for-col-qty: 24
"1" (1 out of default) gives the size (4,166)[%] for a column in a 24er grid system with default $for-col-qty: 24

Used by

Author

  • Michael Becker

csss

.#{$for-output-prefix}row

.#{$for-output-prefix}row { ... }

Description

.for-row - should be direct father container for all .for-col-*

Author

  • Michael Becker

.#{$for-output-prefix}visible

.#{$for-output-prefix}visible { ... }

Description

Display the thing

Author

  • Michael Becker

.#{$for-output-prefix}hidden

.#{$for-output-prefix}hidden { ... }

Description

Hide the thing

Author

  • Michael Becker

.#{$for-output-prefix}visible

.#{$for-output-prefix}visible { ... }

Description

Display the thing

Author

  • Michael Becker

.#{$for-output-prefix}hidden

.#{$for-output-prefix}hidden { ... }

Description

Hide the thing

Author

  • Michael Becker

.#{$for-output-prefix}visible-smx

.#{$for-output-prefix}visible-smx { ... }

Description

Display the thing: bp smx

Author

  • Michael Becker

.#{$for-output-prefix}hidden-smx

.#{$for-output-prefix}hidden-smx { ... }

Description

Hide the thing: bp smx

Author

  • Michael Becker

.#{$for-output-prefix}visible-sm-up

.#{$for-output-prefix}visible-sm-up { ... }

Description

Display the thing: bp sm up

Author

  • Michael Becker

.#{$for-output-prefix}visible-sm

.#{$for-output-prefix}visible-sm { ... }

Description

Display the thing: bp sm

Author

  • Michael Becker

.#{$for-output-prefix}visible-sm-down

.#{$for-output-prefix}visible-sm-down { ... }

Description

Display the thing: bp sm down

Author

  • Michael Becker

.#{$for-output-prefix}hidden-sm-up

.#{$for-output-prefix}hidden-sm-up { ... }

Description

Hide the thing: bp sm up

Author

  • Michael Becker

.#{$for-output-prefix}hidden-sm

.#{$for-output-prefix}hidden-sm { ... }

Description

Hide the thing: bp sm

Author

  • Michael Becker

.#{$for-output-prefix}hidden-sm-down

.#{$for-output-prefix}hidden-sm-down { ... }

Description

Hide the thing: bp sm down

Author

  • Michael Becker

.#{$for-output-prefix}visible-md-up

.#{$for-output-prefix}visible-md-up { ... }

Description

Display the thing: bp md up

Author

  • Michael Becker

.#{$for-output-prefix}visible-md

.#{$for-output-prefix}visible-md { ... }

Description

Display the thing: bp md

Author

  • Michael Becker

.#{$for-output-prefix}visible-md-down

.#{$for-output-prefix}visible-md-down { ... }

Description

Display the thing: bp md down

Author

  • Michael Becker

.#{$for-output-prefix}hidden-md-up

.#{$for-output-prefix}hidden-md-up { ... }

Description

Hide the thing: bp md up

Author

  • Michael Becker

.#{$for-output-prefix}hidden-md

.#{$for-output-prefix}hidden-md { ... }

Description

Hide the thing: bp md

Author

  • Michael Becker

.#{$for-output-prefix}hidden-md-down

.#{$for-output-prefix}hidden-md-down { ... }

Description

Hide the thing: bp md down

Author

  • Michael Becker

.#{$for-output-prefix}visible-lg-up

.#{$for-output-prefix}visible-lg-up { ... }

Description

Display the thing: bp lg up

Author

  • Michael Becker

.#{$for-output-prefix}visible-lg

.#{$for-output-prefix}visible-lg { ... }

Description

Display the thing: bp lg

Author

  • Michael Becker

.#{$for-output-prefix}visible-lg-down

.#{$for-output-prefix}visible-lg-down { ... }

Description

Display the thing: bp lg down

Author

  • Michael Becker

.#{$for-output-prefix}hidden-lg-up

.#{$for-output-prefix}hidden-lg-up { ... }

Description

Hide the thing: bp lg up

Author

  • Michael Becker

.#{$for-output-prefix}hidden-lg

.#{$for-output-prefix}hidden-lg { ... }

Description

Hide the thing: bp lg

Author

  • Michael Becker

.#{$for-output-prefix}hidden-lg-down

.#{$for-output-prefix}hidden-lg-down { ... }

Description

Hide the thing: bp lg down

Author

  • Michael Becker

.#{$for-output-prefix}visible-lgx

.#{$for-output-prefix}visible-lgx { ... }

Description

Display the thing: bp lgx

Author

  • Michael Becker

.#{$for-output-prefix}hidden-lgx

.#{$for-output-prefix}hidden-lgx { ... }

Description

Hide the thing: bp lgx

Author

  • Michael Becker

Grid: Breakpoint

mixins

for-bp-smx

@mixin for-bp-smx() { ... }

Description

Breakpoint mixin for sm-eXtra got no -up or -down version, as -up would be all and -down would be like normal smx, as it is the smallest size

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen smaller or same then $for-bp-smx-max-size

Requires

Author

  • Michael Becker

for-bp-sm-up

@mixin for-bp-sm-up() { ... }

Description

Breakpoint mixin for sm and bigger

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $for-bp-sm-min-size

Requires

Author

  • Michael Becker

for-bp-sm

@mixin for-bp-sm() { ... }

Description

Breakpoint mixin for only sm

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $for-bp-sm-min-size and smaller then $for-bp-md-min-size

Requires

Author

  • Michael Becker

for-bp-sm-down

@mixin for-bp-sm-down() { ... }

Description

Breakpoint mixin for sm and smaller

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen smaller then $for-bp-md-min-size

Requires

Author

  • Michael Becker

for-bp-md-up

@mixin for-bp-md-up() { ... }

Description

Breakpoint mixin for md and bigger

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $for-bp-sm-min-size

Requires

Author

  • Michael Becker

for-bp-md

@mixin for-bp-md() { ... }

Description

Breakpoint mixin for only md

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $for-bp-sm-min-size and smaller then $for-bp-md-min-size

Requires

Author

  • Michael Becker

for-bp-md-down

@mixin for-bp-md-down() { ... }

Description

Breakpoint mixin for md and smaller

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen smaller then $for-bp-md-min-size

Requires

Author

  • Michael Becker

for-bp-lg-up

@mixin for-bp-lg-up() { ... }

Description

Breakpoint mixin for lg and bigger

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $for-bp-lg-min-size

Requires

Author

  • Michael Becker

for-bp-lg

@mixin for-bp-lg() { ... }

Description

Breakpoint mixin for only lg

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $for-bp-lg-min-size and smaller then $for-bp-lgx-min-size

Requires

Author

  • Michael Becker

for-bp-lg-down

@mixin for-bp-lg-down() { ... }

Description

Breakpoint mixin for lg and smaller

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen smaller then $for-bp-lgx-min-size

Requires

Author

  • Michael Becker

for-bp-lgx

@mixin for-bp-lgx() { ... }

Description

Breakpoint mixin for lg-eXtra This screen size got no -up or -down version, as -down would be all and -up would be like normal lgx, as it is the highest size

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: will only be displayed when screen bigger then $for-bp-lgx-min-size

Requires

Author

  • Michael Becker

Grid: Gutter

variables

for-gutter-thickest

$for-gutter-thickest: 25px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-thickest

gutter size for thickest

Size75px

Used by

Author

  • Michael Becker

for-gutter-thicker

$for-gutter-thicker: 20px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-thicker

gutter size for thicker

Size50px

Used by

Author

  • Michael Becker

for-gutter-thick

$for-gutter-thick: 15px 15px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-thick

gutter size for thick

Size15px 30px

Used by

Author

  • Michael Becker

for-gutter-normal

$for-gutter-normal: 10px 15px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-normal

gutter size for normal

Size10px 20px

Used by

Author

  • Michael Becker

for-gutter-thin

$for-gutter-thin: 10px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-thin

gutter size for thin

Size10px

Used by

Author

  • Michael Becker

for-gutter-thinner

$for-gutter-thinner: 6px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-thinner

gutter size for thinner

Size6px

Used by

Author

  • Michael Becker

for-gutter-thinnest

$for-gutter-thinnest: 3px !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-thinnest

gutter size for thinnest

Size3px

Used by

Author

  • Michael Becker

for-gutter-lgx

$for-gutter-lgx: $for-gutter-thick !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-lgx

the gutter thicknest applied to bp-lgx

Size$for-gutter-thick

Used by

Author

  • Michael Becker

for-gutter-lg

$for-gutter-lg: $for-gutter-thick !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-lg

the gutter thicknest applied to bp-lg

Size$for-gutter-thick

Used by

Author

  • Michael Becker

for-gutter-md

$for-gutter-md: $for-gutter-normal !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-md

the gutter thicknest applied to bp-md

Size$for-gutter-normal

Used by

Author

  • Michael Becker

for-gutter-sm

$for-gutter-sm: $for-gutter-normal !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-sm

the gutter thicknest applied to bp-sm

Size$for-gutter-normal

Used by

Author

  • Michael Becker

for-gutter-smx

$for-gutter-smx: $for-gutter-thin !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-gutter-smx

the gutter thicknest applied to bp-smx

Size$for-gutter-thin

Used by

Author

  • Michael Becker

mixins

for-gutter

@mixin for-gutter($max: lgx, $use: padding) { ... }

Description

Complete responsive gutter

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$max

Which gutter size shoud be the maximum, when md the thickest gutter will be $for-gutter-md, takes breakpoint sizes

Stringlgx
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter as padding with breakpoints

Requires

Author

  • Michael Becker

for-gutter-thickest

@mixin for-gutter-thickest($use: padding) { ... }

Description

Applies the thickest gutter as (default) padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter on box element $use

Requires

Author

  • Michael Becker

for-gutter-thicker

@mixin for-gutter-thicker($use: padding) { ... }

Description

Applies the thicker gutter as padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter on box element $use

Requires

Author

  • Michael Becker

for-gutter-thick

@mixin for-gutter-thick($use: padding) { ... }

Description

Applies the thick gutter as padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter on box element $use

Requires

Author

  • Michael Becker

for-gutter-normal

@mixin for-gutter-normal($use: padding) { ... }

Description

Applies the normal gutter as padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter on box element $use

Requires

Author

  • Michael Becker

for-gutter-thin

@mixin for-gutter-thin($use: padding) { ... }

Description

Applies the thin gutter as padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter on box element $use

Requires

Author

  • Michael Becker

for-gutter-thinner

@mixin for-gutter-thinner($use: padding) { ... }

Description

Applies the thinner gutter as padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter on box element $use

Requires

Author

  • Michael Becker

for-gutter-thinnest

@mixin for-gutter-thinnest($use: padding) { ... }

Description

Applies the thinnest gutter as padding

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$use

What box element should be used to apply the gutter, default is padding

Stringpadding

Output

gutter on box element $use

Requires

Author

  • Michael Becker

Grid: Visibility

mixins

for-visible

@mixin for-visible() { ... }

Description

Display the thing

Parameters

None.

Requires

Author

  • Michael Becker

for-hidden

@mixin for-hidden() { ... }

Description

Hide the thing

Parameters

None.

Author

  • Michael Becker

for-visible-smx

@mixin for-visible-smx() { ... }

Description

Display the thing: bp smx

Parameters

None.

Author

  • Michael Becker

for-hidden-smx

@mixin for-hidden-smx() { ... }

Description

Hide the thing: bp smx

Parameters

None.

Author

  • Michael Becker

for-visible-sm-up

@mixin for-visible-sm-up() { ... }

Description

Display the thing: bp sm up

Parameters

None.

Author

  • Michael Becker

for-visible-sm

@mixin for-visible-sm() { ... }

Description

Display the thing: bp sm

Parameters

None.

Author

  • Michael Becker

for-visible-sm-down

@mixin for-visible-sm-down() { ... }

Description

Display the thing: bp sm down

Parameters

None.

Author

  • Michael Becker

for-hidden-sm-up

@mixin for-hidden-sm-up() { ... }

Description

Hide the thing: bp sm up

Parameters

None.

Author

  • Michael Becker

for-hidden-sm

@mixin for-hidden-sm() { ... }

Description

Hide the thing: bp sm

Parameters

None.

Author

  • Michael Becker

for-hidden-sm-down

@mixin for-hidden-sm-down() { ... }

Description

Hide the thing: bp sm down

Parameters

None.

Author

  • Michael Becker

for-visible-md-up

@mixin for-visible-md-up() { ... }

Description

Display the thing: bp md up

Parameters

None.

Author

  • Michael Becker

for-visible-md

@mixin for-visible-md() { ... }

Description

Display the thing: bp md

Parameters

None.

Author

  • Michael Becker

for-visible-md-down

@mixin for-visible-md-down() { ... }

Description

Display the thing: bp md down

Parameters

None.

Author

  • Michael Becker

for-hidden-md-up

@mixin for-hidden-md-up() { ... }

Description

Hide the thing: bp md up

Parameters

None.

Author

  • Michael Becker

for-hidden-md

@mixin for-hidden-md() { ... }

Description

Hide the thing: bp md

Parameters

None.

Author

  • Michael Becker

for-hidden-md-down

@mixin for-hidden-md-down() { ... }

Description

Hide the thing: bp md down

Parameters

None.

Author

  • Michael Becker

for-visible-lg-up

@mixin for-visible-lg-up() { ... }

Description

Display the thing: bp lg up

Parameters

None.

Author

  • Michael Becker

for-visible-lg

@mixin for-visible-lg() { ... }

Description

Display the thing: bp lg

Parameters

None.

Author

  • Michael Becker

for-visible-lg-down

@mixin for-visible-lg-down() { ... }

Description

Display the thing: bp lg down

Parameters

None.

Author

  • Michael Becker

for-hidden-lg-up

@mixin for-hidden-lg-up() { ... }

Description

Hide the thing: bp lg up

Parameters

None.

Author

  • Michael Becker

for-hidden-lg

@mixin for-hidden-lg() { ... }

Description

Hide the thing: bp lg

Parameters

None.

Author

  • Michael Becker

for-hidden-lg-down

@mixin for-hidden-lg-down() { ... }

Description

Hide the thing: bp lg down

Parameters

None.

Author

  • Michael Becker

for-visible-lgx

@mixin for-visible-lgx() { ... }

Description

Display the thing: bp lgx

Parameters

None.

Author

  • Michael Becker

for-hidden-lgx

@mixin for-hidden-lgx() { ... }

Description

Hide the thing: bp lgx

Parameters

None.

Author

  • Michael Becker

typography

variables

for-general-font-color

$for-general-font-color: $for-grayscale-base !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-font-color

in typography

Color$for-grayscale-base

Used by

Author

  • Michael Becker

for-h1-font-color

$for-h1-font-color: $for-general-font-color !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-font-color

in typography

Color$for-general-font-color

Used by

Author

  • Michael Becker

for-h2-font-color

$for-h2-font-color: $for-general-font-color !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-font-color

in typography

Color$for-general-font-color

Used by

Author

  • Michael Becker

for-h3-font-color

$for-h3-font-color: $for-general-font-color !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-font-color

in typography

Color$for-general-font-color

Used by

Author

  • Michael Becker

for-h4-font-color

$for-h4-font-color: $for-general-font-color !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-font-color

in typography

Color$for-general-font-color

Used by

Author

  • Michael Becker

for-h5-font-color

$for-h5-font-color: $for-general-font-color !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-font-color

in typography

Color$for-general-font-color

Used by

Author

  • Michael Becker

for-h6-font-color

$for-h6-font-color: $for-general-font-color !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-font-color

in typography

Color$for-general-font-color

Used by

Author

  • Michael Becker

for-p-font-color

$for-p-font-color: $for-general-font-color !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-font-color

in typography

Color$for-general-font-color

Used by

Author

  • Michael Becker

for-general-font-size

$for-general-font-size: 1rem !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-font-size

in typography

Size1rem

Used by

Author

  • Michael Becker

for-h1-font-size

$for-h1-font-size: $for-general-font-size * 2.5 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-font-size

in typography

Size$for-general-font-size * 2.5

Used by

Author

  • Michael Becker

for-h2-font-size

$for-h2-font-size: $for-general-font-size * 2 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-font-size

in typography

Size$for-general-font-size * 2

Used by

Author

  • Michael Becker

for-h3-font-size

$for-h3-font-size: $for-general-font-size * 1.75 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-font-size

in typography

Size$for-general-font-size * 1.75

Used by

Author

  • Michael Becker

for-h4-font-size

$for-h4-font-size: $for-general-font-size * 1.5 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-font-size

in typography

Size$for-general-font-size * 1.5

Used by

Author

  • Michael Becker

for-h5-font-size

$for-h5-font-size: $for-general-font-size * 1.3 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-font-size

in typography

Size$for-general-font-size * 1.3

Used by

Author

  • Michael Becker

for-h6-font-size

$for-h6-font-size: $for-general-font-size * 1.1 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-font-size

in typography

Size$for-general-font-size * 1.1

Used by

Author

  • Michael Becker

for-p-font-size

$for-p-font-size: $for-general-font-size !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-font-size

in typography

Size$for-general-font-size

Used by

Author

  • Michael Becker

for-general-font-family

$for-general-font-family: Helvetica, sans-serif !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-font-family

in typography

Stringwwwwwwwwwww

Used by

Author

  • Michael Becker

for-h1-font-family

$for-h1-font-family: $for-general-font-family !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-font-family

in typography

String$for-general-font-family

Used by

Author

  • Michael Becker

for-h2-font-family

$for-h2-font-family: $for-general-font-family !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-font-family

in typography

String$for-general-font-family

Used by

Author

  • Michael Becker

for-h3-font-family

$for-h3-font-family: $for-general-font-family !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-font-family

in typography

String$for-general-font-family

Used by

Author

  • Michael Becker

for-h4-font-family

$for-h4-font-family: $for-general-font-family !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-font-family

in typography

String$for-general-font-family

Used by

Author

  • Michael Becker

for-h5-font-family

$for-h5-font-family: $for-general-font-family !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-font-family

in typography

String$for-general-font-family

Used by

Author

  • Michael Becker

for-h6-font-family

$for-h6-font-family: $for-general-font-family !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-font-family

in typography

String$for-general-font-family

Used by

Author

  • Michael Becker

for-p-font-family

$for-p-font-family: $for-general-font-family !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-font-family

in typography

String$for-general-font-family

Used by

Author

  • Michael Becker

for-general-font-weight

$for-general-font-weight: 400 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-font-weight

in typography

Int or String400

Used by

Author

  • Michael Becker

for-h1-font-weight

$for-h1-font-weight: $for-general-font-weight !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-font-weight

in typography

Int or String$for-general-font-weight

Used by

Author

  • Michael Becker

for-h2-font-weight

$for-h2-font-weight: $for-general-font-weight !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-font-weight

in typography

Int or String$for-general-font-weight

Used by

Author

  • Michael Becker

for-h3-font-weight

$for-h3-font-weight: $for-general-font-weight !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-font-weight

in typography

Int or String$for-general-font-weight

Used by

Author

  • Michael Becker

for-h4-font-weight

$for-h4-font-weight: $for-general-font-weight !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-font-weight

in typography

Int or String$for-general-font-weight

Used by

Author

  • Michael Becker

for-h5-font-weight

$for-h5-font-weight: $for-general-font-weight !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-font-weight

in typography

Int or String$for-general-font-weight

Used by

Author

  • Michael Becker

for-h6-font-weight

$for-h6-font-weight: $for-general-font-weight !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-font-weight

in typography

Int or String$for-general-font-weight

Used by

Author

  • Michael Becker

for-p-font-weight

$for-p-font-weight: $for-general-font-weight !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-font-weight

in typography

Int or String$for-general-font-weight

Used by

Author

  • Michael Becker

for-general-line-height

$for-general-line-height: normal !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-line-height

in typography

Size or Stringnormal

Used by

Author

  • Michael Becker

for-h1-line-height

$for-h1-line-height: $for-general-line-height !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-line-height

in typography

Size or String$for-general-line-height

Used by

Author

  • Michael Becker

for-h2-line-height

$for-h2-line-height: $for-general-line-height !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-line-height

in typography

Size or String$for-general-line-height

Used by

Author

  • Michael Becker

for-h3-line-height

$for-h3-line-height: $for-general-line-height !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-line-height

in typography

Size or String$for-general-line-height

Used by

Author

  • Michael Becker

for-h4-line-height

$for-h4-line-height: $for-general-line-height !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-line-height

in typography

Size or String$for-general-line-height

Used by

Author

  • Michael Becker

for-h5-line-height

$for-h5-line-height: $for-general-line-height !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-line-height

in typography

Size or String$for-general-line-height

Used by

Author

  • Michael Becker

for-h6-line-height

$for-h6-line-height: $for-general-line-height !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-line-height

in typography

Size or String$for-general-line-height

Used by

Author

  • Michael Becker

for-p-line-height

$for-p-line-height: $for-general-line-height !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-line-height

in typography

Size or String$for-general-line-height

Used by

Author

  • Michael Becker

for-general-font-style

$for-general-font-style: normal !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-font-style

in typography

Stringnormal

Used by

Author

  • Michael Becker

for-h1-font-style

$for-h1-font-style: $for-general-font-style !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-font-style

in typography

String$for-general-font-style

Used by

Author

  • Michael Becker

for-h2-font-style

$for-h2-font-style: $for-general-font-style !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-font-style

in typography

String$for-general-font-style

Used by

Author

  • Michael Becker

for-h3-font-style

$for-h3-font-style: $for-general-font-style !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-font-style

in typography

String$for-general-font-style

Used by

Author

  • Michael Becker

for-h4-font-style

$for-h4-font-style: $for-general-font-style !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-font-style

in typography

String$for-general-font-style

Used by

Author

  • Michael Becker

for-h5-font-style

$for-h5-font-style: $for-general-font-style !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-font-style

in typography

String$for-general-font-style

Used by

Author

  • Michael Becker

for-h6-font-style

$for-h6-font-style: $for-general-font-style !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-font-style

in typography

String$for-general-font-style

Used by

Author

  • Michael Becker

for-p-font-style

$for-p-font-style: $for-general-font-style !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-font-style

in typography

String$for-general-font-style

Used by

Author

  • Michael Becker

for-general-font-variant

$for-general-font-variant: normal !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-font-variant

in typography

Stringnormal

Author

  • Michael Becker

for-h1-font-variant

$for-h1-font-variant: $for-general-font-variant !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-font-variant

in typography

String$for-general-font-variant

Used by

Author

  • Michael Becker

for-h2-font-variant

$for-h2-font-variant: $for-general-font-variant !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-font-variant

in typography

String$for-general-font-variant

Used by

Author

  • Michael Becker

for-h3-font-variant

$for-h3-font-variant: $for-general-font-variant !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-font-variant

in typography

String$for-general-font-variant

Used by

Author

  • Michael Becker

for-h4-font-variant

$for-h4-font-variant: $for-general-font-variant !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-font-variant

in typography

String$for-general-font-variant

Used by

Author

  • Michael Becker

for-h5-font-variant

$for-h5-font-variant: $for-general-font-variant !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-font-variant

in typography

String$for-general-font-variant

Used by

Author

  • Michael Becker

for-h6-font-variant

$for-h6-font-variant: $for-general-font-variant !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-font-variant

in typography

String$for-general-font-variant

Used by

Author

  • Michael Becker

for-p-font-variant

$for-p-font-variant: $for-general-font-variant !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-font-variant

in typography

String$for-general-font-variant

Used by

Author

  • Michael Becker

for-general-text-decoration

$for-general-text-decoration: none !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-text-decoration

in typography

Stringnone

Used by

Author

  • Michael Becker

for-h1-text-decoration

$for-h1-text-decoration: $for-general-text-decoration !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-text-decoration

in typography

String$for-general-text-decoration

Used by

Author

  • Michael Becker

for-h2-text-decoration

$for-h2-text-decoration: $for-general-text-decoration !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-text-decoration

in typography

String$for-general-text-decoration

Used by

Author

  • Michael Becker

for-h3-text-decoration

$for-h3-text-decoration: $for-general-text-decoration !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-text-decoration

in typography

String$for-general-text-decoration

Used by

Author

  • Michael Becker

for-h4-text-decoration

$for-h4-text-decoration: $for-general-text-decoration !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-text-decoration

in typography

String$for-general-text-decoration

Used by

Author

  • Michael Becker

for-h5-text-decoration

$for-h5-text-decoration: $for-general-text-decoration !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-text-decoration

in typography

String$for-general-text-decoration

Used by

Author

  • Michael Becker

for-h6-text-decoration

$for-h6-text-decoration: $for-general-text-decoration !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-text-decoration

in typography

String$for-general-text-decoration

Used by

Author

  • Michael Becker

for-p-text-decoration

$for-p-text-decoration: $for-general-text-decoration !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-text-decoration

in typography

String$for-general-text-decoration

Used by

Author

  • Michael Becker

for-general-text-transform

$for-general-text-transform: none !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-text-transform

in typography

Stringnone

Used by

Author

  • Michael Becker

for-h1-text-transform

$for-h1-text-transform: $for-general-text-transform !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-text-transform

in typography

String$for-general-text-transform

Used by

Author

  • Michael Becker

for-h2-text-transform

$for-h2-text-transform: $for-general-text-transform !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-text-transform

in typography

String$for-general-text-transform

Used by

Author

  • Michael Becker

for-h3-text-transform

$for-h3-text-transform: $for-general-text-transform !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-text-transform

in typography

String$for-general-text-transform

Used by

Author

  • Michael Becker

for-h4-text-transform

$for-h4-text-transform: $for-general-text-transform !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-text-transform

in typography

String$for-general-text-transform

Used by

Author

  • Michael Becker

for-h5-text-transform

$for-h5-text-transform: $for-general-text-transform !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-text-transform

in typography

String$for-general-text-transform

Used by

Author

  • Michael Becker

for-h6-text-transform

$for-h6-text-transform: $for-general-text-transform !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-text-transform

in typography

String$for-general-text-transform

Used by

Author

  • Michael Becker

for-p-text-transform

$for-p-text-transform: $for-general-text-transform !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-text-transform

in typography

String$for-general-text-transform

Used by

Author

  • Michael Becker

for-general-text-align

$for-general-text-align: left !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-text-align

in typography

Stringleft

Used by

Author

  • Michael Becker

for-h1-text-align

$for-h1-text-align: $for-general-text-align !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-text-align

in typography

String$for-general-text-align

Used by

Author

  • Michael Becker

for-h2-text-align

$for-h2-text-align: $for-general-text-align !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-text-align

in typography

String$for-general-text-align

Used by

Author

  • Michael Becker

for-h3-text-align

$for-h3-text-align: $for-general-text-align !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-text-align

in typography

String$for-general-text-align

Used by

Author

  • Michael Becker

for-h4-text-align

$for-h4-text-align: $for-general-text-align !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-text-align

in typography

String$for-general-text-align

Used by

Author

  • Michael Becker

for-h5-text-align

$for-h5-text-align: $for-general-text-align !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-text-align

in typography

String$for-general-text-align

Used by

Author

  • Michael Becker

for-h6-text-align

$for-h6-text-align: $for-general-text-align !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-text-align

in typography

String$for-general-text-align

Used by

Author

  • Michael Becker

for-p-text-align

$for-p-text-align: $for-general-text-align !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-text-align

in typography

String$for-general-text-align

Used by

Author

  • Michael Becker

for-general-margin-horizontal

$for-general-margin-horizontal: 0 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-margin-horizontal

margin faktor for margin calc in typography

Stringleft

Author

  • Michael Becker

for-general-margin-vertical

$for-general-margin-vertical: 0.85 !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-general-margin-vertical

margin faktor for margin calc in typography

Stringleft

Author

  • Michael Becker

for-h1-margin

$for-h1-margin: ($for-h1-font-size * 1.3 * $for-general-margin-vertical) ($for-h1-font-size * 1.3 * $for-general-margin-horizontal) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h1-margin

in typography

Stringcalculation

Used by

Author

  • Michael Becker

for-h2-margin

$for-h2-margin: ($for-h2-font-size * 0.9 * $for-general-margin-vertical) ($for-h2-font-size * 0.9 * $for-general-margin-horizontal) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h2-margin

in typography

Stringcalculation

Used by

Author

  • Michael Becker

for-h3-margin

$for-h3-margin: ($for-h3-font-size * 0.7 * $for-general-margin-vertical) ($for-h3-font-size * 0.7 * $for-general-margin-horizontal) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h3-margin

in typography

Stringcalculation

Used by

Author

  • Michael Becker

for-h4-margin

$for-h4-margin: ($for-h4-font-size * 0.5 * $for-general-margin-vertical) ($for-h4-font-size * 0.5 * $for-general-margin-horizontal) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h4-margin

in typography

Stringcalculation

Used by

Author

  • Michael Becker

for-h5-margin

$for-h5-margin: ($for-h5-font-size * 0.35 * $for-general-margin-vertical) ($for-h5-font-size * 0.35 * $for-general-margin-horizontal) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h5-margin[calculation]

in typography

String none

Used by

Author

  • Michael Becker

for-h6-margin

$for-h6-margin: ($for-h6-font-size * 0.15 * $for-general-margin-vertical) ($for-h6-font-size * 0.15 * $for-general-margin-horizontal) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-h6-margin

in typography

Stringcalculation

Used by

Author

  • Michael Becker

for-p-margin

$for-p-margin: ($for-p-font-size * 0.3 * $for-general-margin-vertical) ($for-p-font-size * 0.3 * $for-general-margin-horizontal) !default;

Map structure

key Namekey Descriptionkey Typekey Value
$for-p-margin

in typography

Stringcalculation

Used by

Author

  • Michael Becker

mixins

for-typography-general

@mixin for-typography-general() { ... }

Parameters

None.

Output

the general font styling

Requires

Author

  • Michael Becker

for-typography-h1

@mixin for-typography-h1() { ... }

Parameters

None.

Output

the h1 font styling

Requires

Author

  • Michael Becker

for-typography-h2

@mixin for-typography-h2() { ... }

Parameters

None.

Output

the h2 font styling

Requires

Author

  • Michael Becker

for-typography-h3

@mixin for-typography-h3() { ... }

Parameters

None.

Output

the h3 font styling

Requires

Author

  • Michael Becker

for-typography-h4

@mixin for-typography-h4() { ... }

Parameters

None.

Output

the h4 font styling

Requires

Author

  • Michael Becker

for-typography-h5

@mixin for-typography-h5() { ... }

Parameters

None.

Output

the h5 font styling

Requires

Author

  • Michael Becker

for-typography-h6

@mixin for-typography-h6() { ... }

Parameters

None.

Output

the h6 font styling

Requires

Author

  • Michael Becker

for-typography-p

@mixin for-typography-p() { ... }

Parameters

None.

Output

the p font styling

Requires

Author

  • Michael Becker

csss

.#{$for-output-prefix}text-left

.#{$for-output-prefix}text-left { ... }

Description

.for-text-left - aligns text left

Author

  • Michael Becker

.#{$for-output-prefix}text-center

.#{$for-output-prefix}text-center { ... }

Description

.for-text-center - aligns text center

Author

  • Michael Becker

.#{$for-output-prefix}text-right

.#{$for-output-prefix}text-right { ... }

Description

.for-text-right - aligns text right

Author

  • Michael Becker