Breakpoint

functions

get-first-breakpoint

@function get-first-breakpoint($breakpoints: $mq-breakpoints) { ... }

Description

Get the first breakpoint from the map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoints

Map of breakpoints

Map$mq-breakpoints

Returns

Boolean

First breakpoint from the map

is-first-breakpoint

@function is-first-breakpoint($name, $breakpoints: $mq-breakpoints) { ... }

Description

Check if a breakpoint is the first in the map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Breakpoint name

String none
$breakpoints

Map of breakpoints

Map$mq-breakpoints

Returns

Boolean

True if the passed breakpoint is the first in the map

is-last-breakpoint

@function is-last-breakpoint($name, $breakpoints: $mq-breakpoints) { ... }

Description

Check if a breakpoint is the last in the map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Breakpoint name

String none
$breakpoints

Map of breakpoints

Map$mq-breakpoints

Returns

Boolean

True if the passed breakpoint is the last in the map

is-breakpoint-map

@function is-breakpoint-map($map, $breakpoints: $mq-breakpoints) { ... }

Description

Check if a map contains valid breakpoints

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Breakpoint map to check

Map none
$breakpoints

Map of valid breakpoints

Map$mq-breakpoints

Returns

Boolean

True if the passed map is is a breakpoint map

get-next-breakpoint

@function get-next-breakpoint($name, $breakpoints: $mq-breakpoints) { ... }

Description

Get the next breakpoint from a map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Current breakpoint name

String none
$breakpoints

Map of breakpoints

Map$mq-breakpoints

Returns

String

Next breakpoint name

get-smaller-breakpoint

@function get-smaller-breakpoint($name, $breakpoints, $start-index: null) { ... }

Description

Get the smaller breakpoint from a map in comparison to main breakpoints

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Current breakpoint name

String none
$breakpoints

Map of breakpoints to compare

Map none
$start-index

Map index from which the search should start

Numbernull

Returns

String

Next breakpoint name

mixins

loop-breakpoints

@mixin loop-breakpoints($breakpoints: $mq-breakpoints, $inclusive: true, $mq: true) { ... }

Description

Loop all breakpoints and output @content

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoints

Map of breakpoints

Map$mq-breakpoints
$inclusive

Outputs inclusive media queries (only min-width) if true

Booltrue
$mq

Outputs media queries if true

Booltrue

skip-first-breakpoint

@mixin skip-first-breakpoint($breakpoint) { ... }

Description

Output content in a media query excluding the first breakpoint

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

Named breakpoint key of $mq-breakpoints

String none

hidpi

@mixin hidpi($ratio: 1.5) { ... }

Description

Target HiDPI screens

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$ratio

Screen resolution ratio

Number1.5

Button

mixins

button-unstyled

@mixin button-unstyled() { ... }

Description

Remove browser default styles from <button>

Parameters

None.

button-base

@mixin button-base($padding-vertical: $button-padding-vertical, $padding-horizontal: $button-padding-horizontal, $border-width: $button-border-width, $border-radius: $button-border-radius, $transition: $button-transition, $typography: $button-typography) { ... }

Description

Generate button base styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$padding-vertical noneNumber$button-padding-vertical
$padding-horizontal noneNumber$button-padding-horizontal
$border-width noneNumber$button-border-width
$border-radius noneNumber$button-border-radius
$transition noneList$button-transition
$typography noneString$button-typography

button

@mixin button($variation: 'base') { ... }

Description

Generate styles for a button variation with base button styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variation

Map key of $button-variations

String'base'

use-button

@mixin use-button($variation: 'base') { ... }

Description

Generate styles for a button variation without base button styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variation

Map key of $button-variations

String'base'

button-variations

@mixin button-variations($variations: $button-variations) { ... }

Description

Generate button variation styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variations

Map of button variations

Map$button-variations

Global

mixins

aspect-ratio

@mixin aspect-ratio($ratio, $grow: false) { ... }

Description

Create an aspect ratio box with optional support for dynamic growing content

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$ratio

Map key of the $ratios map or a list formatted as x by y

String or List none
$grow

Enables dynamic growing of the container if true

Boolfalse

clearfix

@mixin clearfix() { ... }

Description

Micro clearfix

Parameters

None.

fade-in

@mixin fade-in($duration: get-duration()) { ... }

Description

Accessible fade in transition

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$duration

Default duration token

Numberget-duration()

fade-out

@mixin fade-out($duration: get-duration()) { ... }

Description

Accessible fade out transition

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$duration

Default duration token

Numberget-duration()

font-smoothing

@mixin font-smoothing($enabled: 'true') { ... }

Description

Enable or disable font smoothing

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$enabled

Activates font smoothing if true

Bool'true'

triangle

@mixin triangle($direction, $width, $height, $color: currentColor) { ... }

Description

CSS only triangle icon (adapted from bourbon)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$direction

One of 'up', 'up-right', 'right', 'down-right', 'down', 'down-left', 'left' or 'up-left'

String none
$width noneNumber none
$height noneNumber none
$color noneString or ColorcurrentColor

underline

@mixin underline($color: currentColor, $distance: 0, $width: 100%, $height: 1px) { ... }

Description

Beautiful underline with control over text spacing

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color of the underline

String or ColorcurrentColor
$distance

Distance from the text

Number0
$width

Width of the underline

Number100%
$height

Thickness of the underline

Number1px

functions

get-icon

@function get-icon($icon, $color: $color-icon) { ... }

Description

Get an icon from the $icons map in the specified color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$icon

Map key of $icons

String none
$color

Hex color value

String$color-icon

Returns

String

Encoded SVG icon string

Example

.component {
  background-image: url(get-icon('radio', #fff));
}

ratio-to-percentage

@function ratio-to-percentage($ratio) { ... }

Description

Convert an aspect ratio to a percentage value

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$ratio

Aspect ratio formatted as x by y

String none

Returns

Number

Percentage value

shade-color

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

Description

Slightly darken a color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

color to shade

Color none
$percentage

percentage of $color in returned color

Number none

Returns

Color

Shaded color

Example

.component {
  color: shade-color(#bada55, 20%);
}

str-replace

@function str-replace($string, $search, $replace: '') { ... }

Description

Replace $search with $replace in $string

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$string

Initial string

String none
$search

Substring to replace

String none
$replace

New value

String''

Returns

String

Replaced string

tint-color

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

Description

Slightly lighten a color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

color to tint

Color none
$percentage

percentage of $color in returned color

Number none

Returns

Color

Tinted color

Example

.component {
  color: tint-color(#bada55, 20%);
}

strip-unit

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

Description

Remove the unit of a length

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

Number to remove unit from

Number none

Returns

Number

Unitless number

to-rem

@function to-rem($value, $base: 16px) { ... }

Description

Convert a value to rem

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Value to be converted

Number none
$base

Base font size

Number16px

Returns

Number

Rem value

Example

.component {
  font-size: to-rem(20px);
}

to-em

@function to-em($value, $base: 16px) { ... }

Description

Convert a value to em

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Value to be converted

Number none
$base

Base font size

Number16px

Returns

Number

Em value

Example

.component {
  padding-bottom: to-em(20px);
}

variables

token-typography

$token-typography: (
  default: (
    font-family: $font-family-base,
    font-size: (
      min: $font-size-base,
    ),
    font-weight: $font-weight-base,
    line-height: $line-height-base,
    letter-spacing: $letter-spacing-base,
  ),
  heading: (
    font-family: $headings-font-family,
    font-weight: $headings-font-weight,
    line-height: $headings-line-height,
    letter-spacing: $headings-letter-spacing,
  ),
) !default;

Description

Typography

Type

{map}

Example

$token-typography: (
  default: (
    font-family: $font-family-base,
    font-size: $font-size-base,
  ),
);
$token-typography: (
  default: (
    font-family: $font-family-base,
    font-size: (
      min: $font-size-base,
      max: $font-size-base * 2,
    ),
  ),
);
$token-typography: (
  default: (
    xs: (
      font-family: $font-family-base,
      font-size: $font-size-base,
    ),
    md: (
      font-size: (
        min: $font-size-base,
        max: $font-size-base * 2,
      ),
    ),
  ),
);

token-spacings

$token-spacings: (
  default: 24px,
) !default;

Description

Spacings

Type

{map}

Example

$token-spacings: (
  default: 24px,
);
$token-spacings: (
  default: (
    min: 24px,
    max: 48px,
  ),
);
$token-spacings: (
  default: (
    xs: 24px,
    md: (
      min: 24px,
      max: 48px,
    ),
  ),
);

type-scale

$type-scale: 1.25 !default;

Description

Type Scale

Type

{number</code> or <code>Map}

Example

$type-scale: 1.25;
$type-scale: (
  xs: 1.25,
  md: 1.333,
);

headings-type-scale

$headings-type-scale: $type-scale !default;

Description

Headings Type Scale

Type

{number</code> or <code>Map}

Example

$headings-type-scale: 1.25;
$headings-type-scale: (
  xs: 1.25,
  md: 1.333,
);

headings-scale-base

$headings-scale-base: (
  min: $font-size-base,
) !default;

Description

Headings Scale Base

Type

{number</code> or <code>Map}

Example

$headings-scale-base: $font-size-base;
$headings-scale-base: (
  min: $font-size-base,
  max: $font-size-base * 1.5,
);
$headings-scale-base: (
  xs: $font-size-base,
  md: (
    min: $font-size-base,
    max: $font-size-base * 1.5,
  )
);

grid-mode

$grid-mode: grid !default;

Description

Grid Mode - select your grid system

Type

String

Example

$grid-mode: grid | flex | all | none;

grid-gutter

$grid-gutter: (
  min: 30px,
) !default;

Description

Grid Gutter

Type

{number</code> or <code>Map}

Example

$grid-gutter: 30px;
$grid-gutter: (
  min: 30px,
  max: 60px,
);
$grid-gutter: (
  xs: 30px,
  md: (
    min: 30px,
    max: 60px,
  )
);

grid-row-gutter

$grid-row-gutter: () !default;

Description

Space between grid rows using the row-gap property (only for $grid-mode: grid). Same values as for $grid-gutter are possible.

Type

{number</code> or <code>Map}

container-gutter

$container-gutter: $grid-gutter !default;

Description

Grid Container Gutter

Type

{number</code> or <code>Map}

Example

$container-gutter: 30px;
$container-gutter: (
  min: 30px,
  max: 60px,
);
$container-gutter: (
  xs: 30px,
  md: (
    min: 30px,
    max: 60px,
  )
);

Grid

mixins

container

@mixin container($gutter: $grid-container-gutter, $width: $grid-container) { ... }

Description

Output a centered container with gutters

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

The amount of gutter as number, breakpoint map (xs: 30px, md: 60px) or sizing map (min: 30px, max: 60px)

Number or Map$grid-container-gutter
$width

Maximum width of the container

Number$grid-container

container-gutter

@mixin container-gutter($gutter: $container-gutter) { ... }

Description

Output outside gutter for a container

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

The amount of gutter as a number or sizing map formatted as (min: 30px, max: 60px)

Number or Map$container-gutter

flex-column-base

@mixin flex-column-base($gutter: $grid-gutter, $size: 100%, $columns: $grid-columns) { ... }

Description

Output flex column base styles with gutter

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

The amount of gutter as number, breakpoint map (xs: 30px, md: 60px) or sizing map (min: 30px, max: 60px)

Number or Map$grid-gutter
$size

Width of the column as number

Number100%
$columns

Number of grid columns

Number$grid-columns

flex-column

@mixin flex-column($size: 'expand', $columns: $grid-columns) { ... }

Description

Output flex column width modifier styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Column size as number (e.g. 20% or 0.2) or string ('expand' or 'shrink')

Number or String'expand'
$columns

Number of grid columns

Number$grid-columns

flex-column-push

@mixin flex-column-push($size, $columns: $grid-columns) { ... }

Description

Output flex column push styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Column size as number of columns

Number none
$columns

Number of grid columns

Number$grid-columns

flex-column-pull

@mixin flex-column-pull($size, $columns: $grid-columns) { ... }

Description

Output flex column pull styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Column size as number of columns

Number none
$columns

Number of grid columns

Number$grid-columns

flex-column-offset

@mixin flex-column-offset($size, $columns: $grid-columns) { ... }

Description

Output flex column offset styles

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Column size as number of columns

Number none
$columns

Number of grid columns

Number$grid-columns

generate-flex-columns

@mixin generate-flex-columns($breakpoint) { ... }

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

Breakpoint name

String none

flex-row

@mixin flex-row($gutter: $grid-gutter) { ... }

Description

Output a flex grid row with gutters

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

The amount of gutter as number, breakpoint map (xs: 30px, md: 60px) or sizing map (min: 30px, max: 60px)

Number or Map$grid-gutter

grid-row-auto

@mixin grid-row-auto($min-size, $gutter: $grid-gutter, $row-gutter: $grid-row-gutter) { ... }

Description

Output a css grid row with auto fit sizing and gutters

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$min-size

Minimum size of the grid columns

Number none
$gutter

The amount of gutter as number, breakpoint map (xs: 30px, md: 60px) or sizing map (min: 30px, max: 60px)

Number or Map$grid-gutter
$row-gutter

The row gutter as number, breakpoint map (xs: 30px, md: 60px) or sizing map (min: 30px, max: 60px)

Number or Map$grid-row-gutter

Example

.grid-row-auto {
  @include grid-row-auto(320px);
}

grid-row

@mixin grid-row($gutter: $grid-gutter, $row-gutter: $grid-row-gutter) { ... }

Description

Output a css grid row with gutters

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

The amount of gutter as number, breakpoint map (xs: 30px, md: 60px) or sizing map (min: 30px, max: 60px)

Number or Map$grid-gutter
$row-gutter

The row gutter as number, breakpoint map (xs: 30px, md: 60px) or sizing map (min: 30px, max: 60px)

Number or Map$grid-row-gutter

Example

.grid-row {
  @include grid-row();
}

grid-column

@mixin grid-column($span: $grid-columns, $columns: $grid-columns) { ... }

Description

Output a css grid column

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$span

Grid column span

Number$grid-columns
$columns

Number of grid columns

Number$grid-columns

Example

.grid-col {
  @include grid-column(6);
}

grid-column-start

@mixin grid-column-start($span) { ... }

Description

Output a css grid column start offset

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$span

Grid column start offset

Number none

Example

.grid-col-offset {
  @include grid-column-start(2);
}

generate-grid-columns

@mixin generate-grid-columns($breakpoint) { ... }

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$breakpoint

Named breakpoint key of $mq-breakpoints

String none

gutter

@mixin gutter($gutter: $grid-gutter, $prop: 'gap') { ... }

Description

Output margin or padding gutter depending on the type

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$gutter

The amount of gutter as a number or sizing map formatted as (min: 30px, max: 60px)

Number or Map$grid-gutter
$prop

Property to use for the gutter ('gap', 'margin' or 'padding')

String'gap'

List

mixins

list-inline

@mixin list-inline($spacing: 1rem, $center: false, $child-selector: 'li') { ... }

Description

Generate styles for an inline list

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$spacing

The amount of space between list items as a number or map key of $token-spacings. Beware that large spacing values can affect the clickability of nearby elements in some cases.

Number or String1rem
$center

Centers the list if true

Boolfalse
$child-selector

Any valid CSS selector

String'li'

list-unstyled

@mixin list-unstyled() { ... }

Description

Remove default styles from lists (ul, ol)

Parameters

None.

Poly Fluid / Sizing

mixins

fluid-calc

@mixin fluid-calc($prop, $sizes, $breakpoints: $fluid-breakpoints, $negative: false, $important: false, $current-breakpoint: null, $all-breakpoints: null) { ... }

Description

Generate min, max and fluid in-between values for a given CSS property

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$prop

Any CSS property or a list of CSS properties

String or List none
$sizes

Map of two sizes formatted as (min: x, max: y), list of two sizes formatted as (x, y) or just a number (min size)

Map or Number or List none
$breakpoints

Map of two named breakpoints from $mq-breakpoints formatted as (min: md, max: lg) or custom px values formatted as (min: 600px, max: 900px)

Map$fluid-breakpoints
$negative

Negates the values if true

Boolfalse
$important

Adds important flag if true

Boolfalse
$current-breakpoint noneStringnull
$all-breakpoints noneListnull

functions

is-sizing-map

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

Description

Validate a sizing map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to test

Map none

Returns

Boolean

True if the parameter is a map with a min key

complete-sizing-map

@function complete-sizing-map($map) { ... }

Description

Complete a sizing map by adding a max key with the value of the min key. Alternatively a value for the max key can be provided with the $value parameter.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Sizing map to complete

Map none

Returns

Map

Completed sizing map

get-largest-sizing

@function get-largest-sizing($sizing) { ... }

Description

Get largest sizing of sizing map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$sizing

Sizing map or number

Number or Map none

Returns

Number

Largest sizing in the map

get-half-sizing

@function get-half-sizing($sizing) { ... }

Description

Half values of a sizing map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$sizing

Sizing map, breakpoint map or number

Number or Map none

Returns

Number</code> or <code>Map

Map with halved values or halved number

Token

functions

get-color

@function get-color($name) { ... }

Description

Get a color from the $token-colors map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Map key of $token-colors

String none

Returns

Color

color value

Example

.component {
  color: get-color(black);
}

get-duration

@function get-duration($name: $token-durations-default) { ... }

Description

Get an duration value from the $token-durations map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Map key of $token-durations

String$token-durations-default

Returns

Number

duration value

Example

.component {
  transition: color get-duration() get-easing();
}

get-easing

@function get-easing($name: $token-easings-default) { ... }

Description

Get an easing value from the $token-easings map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Map key of $token-easings

String$token-easings-default

Returns

String

easing value

Example

.component {
  transition: color get-duration() get-easing();
}

get-index

@function get-index($name) { ... }

Description

Get a z-index value from the $layers map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Map key of $layers

String none

Returns

Number

z-index value

Example

.component {
  z-index: get-index(below);
}

get-spacing

@function get-spacing($name: $token-spacings-default, $sizing: 'min', $breakpoint: null) { ... }

Description

Get a single spacing value from the map $token-spacings

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Map key of $token-spacings

String$token-spacings-default
$sizing

Sizing type 'min' or 'max'

String'min'
$breakpoint

Named breakpoint key of $mq-breakpoints

Stringnull

get-typography-size

@function get-typography-size($name, $sizing: 'min', $breakpoint: null) { ... }

Description

Get a font-size value from the map $token-typography

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Map key of $token-typography

String none
$sizing

Sizing type 'min' or 'max'

String'min'
$breakpoint

Named breakpoint key of $mq-breakpoints

Stringnull

mixins

spacing

@mixin spacing($prop, $sizes: $token-spacings-default, $breakpoints, $negative: false, $important: false) { ... }

Description

Wrapper mixin for fluid-calc that gets spacings from the map $token-spacings

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$prop

Any CSS property that supports calc as a value

String none
$sizes

Map key of $token-spacings, map of two sizes formatted as (min: x, max: y), list of two sizes formatted as (x, y) or just a number (min size)

Map or Number or List or String$token-spacings-default
$breakpoints

Map of two named breakpoints from $mq-breakpoints formatted as (md, lg) or custom px values formatted as (min: 600px, max: 900px)

Map none
$negative

Negates the values if true

Boolfalse
$important

Adds important flag if true

Boolfalse

typography

@mixin typography($variation: 'default') { ... }

Description

Wrapper mixin for use-variation that uses the $token-typography map as default lookup map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variation

Map key of $token-typography

String'default'

Typography

functions

modular-scale-config

@function modular-scale-config($exp, $size: $font-size-base, $type-scale: $type-scale) { ... }

Description

Scale a single value or map values using the passed exponent and type scale

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$exp

Exponent

Number none
$size

Size to scale

Number or Map$font-size-base
$type-scale

Type scale as a single value (e.g 1.2) or breakpoint map formatted as (xs: 1.2, md: 1.333)

Number or Map$type-scale

Returns

Number</code> or <code>Map

Scaled value or map

modular-scale

@function modular-scale($exp, $size: $font-size-base, $type-scale: $type-scale) { ... }

Description

Scale a value according to the passed exponent and type scale

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$exp

Exponent

Number none
$size

Size to scale

Number$font-size-base
$type-scale

Type scale (e.g 1.2)

Number$type-scale

Returns

Number

Scaled value

mixins

scale-headings

@mixin scale-headings($scale: $headings-scale-base, $headings: $headings) { ... }

Description

Generate headings using modular scale

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$scale noneNumber or Map$headings-scale-base
$headings noneList$headings

Utilities

mixins

sr-only

@mixin sr-only() { ... }

Description

Hide content accessibly

Parameters

None.

sr-only-reset

@mixin sr-only-reset() { ... }

Description

Undo styles from sr-only

Parameters

None.

sr-only-focusable

@mixin sr-only-focusable() { ... }

Description

Undo styles from sr-only when element is activated or focused

Parameters

None.

text-hide

@mixin text-hide() { ... }

Description

Old school way of hiding text. Better use sr-only with an additional <span>

Parameters

None.

text-truncate

@mixin text-truncate() { ... }

Description

Truncate text using ellipsis (single-line)

Parameters

None.

text-hyphenate

@mixin text-hyphenate() { ... }

Description

Activate hyphenation with fallbacks. Make sure to set the lang attribute on the <html> tag.

Parameters

None.

text-line-clamp

@mixin text-line-clamp($lines) { ... }

Description

Clamp text to the maximum number of lines before truncating the content. An ellipsis (…) is displayed at the end of the last line. When passing 1 for the $lines parameter the text-trucate mixin (with broader browser support) will be called.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$lines

Number of lines

Number none

Variations

mixins

loop-variation

@mixin loop-variation($config, $prop: null, $negative: false, $important: false) { ... }

Description

Loop keys of a variation to output normal and fluid props

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$config

Map of Breakpoints, CSS properties and sizing maps

Map none
$prop

Any CSS property or a list of CSS properties

String or Listnull
$negative

Negates the values if true

Boolfalse
$important

Adds important flag if true

Boolfalse

output-props

@mixin output-props($props, $value, $negative: false, $important: false) { ... }

Description

Output one or many CSS properties. Numbers with units get converted to Rem automatically.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$props

Any CSS property or a list of CSS properties

String or List none
$value

Any CSS value

Any none
$negative

Negates the values if true

Boolfalse
$important

Adds important flag if true

Boolfalse

output-selectors

@mixin output-selectors($prop, $selectors, $negative: false, $important: false) { ... }

Description

Handle selectors key in config map. Output properties or call loop-variation recursively.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$prop

Any CSS property or a list of CSS properties

String or List none
$selectors

Map of selectors

Map none
$negative

Negates the values if true

Boolfalse
$important

Adds important flag if true

Boolfalse

use-variation

@mixin use-variation($variation-map, $variation) { ... }

Description

Generate output for a config variation (e.g button or type)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variation-map noneMap none
$variation noneString none