component: button

mixins

c-button

@mixin c-button($spacing-vertical: 0.5em, $spacing-horizontal: 1em, $background-color: #2196f3, $color: #fff) { ... }

Description

Button.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$spacing-vertical

Spacing vertical.

Number [unit]0.5em
$spacing-horizontal

Spacing horizontal.

Number [unit]1em
$background-color

Background color.

Color#2196f3
$color

Text color.

Color#fff

Example

Usage

.selector {
  @include c-button();
}

Requires

Author

  • Markus Oberlehner

c-button-spacing

@mixin c-button-spacing($spacing-vertical: 0.5em, $spacing-horizontal: 1em) { ... }

Description

Button spacing.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$spacing-vertical

Spacing vertical.

Number [unit]0.5em
$spacing-horizontal

Spacing horizontal.

Number [unit]1em

Example

Usage

.selector {
  @include c-button-spacing();
}

Used by

Author

  • Markus Oberlehner

c-button-full-width

@mixin c-button-full-width() { ... }

Description

Button full width.

Parameters

None.

Example

Usage

.selector {
  @include c-button-full-width();
}

Author

  • Markus Oberlehner

c-button-outline

@mixin c-button-outline($border-width: 0.1875em, $background-color: #2196f3, $color: #fff) { ... }

Description

Button outline.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$border-width

Border width.

Number [unit]0.1875em
$background-color

Background color (when active).

Color#2196f3
$color

Text color (when active).

Color#fff

Example

Usage

.selector {
  @include c-button-outline();
}

Author

  • Markus Oberlehner

c-button-color

@mixin c-button-color($background-color: #2196f3, $color: #fff) { ... }

Description

Button color.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$background-color

Background color.

Color#2196f3
$color

Text color.

Color#fff

Example

Usage

.selector {
  @include c-button-color();
}

Used by

Author

  • Markus Oberlehner

variables

c-button-spacing-vertical-default

$c-button-spacing-vertical-default: setting-spacing(xs) !default;

Description

Default vertical spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-horizontal-default

$c-button-spacing-horizontal-default: setting-spacing(m) !default;

Description

Default horizontal spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-vertical-s

$c-button-spacing-vertical-s: (setting-spacing(xs) / 2) !default;

Description

Size s vertical spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-horizontal-s

$c-button-spacing-horizontal-s: setting-spacing(xs) !default;

Description

Size s horizontal spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-vertical-m

$c-button-spacing-vertical-m: setting-spacing(xs) !default;

Description

Size m vertical spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-horizontal-m

$c-button-spacing-horizontal-m: setting-spacing(m) !default;

Description

Size m horizontal spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-vertical-l

$c-button-spacing-vertical-l: setting-spacing(s) !default;

Description

Size l vertical spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-horizontal-l

$c-button-spacing-horizontal-l: setting-spacing(m) !default;

Description

Size l horizontal spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-vertical-xl

$c-button-spacing-vertical-xl: setting-spacing(m) !default;

Description

Size xl vertical spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-spacing-horizontal-xl

$c-button-spacing-horizontal-xl: setting-spacing(l) !default;

Description

Size xl horizontal spacing.

Type

Number

Author

  • Markus Oberlehner

c-button-outline-border-width

$c-button-outline-border-width: 0.1875em !default;

Description

Outline border width.

Type

Number

Author

  • Markus Oberlehner

c-button-background-color-default

$c-button-background-color-default: setting-color(a) !default;

Description

Default background color.

Type

Color

Author

  • Markus Oberlehner

c-button-color-default

$c-button-color-default: setting-color(a, contrast) !default;

Description

Default color.

Type

Color

Author

  • Markus Oberlehner

generic: box-sizing-reset

mixins

generic-box-sizing-reset

@mixin generic-box-sizing-reset() { ... }

Description

Box sizing reset.

Parameters

None.

Example

Usage

@include generic-box-sizing-reset();

Author

  • Markus Oberlehner

object: aspect-ratio

mixins

o-aspect-ratio-before

@mixin o-aspect-ratio-before($width: 16, $height: 9) { ... }

Description

Aspect ratio before styles.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

Width.

Number16
$height

Height.

Number9

Example

Usage

.selector::before {
  @include o-aspect-ratio-before();
}

Used by

Author

  • Markus Oberlehner

o-aspect-ratio-inner

@mixin o-aspect-ratio-inner() { ... }

Description

Aspect ratio inner styles.

Parameters

None.

Example

Usage

.selector__inner {
  @include o-aspect-ratio-inner();
}

Used by

Author

  • Markus Oberlehner

o-aspect-ratio

@mixin o-aspect-ratio($width: 16, $height: 9, $inner-selector: '.o-aspect-ratio__inner') { ... }

Description

Maintain aspect ratio.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

Width.

Number16
$height

Height.

Number9
$inner-selector

Selector for the aspect ratio inner element.

String'.o-aspect-ratio__inner'

Example

Usage

.selector {
  @include o-aspect-ratio(16, 9, '.selector__inner');
}

Requires

Author

  • Markus Oberlehner

variables

o-aspect-ratio-default

$o-aspect-ratio-default: (
  width: 16,
  height: 9,
) !default;

Description

Container max widths.

Type

Map

Author

  • Markus Oberlehner

object: container

mixins

o-container

@mixin o-container($max-width: 64rem, $spacing-horizontal: 1rem, $center-horizontal: true) { ... }

Description

Basic container class to limit the max-width of the layout and add some padding.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$max-width

Max width.

Number [unit]64rem
$spacing-horizontal

Horizontal spacing.

Number [unit] or Boolean1rem
$center-horizontal

Horizontal centering.

Booleantrue

Example

Usage

.selector {
  @include o-container();
}

Author

  • Markus Oberlehner

variables

o-container-max-widths

$o-container-max-widths: (
  s: 32rem,
  m: 64rem,
  l: 96rem,
) !default;

Description

Container max widths.

Type

Map

Author

  • Markus Oberlehner

o-container-max-width-default

$o-container-max-width-default: m !default;

Description

Default container max width.

Type

String

Author

  • Markus Oberlehner

o-container-spacing-horizontal

$o-container-spacing-horizontal: m !default;

Description

Horizontal spacing.

Type

String

Author

  • Markus Oberlehner

o-container-center-horizontal

$o-container-center-horizontal: true !default;

Description

Horizontal centering.

Type

Boolean

Author

  • Markus Oberlehner

object: grid

mixins

o-grid

@mixin o-grid($gutter-horizontal: 1rem, $gutter-vertical: 1rem, $layout: true) { ... }

Description

Grid wrapper.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$gutter-horizontal

Horizontal gutter size.

Number [unit]1rem
$gutter-vertical

Vertical gutter size.

Number [unit]1rem
$layout

Enable or disable returning layout properties.

Booleantrue

Example

Usage

.selector {
  @include o-grid();
}

Author

  • Markus Oberlehner

o-grid-item

@mixin o-grid-item($gutter-horizontal: 1rem, $gutter-vertical: 1rem, $layout: true) { ... }

Description

Grid item.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$gutter-horizontal

Horizontal gutter size.

Number [unit]1rem
$gutter-vertical

Vertical gutter size.

Number [unit]1rem
$layout

Enable or disable returning layout properties.

Booleantrue

Example

Usage

.selector {
  @include o-grid-item();
}

CSS Output

.selector {
  padding-left: 1rem;
  padding-top: 1rem;
  flex-grow: 1;
  box-sizing: border-box;
}

Author

  • Markus Oberlehner

variables

o-grid-gutter-horizontal-default

$o-grid-gutter-horizontal-default: m !default;

Description

Default horizontal gutter.

Type

String

Author

  • Markus Oberlehner

o-grid-gutter-vertical-default

$o-grid-gutter-vertical-default: m !default;

Description

Default vertical gutter.

Type

String

Author

  • Markus Oberlehner

object: island

mixins

o-island

@mixin o-island($spacing: 1em) { ... }

Description

Box off content.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$spacing

Spacing.

Number [unit]1em

Example

Usage

.selector {
  @include o-island();
}

Author

  • Markus Oberlehner

variables

o-island-spacing-default

$o-island-spacing-default: m !default;

Description

Default spacing.

Type

String

Author

  • Markus Oberlehner

object: media

mixins

o-media

@mixin o-media($spacing: 1em, $layout: true) { ... }

Description

Wrapper.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$spacing

Spacing.

Number [unit]1em
$layout

Enable or disable returning layout properties.

Booleantrue

Example

Usage

.selector {
  @include o-media();
}

Author

  • Markus Oberlehner

o-media-figure

@mixin o-media-figure() { ... }

Description

Figure.

Parameters

None.

Example

Usage

.selector {
  @include o-media-figure();
}

Author

  • Markus Oberlehner

o-media-body

@mixin o-media-body() { ... }

Description

Body.

Parameters

None.

Example

Usage

.selector {
  @include o-media-body();
}

Author

  • Markus Oberlehner

variables

o-media-spacing-default

$o-media-spacing-default: m !default;

Description

Default spacing.

Type

String

Author

  • Markus Oberlehner

object: vertical-spacing

mixins

o-vertical-spacing

@mixin o-vertical-spacing($spacing: 1em) { ... }

Description

Add vertical spacing to all child elements.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$spacing

Spacing.

Number [unit]1em

Example

Usage

.selector {
  @include o-vertical-spacing();
}

Author

  • Markus Oberlehner

variables

o-vertical-spacing-default-size

$o-vertical-spacing-default-size: m !default;

Description

Default spacing size.

Type

String

Author

  • Markus Oberlehner

setting: breakpoints

functions

setting-breakpoint

@function setting-breakpoint($size, $rem: false) { ... }

Description

Returns breakpoint size.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

Size (s, m, l or xl).

Stringnone
$rem

Return spacing size in rem instead of em.

Booleanfalse

Example

Usage

@media (min-width: setting-breakpoint(m)) { }

Requires

Author

  • Markus Oberlehner

variables

breakpoints

$breakpoints: (
  s: 30em,
  m: 45em,
  l: 60em,
  xl: 75em,
) !default;

Description

Breakpoint sizes.

Type

Map

Used by

Author

  • Markus Oberlehner

setting: colors

functions

setting-color

@function setting-color($color, $type: default) { ... }

Description

Returns colors.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

Color (a, b, c, d, e).

Stringnone
$type

Type (default, contrast, alert, gray).

Stringdefault

Example

Usage

.selector {
  color: setting-color(a);
}

Requires

Author

  • Markus Oberlehner

variables

colors

$colors: (
  a: #2196f3,
  b: #2364aa,
  c: #73bfb8,
  d: #fec601,
  e: #ea7317,
) !default;

Description

Default colors.

Type

Map

Used by

Author

  • Markus Oberlehner

colors-contrast

$colors-contrast: (
  a: #fff,
  b: #fff,
  c: #fff,
  d: #fff,
  e: #fff,
) !default;

Description

Contrast colors.

Type

Map

Used by

Author

  • Markus Oberlehner

colors-alert

$colors-alert: (
  positive: #468847,
  neutral: #3a87ad,
  cautious: #c09853,
  negative: #b94a48,
) !default;

Description

Alert colors.

Type

Map

Used by

Author

  • Markus Oberlehner

colors-gray

$colors-gray: (
  a: #f5f5f5,
  b: #e0e0e0,
  c: #9e9e9e,
) !default;

Description

Gray colors.

Type

Map

Used by

Author

  • Markus Oberlehner

setting: font-families

functions

setting-font-family

@function setting-font-family($font-family) { ... }

Description

Returns font family.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font-family

Font family (a or b).

Stringnone

Example

Usage

.selector {
  font-family: setting-font-family(a);
}

Requires

Author

  • Markus Oberlehner

variables

font-families

$font-families: (
  a: sans-serif,
  b: serif,
) !default;

Description

Font families.

Type

Map

Used by

Author

  • Markus Oberlehner

setting: font-sizes

functions

setting-font-size

@function setting-font-size($size, $rem: false) { ... }

Description

Returns font size.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

Size (xs, s, m, l, xl, xxl, or xxxl).

Stringnone
$rem

Return font size in rem instead of em.

Booleanfalse

Example

Usage

.selector {
  font-size: setting-font-size(m);
}

Requires

Author

  • Markus Oberlehner

variables

font-sizes

$font-sizes: (
  xs: 0.64em,
  s: 0.8em,
  m: 1em,
  l: 1.25em,
  xl: 1.563em,
  xxl: 1.953em,
  xxxl: 2.441em,
) !default;

Description

Default font sizes.

Type

Map

Used by

Author

  • Markus Oberlehner

setting: spacings

functions

setting-spacing

@function setting-spacing($size, $rem: false) { ... }

Description

Returns spacing size.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

Size (xs, s, m, l, xl, xxl or xxxl).

Stringnone
$rem

Return spacing size in rem instead of em.

Booleanfalse

Example

Usage

.selector {
  margin-top: setting-spacing(m);
}

Requires

Author

  • Markus Oberlehner

variables

spacings

$spacings: (
  xs: 0.5em,
  s: 0.75em,
  m: 1em,
  l: 1.5em,
  xl: 2em,
  xxl: 3.5em,
  xxxl: 6em,
) !default;

Description

Spacing sizes.

Type

Map

Used by

Author

  • Markus Oberlehner

utility: align-self

mixins

u-align-self

@mixin u-align-self($alignment) { ... }

Description

Align self helper.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$alignment

Alignment.

Stringnone

Example

Usage

.selector {
  @include u-align-self(right);
}

Author

  • Markus Oberlehner

utility: clearfix

mixins

u-clearfix

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

Description

Clearfix.

Parameters

None.

Example

Usage

.selector {
  @include u-clearfix();
}

Author

  • Markus Oberlehner

utility: font-family

mixins

u-font-family

@mixin u-font-family($font-family) { ... }

Description

Font family.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font-family

Font family.

Stringnone

Example

Usage

.selector {
  @include u-font-family();
}

Author

  • Markus Oberlehner

utility: offset

mixins

u-offset

@mixin u-offset($size, $base: 12) { ... }

Description

Offset helper.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

Offset divisor.

Numbernone
$base

Offset base.

Number12

Example

Usage

.selector {
  @include u-offset(6, 12);
}

Author

  • Markus Oberlehner

utility: order

mixins

u-order

@mixin u-order($n: 1, $max-elements: 10) { ... }

Description

Order n.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$n

Number.

Number1
$max-elements

Max order elements.

Number10

Example

Usage

.selector {
  @include u-order();
}

Author

  • Markus Oberlehner

u-order-first

@mixin u-order-first() { ... }

Description

Order first.

Parameters

None.

Example

Usage

.selector {
  @include u-order-first();
}

Author

  • Markus Oberlehner

u-order-last

@mixin u-order-last() { ... }

Description

Order last.

Parameters

None.

Example

Usage

.selector {
  @include u-order-last();
}

Author

  • Markus Oberlehner

utility: spacing

mixins

u-spacing

@mixin u-spacing($spacing: 1em, $direction: top) { ... }

Description

Spacing helper.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$spacing

Spacing.

Number [unit]1em
$direction

Spacing direction.

Stringtop

Example

Usage

.selector {
  @include u-spacing();
}

Author

  • Markus Oberlehner

utility: text-align

mixins

u-text-align

@mixin u-text-align($alignment) { ... }

Description

Text align helper.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$alignment

Text alignment.

Stringnone

Example

Usage

.selector {
  @include u-text-align(right);
}

Author

  • Markus Oberlehner

utility: visibility

mixins

u-visibility-hidden

@mixin u-visibility-hidden() { ... }

Description

Hide from both screenreaders and browsers.

Parameters

None.

Example

Usage

.selector {
  @include u-visibility-hidden();
}

Author

  • Markus Oberlehner

u-visibility-visuallyhidden

@mixin u-visibility-visuallyhidden() { ... }

Description

Hide only visually, but have it available for screenreaders.

Parameters

None.

Example

Usage

.selector {
  @include u-visibility-visuallyhidden();
}

Author

  • Markus Oberlehner

u-visibility-invisible

@mixin u-visibility-invisible() { ... }

Description

Hide visually and from screenreaders, but maintain layout.

Parameters

None.

Example

Usage

.selector {
  @include u-visibility-invisible();
}

Author

  • Markus Oberlehner

utility: width

mixins

u-width

@mixin u-width($size, $base: 12) { ... }

Description

Width helper.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

Width divisor.

Numbernone
$base

Width base.

Number12

Example

Usage

.selector {
  @include u-width(6, 12);
}

Author

  • Markus Oberlehner