Breakpoint
functions
get-first-breakpoint
@function get-first-breakpoint($breakpoints: $mq-breakpoints) { ... }
Description
Get the first breakpoint from the map
Parameters
parameter Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 | Number | null |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoints | Map of breakpoints | Map | $mq-breakpoints |
$inclusive | Outputs inclusive media queries (only min-width) if true | Bool | true |
$mq | Outputs media queries if true | Bool | true |
skip-first-breakpoint
@mixin skip-first-breakpoint($breakpoint) { ... }
Description
Output content in a media query excluding the first breakpoint
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | Named breakpoint key of | String | — none |
hidpi
@mixin hidpi($ratio: 1.5) { ... }
Description
Target HiDPI screens
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$ratio | Screen resolution ratio | Number | 1.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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$padding-vertical | — none | Number | $button-padding-vertical |
$padding-horizontal | — none | Number | $button-padding-horizontal |
$border-width | — none | Number | $button-border-width |
$border-radius | — none | Number | $button-border-radius |
$transition | — none | List | $button-transition |
$typography | — none | String | $button-typography |
button
@mixin button($variation: 'base') { ... }
Description
Generate styles for a button variation with base button styles
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$variation | Map key of | String | 'base' |
use-button
@mixin use-button($variation: 'base') { ... }
Description
Generate styles for a button variation without base button styles
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$variation | Map key of | String | 'base' |
button-variations
@mixin button-variations($variations: $button-variations) { ... }
Description
Generate button variation styles
Parameters
parameter Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$ratio | Map key of the | String or List | — none |
$grow | Enables dynamic growing of the container if true | Bool | false |
clearfix
@mixin clearfix() { ... }
Description
Micro clearfix
Parameters
None.
fade-in
@mixin fade-in($duration: get-duration()) { ... }
Description
Accessible fade in transition
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$duration | Default duration token | Number | get-duration() |
fade-out
@mixin fade-out($duration: get-duration()) { ... }
Description
Accessible fade out transition
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$duration | Default duration token | Number | get-duration() |
font-smoothing
@mixin font-smoothing($enabled: 'true') { ... }
Description
Enable or disable font smoothing
Parameters
parameter Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$direction | One of 'up', 'up-right', 'right', 'down-right', 'down', 'down-left', 'left' or 'up-left' | String | — none |
$width | — none | Number | — none |
$height | — none | Number | — none |
$color | — none | String or Color | currentColor |
underline
@mixin underline($color: currentColor, $distance: 0, $width: 100%, $height: 1px) { ... }
Description
Beautiful underline with control over text spacing
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | Color of the underline | String or Color | currentColor |
$distance | Distance from the text | Number | 0 |
$width | Width of the underline | Number | 100% |
$height | Thickness of the underline | Number | 1px |
functions
get-icon
@function get-icon($icon, $color: $color-icon) { ... }
Description
Get an icon from the $icons
map in the specified color
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$icon | Map key of | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$ratio | Aspect ratio formatted as | String | — none |
Returns
Number
—Percentage value
shade-color
@function shade-color($color, $percentage) { ... }
Description
Slightly darken a color
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | color to shade | Color | — none |
$percentage | percentage of | 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$color | color to tint | Color | — none |
$percentage | percentage of | 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Value to be converted | Number | — none |
$base | Base font size | Number | 16px |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$value | Value to be converted | Number | — none |
$base | Base font size | Number | 16px |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gutter | The amount of gutter as number, breakpoint map | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gutter | The amount of gutter as a number or sizing map formatted as | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gutter | The amount of gutter as number, breakpoint map | Number or Map | $grid-gutter |
$size | Width of the column as number | Number | 100% |
$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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gutter | The amount of gutter as number, breakpoint map | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$min-size | Minimum size of the grid columns | Number | — none |
$gutter | The amount of gutter as number, breakpoint map | Number or Map | $grid-gutter |
$row-gutter | The row gutter as number, breakpoint map | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gutter | The amount of gutter as number, breakpoint map | Number or Map | $grid-gutter |
$row-gutter | The row gutter as number, breakpoint map | 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$breakpoint | Named breakpoint key of | String | — none |
gutter
@mixin gutter($gutter: $grid-gutter, $prop: 'gap') { ... }
Description
Output margin or padding gutter depending on the type
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$gutter | The amount of gutter as a number or sizing map formatted as | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$spacing | The amount of space between list items as a number or map key of | Number or String | 1rem |
$center | Centers the list if true | Bool | false |
$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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$prop | Any CSS property or a list of CSS properties | String or List | — none |
$sizes | Map of two sizes formatted as | Map or Number or List | — none |
$breakpoints | Map of two named breakpoints from | Map | $fluid-breakpoints |
$negative | Negates the values if true | Bool | false |
$important | Adds important flag if true | Bool | false |
$current-breakpoint | — none | String | null |
$all-breakpoints | — none | List | null |
functions
is-sizing-map
@function is-sizing-map($map) { ... }
Description
Validate a sizing map
Parameters
parameter Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | Map key of | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | Map key of | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | Map key of | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | Map key of | 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | Map key of | String | $token-spacings-default |
$sizing | Sizing type 'min' or 'max' | String | 'min' |
$breakpoint | Named breakpoint key of | String | null |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | Map key of | String | — none |
$sizing | Sizing type 'min' or 'max' | String | 'min' |
$breakpoint | Named breakpoint key of | String | null |
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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$prop | Any CSS property that supports calc as a value | String | — none |
$sizes | Map key of | Map or Number or List or String | $token-spacings-default |
$breakpoints | Map of two named breakpoints from | Map | — none |
$negative | Negates the values if true | Bool | false |
$important | Adds important flag if true | Bool | false |
typography
@mixin typography($variation: 'default') { ... }
Description
Wrapper mixin for use-variation that uses the $token-typography
map as default lookup map
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$variation | Map key of | 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 Name | parameter Description | parameter Type | parameter 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 | 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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$scale | — none | Number or Map | $headings-scale-base |
$headings | — none | List | $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 Name | parameter Description | parameter Type | parameter 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 Name | parameter Description | parameter Type | parameter 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 List | null |
$negative | Negates the values if true | Bool | false |
$important | Adds important flag if true | Bool | false |
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 Name | parameter Description | parameter Type | parameter 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 | Bool | false |
$important | Adds important flag if true | Bool | false |
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 Name | parameter Description | parameter Type | parameter 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 | Bool | false |
$important | Adds important flag if true | Bool | false |
use-variation
@mixin use-variation($variation-map, $variation) { ... }
Description
Generate output for a config variation (e.g button or type)
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$variation-map | — none | Map | — none |
$variation | — none | String | — none |