animation

variables

animation-default-duration-fast

$animation-default-duration-fast: 0.3s !default;

animation-default-duration-medium

$animation-default-duration-medium: 1s !default;

animation-default-duration-slow

$animation-default-duration-slow: 5s !default;

animation-default-delay

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

animation-default-function

$animation-default-function: ease-in-out !default;

css

Import animation library.

Import animation library. { ... }

Example

@import '~microscope-sass/lib/animation';

mixins

animate

@mixin animate($property: 'all', $duration: $animation-default-duration-fast, $delay: $animation-default-delay, $function: $animation-default-function) { ... }

Description

Animates changes to property using a CSS transition.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	Property to animate.	`String`	`'all'`
`$duration`	The length of time that an animation takes to complete one.	`Number`	`$animation-default-duration-fast`
`$delay`	The amount of time to wait before beginning to perform the animation.	`Number`	`$animation-default-delay`
`$function`	The "animation-timing-function" to use.	`String`	`$animation-default-function`

Used by

[mixin] hover-fade

fade-in

@mixin fade-in($name, $property: 'opacity', $value-start: 0, $value-end: 1, $duration: $animation-default-duration-medium, $delay: $animation-default-delay, $function: $animation-default-function) { ... }

Description

Creates a "fade in" animation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	Name of the animation.	`String`	— none
`$property`	Property to animate.	`String`	`'opacity'`
`$value-start`	Start value.	`Number`	`0`
`$value-end`	End value.	`Number`	`1`
`$duration`	The length of time that an animation takes to complete.	`Number`	`$animation-default-duration-medium`
`$delay`	The amount of time to wait before beginning to perform the animation.	`Number`	`$animation-default-delay`
`$function`	The "animation-timing-function" to use.	`String`	`$animation-default-function`

Requires

[mixin] keyframes

hover-fade

@mixin hover-fade($name, $property: 'opacity', $value-start: 0, $value-end: 0.7, $duration: $animation-default-duration-fast, $delay: $animation-default-delay, $function: $animation-default-function) { ... }

Description

Fades on hover.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	Name of the animation.	`String`	— none
`$property`	Property to animate.	`String`	`'opacity'`
`$value-start`	Start value (when not hovered).	`Number`	`0`
`$value-end`	End value (when hovered).	`Number`	`0.7`
`$duration`	The length of time that an animation takes to complete.	`Number`	`$animation-default-duration-fast`
`$delay`	The amount of time to wait before beginning to perform the animation.	`Number`	`$animation-default-delay`
`$function`	The "animation-timing-function" to use.	`String`	`$animation-default-function`

Requires

[mixin] animate

ken-burns

@mixin ken-burns($name, $origin: 'center', $value-start: 1, $value-end: 1.1, $duration: $animation-default-duration-medium, $delay: $animation-default-delay, $function: $animation-default-function) { ... }

Description

Creates a "Ken Burns" animation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	Name of the animation.	`String`	— none
`$origin`	Animation origin.	`String`	`'center'`
`$value-start`	Start value.	`Number`	`1`
`$value-end`	End value.	`Number`	`1.1`
`$duration`	The length of time that an animation takes to complete.	`Number`	`$animation-default-duration-medium`
`$delay`	The amount of time to wait before beginning to perform the animation.	`Number`	`$animation-default-delay`
`$function`	The "animation-timing-function" to use.	`String`	`$animation-default-function`

Requires

[mixin] keyframes

keyframes

@mixin keyframes($name, $property: 'opacity', $value-start: 0, $value-end: 1, $duration: $animation-default-duration-medium, $delay: $animation-default-delay, $function: $animation-default-function) { ... }

Description

Creates a keyframes animation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	Name of the animation.	`String`	— none
`$property`	Property to animate.	`String`	`'opacity'`
`$value-start`	Start value.	`Number`	`0`
`$value-end`	End value.	`Number`	`1`
`$duration`	The length of time that an animation takes to complete.	`Number`	`$animation-default-duration-medium`
`$delay`	The amount of time to wait before beginning to perform the animation.	`Number`	`$animation-default-delay`
`$function`	The "animation-timing-function" to use.	`String`	`$animation-default-function`

Used by

[mixin] fade-in
[mixin] ken-burns

bem

css

Import BEM library.

Import BEM library. { ... }

Example

@import '~microscope-sass/lib/bem';

mixins

element

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

Description

Output rules for elements within a block.

Ensures the specific .block .block__element selector.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$element`	The element name within the block.	`String`	— none

Example

Usage

.my-block {
  @element('some-element') {
    display: inline-block;
  }
}

Output

.my-block .my-block__some-element {display: inline-block;}

modifier

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

Description

Apply a modifier to a block or element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$modifier`	The name of the modifier to apply.	`String`	— none

Example

Usage

.my-block {
  @element('some-element') {
    @modifier('focus') {
      background: fuchsia;
    }
  }

  @modifier('modified') {
    border: solid 3px yellow;
  }
}

Output

.my-block .my-block__some-element.my-block__some-element--focus {background: fuchsia;}
.my-block.my-block--modified {border: solid 3px yellow;}

browser

css

Import browser library.

Import browser library. { ... }

Example

@import '~microscope-sass/lib/browser';

mixins

ie11

@mixin ie11() { ... }

Description

Applies content block only on Internet Explorer 11.

Parameters

None.

color

variables

color-black

$color-black: black !default;

color-white

$color-white: white !default;

color-gray

$color-gray: silver !default;

color-gray-darker

$color-gray-darker: #47535B !default;

color-blue

$color-blue: blue !default;

color-green

$color-green: green !default;

color-red

$color-red: red !default;

color-orange

$color-orange: orange !default;

color-yellow

$color-yellow: yellow !default;

color-primary

$color-primary: $color-blue !default;

Used by

[mixin] color-primary

color-secondary

$color-secondary: $color-gray !default;

Used by

[mixin] color-secondary

color-background

$color-background: $color-white !default;

Used by

[mixin] color-background

color-border

$color-border: $color-gray !default;

Used by

[mixin] color-border

color-danger

$color-danger: $color-red !default;

Used by

[mixin] color-danger

color-info

$color-info: $color-blue !default;

Used by

[mixin] color-info

color-success

$color-success: $color-green !default;

Used by

[mixin] color-success

color-warning

$color-warning: $color-orange !default;

Used by

[mixin] color-warning

mixins

color-primary

@mixin color-primary($properties: 'color', $force: false) { ... }

Description

Sets the primary color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-primary

color-secondary

@mixin color-secondary($properties: 'color', $force: false) { ... }

Description

Sets the secondary color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-secondary

color-background

@mixin color-background($properties: 'background-color', $force: false) { ... }

Description

Sets the background color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'background-color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-background

color-border

@mixin color-border($properties: 'border-color', $force: false) { ... }

Description

Sets the border color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'border-color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-border

color-danger

@mixin color-danger($properties: 'color', $force: false) { ... }

Description

Sets the danger color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-danger

color-info

@mixin color-info($properties: 'color', $force: false) { ... }

Description

Sets the info color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-info

color-success

@mixin color-success($properties: 'color', $force: false) { ... }

Description

Sets the success color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-success

color-warning

@mixin color-warning($properties: 'color', $force: false) { ... }

Description

Sets the warning color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'color'`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] color-warning

grid

variables

grid-columns-mobile

$grid-columns-mobile: 4 !default;

Used by

[mixin] columns-responsive
[mixin] columns-mobile
[mixin] omega-smart-mobile

grid-columns-tablet

$grid-columns-tablet: 9 !default;

Used by

[mixin] columns-responsive
[mixin] columns-tablet
[mixin] omega-smart-tablet

grid-columns-laptop

$grid-columns-laptop: 12 !default;

Used by

[mixin] columns-responsive
[mixin] columns-laptop
[mixin] columns-desktop
[mixin] omega-smart-laptop

grid-columns-desktop

$grid-columns-desktop: 12 !default;

grid-gutter-base

$grid-gutter-base: 30px !default;

grid-gutter-mobile

$grid-gutter-mobile: $grid-gutter-base !default;

Used by

[mixin] columns-responsive
[mixin] columns-responsive
[mixin] gutter

grid-gutter-tablet

$grid-gutter-tablet: $grid-gutter-base !default;

Used by

[mixin] columns-responsive
[mixin] columns-responsive
[mixin] gutter

grid-gutter-laptop

$grid-gutter-laptop: $grid-gutter-base !default;

Used by

[mixin] columns-responsive
[mixin] columns-responsive
[mixin] gutter

grid-gutter-desktop

$grid-gutter-desktop: $grid-gutter-base !default;

Used by

[mixin] columns-responsive
[mixin] columns-responsive
[mixin] gutter

grid-row-height

$grid-row-height: 40px !default;

Used by

[mixin] rows

grid-container-margin-base

$grid-container-margin-base: math.div($grid-gutter-base, 2) !default;

grid-container-padding-base

$grid-container-padding-base: 0px !default;

grid-container-margin

$grid-container-margin: $grid-container-margin-base !default;

Used by

[mixin] container
[mixin] container-margin
[mixin] container-margin
[mixin] container-margin
[mixin] container-margin
[mixin] breakout-margin

grid-container-margin-small

$grid-container-margin-small: $grid-container-margin-base !default;

Used by

[mixin] container--small
[mixin] container-margin
[mixin] container-margin
[mixin] breakout-margin

grid-container-margin-big

$grid-container-margin-big: $grid-container-margin-base !default;

Used by

[mixin] container--big
[mixin] container-margin
[mixin] container-margin
[mixin] breakout-margin

grid-container-padding

$grid-container-padding: $grid-container-padding-base !default;

Used by

[mixin] container-padding
[mixin] container-padding
[mixin] container-padding
[mixin] container-padding
[mixin] breakout-padding

grid-container-padding-small

$grid-container-padding-small: $grid-container-padding-base !default;

Used by

[mixin] container-padding
[mixin] container-padding
[mixin] breakout-padding

grid-container-padding-big

$grid-container-padding-big: $grid-container-padding-base !default;

Used by

[mixin] container-padding
[mixin] container-padding
[mixin] breakout-padding

grid-container-size

$grid-container-size: $breakpoint-desktop - 2 * $grid-container-margin !default;

Used by

[mixin] container

grid-container-size-small

$grid-container-size-small: 800px !default;

Used by

[mixin] container--small
[mixin] container--small

grid-container-size-big

$grid-container-size-big: 1400px !default;

Used by

[mixin] container--big
[mixin] container--big

grid-margin-0

$grid-margin-0: 5px !default;

grid-margin-1

$grid-margin-1: 10px !default;

grid-margin-2

$grid-margin-2: 20px !default;

grid-margin-3

$grid-margin-3: 30px !default;

grid-margin-4

$grid-margin-4: 40px !default;

grid-margin-5

$grid-margin-5: 50px !default;

grid-margin-6

$grid-margin-6: 60px !default;

grid-margin-7

$grid-margin-7: 70px !default;

grid-margin-8

$grid-margin-8: 80px !default;

grid-margin-9

$grid-margin-9: 90px !default;

grid-margin-10

$grid-margin-10: 100px !default;

mixins

container

@mixin container($clearfix: true, $padding: true) { ... }

Description

Defines a (float/flexbox) container Note: recommended value for $clearfix is 'flex'.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$clearfix`	If boolean: whether to use a clearfix, if 'flex': use flexbox.	`Boolean` or `String`	`true`
`$padding`	Whether to use container padding.	`Boolean`	`true`

Requires

[mixin] responsive
[mixin] container-padding
[mixin] clearfix
[variable] grid-container-margin
[variable] grid-container-size

container--big

@mixin container--big($padding: true) { ... }

Description

Can be used in conjunction with container to increase the container's size configuration to "big". Should be applied after container mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$padding`	Whether to use (big) container padding.	`Boolean`	`true`

Requires

[mixin] container-padding
[variable] grid-container-margin-big
[variable] grid-container-size-big
[variable] grid-container-size-big

TODO's

Create standalone alternative.

container--small

@mixin container--small($padding: true) { ... }

Description

Can be used in conjunction with container to decrease the container's size configuration to "small". Should be applied after container mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$padding`	Whether to use (small) container padding.	`Boolean`	`true`

Requires

[mixin] container-padding
[variable] grid-container-margin-small
[variable] grid-container-size-small
[variable] grid-container-size-small

TODO's

Create standalone alternative.

clearfix

@mixin clearfix() { ... }

Description

Adds a "clearfix", preventing floating issues. Note: consider using more modern alternatives to float (flex/grid).

Parameters

None.

Used by

[mixin] container

container-margin

@mixin container-margin($size: 'normal', $properties: ('margin-left', 'margin-right'), $force: false) { ... }

Description

Sets $grid-container-margin, $grid-container-margin-big or $grid-container-margin-small (based on $size) to $properties, adding a margin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Container size preset.	`String`	`'normal'`
`$properties`	One or more properties to set.	`List` or `String`	`('margin-left', 'margin-right')`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[mixin] properties
[mixin] properties
[variable] grid-container-margin
[variable] grid-container-margin-big
[variable] grid-container-margin-big
[variable] grid-container-margin
[variable] grid-container-margin-small
[variable] grid-container-margin-small
[variable] grid-container-margin
[variable] grid-container-margin

container-padding

@mixin container-padding($size: 'normal', $properties: ('padding-left', 'padding-right'), $force: false) { ... }

Description

Sets $grid-container-padding, $grid-container-padding-big or $grid-container-padding-small (based on $size) to $properties, adding a margin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Container size preset.	`String`	`'normal'`
`$properties`	One or more properties to set.	`List` or `String`	`('padding-left', 'padding-right')`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[mixin] properties
[mixin] properties
[variable] grid-container-padding
[variable] grid-container-padding-big
[variable] grid-container-padding-big
[variable] grid-container-padding
[variable] grid-container-padding-small
[variable] grid-container-padding-small
[variable] grid-container-padding
[variable] grid-container-padding

Used by

[mixin] container
[mixin] container--big
[mixin] container--small

breakout-margin

@mixin breakout-margin($size: 'normal', $offset-properties: 'margin-left', $size-properties: 'width', $size-base: 100%, $force: false) { ... }

Description

Compensates for the offset (margin) applied to the container (breaking out of the container).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Container size preset.	`String`	`'normal'`
`$offset-properties`	One or more properties to use for offset compensation.	`String`	`'margin-left'`
`$size-properties`	One or more properties to use for size adjustment.	`String`	`'width'`
`$size-base`	Base size.	`Number`	`100%`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] breakout
[mixin] breakout
[mixin] breakout
[variable] grid-container-margin-big
[variable] grid-container-margin-small
[variable] grid-container-margin

breakout-padding

@mixin breakout-padding($size: 'normal', $offset-properties: 'margin-left', $size-properties: 'width', $size-base: 100%, $force: false) { ... }

Description

Compensates for the offset (padding) applied to the container (breaking out of the container).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Container size preset.	`String`	`'normal'`
`$offset-properties`	One or more properties to use for offset compensation.	`String`	`'margin-left'`
`$size-properties`	One or more properties to use for size adjustment.	`String`	`'width'`
`$size-base`	Base size.	`Number`	`100%`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] breakout
[mixin] breakout
[mixin] breakout
[variable] grid-container-padding-big
[variable] grid-container-padding-small
[variable] grid-container-padding

breakout

@mixin breakout($amount, $offset-properties: 'margin-left', $size-properties: 'width', $size-base: 100%, $force: false) { ... }

Description

Compensates for the offset applied to the container (breaking out of the container).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$amount`	— none	`Number`	— none
`$offset-properties`	One or more properties to use for offset compensation.	`String`	`'margin-left'`
`$size-properties`	One or more properties to use for size adjustment.	`String`	`'width'`
`$size-base`	Base size.	`Number`	`100%`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[mixin] properties

Used by

[mixin] breakout-margin
[mixin] breakout-margin
[mixin] breakout-margin
[mixin] breakout-padding
[mixin] breakout-padding
[mixin] breakout-padding

columns-smart

@mixin columns-smart($span-mobile, $span-tablet, $span-laptop, $span-desktop) { ... }

Description

Shorthand for columns-responsive and omega-smart. Sets columns "span" to element and automatically Sets margin-right to 0 if the element is expected to be the last within a row.

Element is expected to be last if the corresponding span times the "nth-child" equals the corresponding "columns" setting. This assumes all columns to have the same span.

Additionally, clear: left; is set to the first element after an element found to be the last within a row.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span-mobile`	Mobile element span.	`Number`	— none
`$span-tablet`	Tablet element span.	`Number`	— none
`$span-laptop`	Laptop element span.	`Number`	— none
`$span-desktop`	Desktop element span.	`Number`	— none

Requires

[mixin] columns-responsive
[mixin] omega-smart

columns-responsive

@mixin columns-responsive($span-mobile, $span-tablet, $span-laptop, $span-desktop, $correction-mobile: 0px, $correction-tablet: $correction-mobile, $correction-laptop: $correction-tablet, $correction-desktop: $correction-laptop, $properties: 'width') { ... }

Description

Sets the column span and gutter for each breakpoint preset at once.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span-mobile`	Mobile column span.	`Number`	— none
`$span-tablet`	Tablet column span.	`Number`	— none
`$span-laptop`	Laptop column span.	`Number`	— none
`$span-desktop`	Desktop column span.	`Number`	— none
`$correction-mobile`	Mobile correction.	`Number`	`0px`
`$correction-tablet`	Tablet correction.	`Number`	`$correction-mobile`
`$correction-laptop`	Laptop correction.	`Number`	`$correction-tablet`
`$correction-desktop`	Desktop correction.	`Number`	`$correction-laptop`
`$properties`	One or more properties to set.	`List` or `String`	`'width'`

Requires

[mixin] responsive
[mixin] tablet
[mixin] columns-layout
[mixin] laptop
[mixin] columns-layout
[function] columns
[function] columns
[function] columns
[function] columns
[variable] grid-columns-mobile
[variable] grid-gutter-mobile
[variable] grid-columns-tablet
[variable] grid-gutter-tablet
[variable] grid-columns-laptop
[variable] grid-gutter-laptop
[variable] grid-columns-desktop
[variable] grid-gutter-desktop
[variable] grid-gutter-mobile
[variable] grid-gutter-tablet
[variable] grid-gutter-laptop
[variable] grid-gutter-desktop

Used by

[mixin] columns-smart

columns-mobile

@mixin columns-mobile($span, $correction: 0px, $gutter: $grid-gutter-mobile) { ... }

Description

Sets the column $span and $gutter for the (mobile) breakpoint breakpoint preset.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$correction`	Correction.	`Number`	`0px`
`$gutter`	Gutter size.	`Number`	`$grid-gutter-mobile`

Requires

[variable] grid-columns-mobile

columns-tablet

@mixin columns-tablet($span, $correction: 0px, $gutter: $grid-gutter-mobile) { ... }

Description

Sets the column $span and $gutter for the (tablet) breakpoint breakpoint preset.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$correction`	Correction.	`Number`	`0px`
`$gutter`	Gutter size.	`Number`	`$grid-gutter-mobile`

Requires

[mixin] tablet
[mixin] columns
[variable] grid-columns-tablet

columns-laptop

@mixin columns-laptop($span, $correction: 0px, $gutter: $grid-gutter-mobile) { ... }

Description

Sets the column $span and $gutter for the (laptop) breakpoint breakpoint preset.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$correction`	Correction.	`Number`	`0px`
`$gutter`	Gutter size.	`Number`	`$grid-gutter-mobile`

Requires

[mixin] laptop
[mixin] columns
[variable] grid-columns-laptop

columns-desktop

@mixin columns-desktop($span, $correction: 0px, $gutter: $grid-gutter-mobile) { ... }

Description

Sets the column $span and $gutter for the (desktop) breakpoint breakpoint preset.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$correction`	Correction.	`Number`	`0px`
`$gutter`	Gutter size.	`Number`	`$grid-gutter-mobile`

Requires

[mixin] desktop
[mixin] columns
[variable] grid-columns-laptop

columns

@mixin columns($span, $total, $gutter, $omega: 'auto', $properties: 'width', $correction: 0px) { ... }

Description

Sets the column $span and $gutter.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$total`	Total number of columns within a row.	`Number`	— none
`$gutter`	Gutter size.	`Number`	— none
`$omega`	Whether the element is the last column, "auto" checks using :last-child.	`String` or `Boolean`	`'auto'`
`$properties`	One or more properties to set.	`List` or `String`	`'width'`
`$correction`	Correction.	`Number`	`0px`

Requires

[mixin] columns-layout
[mixin] properties
[function] columns

Used by

[mixin] columns-tablet
[mixin] columns-laptop
[mixin] columns-desktop

columns-layout

@mixin columns-layout($gutter, $omega: 'auto') { ... }

Description

Sets the properties required to make a column behave correctly within it's container.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$gutter`	Gutter size.	`Number`	— none
`$omega`	Whether the element is the last column, "auto" checks using :last-child.	`String` or `Boolean`	`'auto'`

Requires

[mixin] omega
[mixin] omega

Used by

[mixin] columns-responsive
[mixin] columns-responsive
[mixin] columns

gutter

@mixin gutter($properties: 'margin-right', $multiplier: 1) { ... }

Description

Adds a gutter (space between columns).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	`'margin-right'`
`$multiplier`	The amount of times the gutter size is applied.	`Number`	`1`

Requires

[mixin] responsive
[variable] grid-gutter-mobile
[variable] grid-gutter-tablet
[variable] grid-gutter-laptop
[variable] grid-gutter-desktop

omega

@mixin omega($force: false, $properties: margin-right) { ... }

Description

Sets all $properties to 0, typically used for clearing gutter margin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$force`	Whether to use !important.	`Boolean`	`false`
`$properties`	One or more properties to set.	`List` or `String`	`margin-right`

Requires

[mixin] properties

Used by

[mixin] columns-layout
[mixin] columns-layout
[mixin] omega-nth
[mixin] omega-nth

omega-smart

@mixin omega-smart($span-mobile, $span-tablet, $span-laptop, $span-desktop, $force: false, $properties: margin-right) { ... }

Description

Sets all $properties to 0 if the element is expected to be the last within a row.

Element is expected to be last if the corresponding "span" times the "nth-child" equals the corresponding "columns" setting. This assumes all columns to have the same span.

Additionally, clear: left; is set to the first element after an element found to be the last within a row. Adds !important if $force equals true.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span-mobile`	Mobile element span.	`Number`	— none
`$span-tablet`	Tablet element span.	`Number`	— none
`$span-laptop`	Laptop element span.	`Number`	— none
`$span-desktop`	Desktop element span.	`Number`	— none
`$force`	Whether to use !important.	`Boolean`	`false`
`$properties`	One or more properties to set.	`List` or `String`	`margin-right`

Requires

[mixin] tablet
[mixin] omega-smart-tablet
[mixin] laptop
[mixin] omega-smart-laptop

Used by

[mixin] columns-smart

omega-smart-mobile

@mixin omega-smart-mobile($span, $force: false, $properties: margin-right) { ... }

Description

Applies omega-smart to the (mobile) breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$force`	Whether to use !important.	`Boolean`	`false`
`$properties`	One or more properties to set.	`List` or `String`	`margin-right`

Requires

[mixin] omega-nth
[variable] grid-columns-mobile

omega-smart-tablet

@mixin omega-smart-tablet($span, $force: false, $properties: margin-right) { ... }

Description

Applies omega-smart to the (tablet) breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$force`	Whether to use !important.	`Boolean`	`false`
`$properties`	One or more properties to set.	`List` or `String`	`margin-right`

Requires

[mixin] omega-nth
[variable] grid-columns-tablet

Used by

[mixin] omega-smart

omega-smart-laptop

@mixin omega-smart-laptop($span, $force: false, $properties: margin-right) { ... }

Description

Applies omega-smart to the (laptop) breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$force`	Whether to use !important.	`Boolean`	`false`
`$properties`	One or more properties to set.	`List` or `String`	`margin-right`

Requires

[mixin] omega-nth
[variable] grid-columns-laptop

Used by

[mixin] omega-smart

omega-smart-desktop

@mixin omega-smart-desktop($span, $force: false, $properties: margin-right) { ... }

Description

Applies omega-smart to the (desktop) breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$force`	Whether to use !important.	`Boolean`	`false`
`$properties`	One or more properties to set.	`List` or `String`	`margin-right`

Requires

[mixin] omega-nth
[variable] grid-columns-desktop

omega-nth

@mixin omega-nth($span, $total, $force: false, $properties: margin-right) { ... }

Description

Applies omega if column is expected to be the last within the row. Adds !important if $force equals true.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$total`	Total number of columns within a row.	`Number`	— none
`$force`	Whether to use !important.	`Boolean`	`false`
`$properties`	One or more properties to set.	`List` or `String`	`margin-right`

Requires

[mixin] omega
[mixin] omega

Used by

[mixin] omega-smart-mobile
[mixin] omega-smart-tablet
[mixin] omega-smart-laptop
[mixin] omega-smart-desktop

rows

@mixin rows($span, $properties: height, $force: false) { ... }

Description

Applies row height by setting each value in $properties to $span * $grid-row-height.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Amount of rows.	`Number`	— none
`$properties`	One or more properties to set.	`List` or `String`	`height`
`$force`	Whether to use !important.	`Boolean`	`false`

Requires

[mixin] properties
[variable] grid-row-height

functions

columns

@function columns($span, $total, $gutter, $correction: 0px) { ... }

Description

Returns the value for a given (column) $span and $gutter.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$span`	Column span.	`Number`	— none
`$total`	Total number of columns within a row.	`Number`	— none
`$gutter`	Gutter size.	`Number`	— none
`$correction`	Correction.	`Number`	`0px`

Returns

String —

Value calculation.

Used by

[mixin] columns-responsive
[mixin] columns-responsive
[mixin] columns-responsive
[mixin] columns-responsive
[mixin] columns

responsive

variables

breakpoint-mobile-s

$breakpoint-mobile-s: 320px !default;

breakpoint-mobile-m

$breakpoint-mobile-m: 375px !default;

breakpoint-mobile-l

$breakpoint-mobile-l: 425px !default;

breakpoint-tablet

$breakpoint-tablet: 768px !default;

Used by

[mixin] mobile-only
[mixin] tablet
[mixin] tablet

breakpoint-laptop

$breakpoint-laptop: 992px !default;

Used by

[mixin] tablet
[mixin] laptop
[mixin] laptop

breakpoint-desktop

$breakpoint-desktop: 1200px !default;

Used by

[mixin] laptop
[mixin] desktop

responsive-default-media

$responsive-default-media: all !default;

mixins

breakpoint

@mixin breakpoint($min: null, $max: null, $media: $responsive-default-media) { ... }

Description

Wraps content block in a media query based on $min, $max and $media. If either $min and/or $max is set to null (default) the specific expression is not set.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min`	Minimal screen width.	`Number (with unit)`	`null`
`$max`	Maximum screen width.	`Number (with unit)`	`null`
`$media`	Media (e.g. all, screen or print).	`String`	`$responsive-default-media`

Used by

[mixin] mobile-only
[mixin] tablet
[mixin] tablet
[mixin] laptop
[mixin] laptop
[mixin] desktop

responsive

@mixin responsive($properties, $value-mobile, $value-tablet, $value-laptop: null, $value-desktop: null, $media: $responsive-default-media) { ... }

Description

Applies specific value to all $properties based on active breakpoint. Requires at least, $value-mobile and $value-tablet to be set. If any value is the same as the previous, or set to null (default), no media query is generated and styling relies on inheritance of the previous breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	— none
`$value-mobile`	The mobile value.	`String`	— none
`$value-tablet`	The tablet value.	`String`	— none
`$value-laptop`	The laptop value.	`String`	`null`
`$value-desktop`	The desktop value.	`String`	`null`
`$media`	Media (e.g. all, screen or print).	`String`	`$responsive-default-media`

Requires

[mixin] properties

Used by

[mixin] container
[mixin] columns-responsive
[mixin] gutter
[mixin] body
[mixin] body
[mixin] body
[mixin] body--big
[mixin] body--big
[mixin] body--big
[mixin] body--small
[mixin] body--small
[mixin] body--small
[mixin] h1
[mixin] h1
[mixin] h1
[mixin] h2
[mixin] h2
[mixin] h2
[mixin] h3
[mixin] h3
[mixin] h3
[mixin] h4
[mixin] h4
[mixin] h4
[mixin] h5
[mixin] h5
[mixin] h5
[mixin] h6
[mixin] h6
[mixin] h6
[mixin] margin
[mixin] margin

mobile-only

@mixin mobile-only($media: $responsive-default-media) { ... }

Description

Wraps content block in a media query matching screen sizes smaller than $breakpoint-tablet (mobile).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$media`	Media (e.g. all, screen or print).	`String`	`$responsive-default-media`

Requires

[mixin] breakpoint
[variable] breakpoint-tablet

tablet

@mixin tablet($only: false, $media: $responsive-default-media) { ... }

Description

Wraps content block in a media query matching screen sizes larger or equal than $breakpoint-tablet.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$only`	If true, adds max-width expression to media query preventing inheritance by larger breakpoints.	`Boolean`	`false`
`$media`	Media (e.g. all, screen or print).	`String`	`$responsive-default-media`

Requires

[mixin] breakpoint
[mixin] breakpoint
[variable] breakpoint-tablet
[variable] breakpoint-tablet
[variable] breakpoint-laptop

Used by

[mixin] columns-responsive
[mixin] columns-tablet
[mixin] omega-smart
[mixin] show-on-tablet
[mixin] hide-on-tablet

laptop

@mixin laptop($only: false, $media: $responsive-default-media) { ... }

Description

Wraps content block in a media query matching screen sizes larger or equal than $breakpoint-laptop.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$only`	If true, adds max-width expression to media query preventing inheritance by larger breakpoints.	`Boolean`	`false`
`$media`	Media (e.g. all, screen or print).	`String`	`$responsive-default-media`

Requires

[mixin] breakpoint
[mixin] breakpoint
[variable] breakpoint-laptop
[variable] breakpoint-laptop
[variable] breakpoint-desktop

Used by

[mixin] columns-responsive
[mixin] columns-laptop
[mixin] omega-smart
[mixin] show-on-laptop
[mixin] hide-on-laptop

desktop

@mixin desktop($media: $responsive-default-media) { ... }

Description

Wraps content block in a media query matching screen sizes larger or equal than $breakpoint-desktop.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$media`	Media (e.g. all, screen or print).	`String`	`$responsive-default-media`

Requires

[mixin] breakpoint
[variable] breakpoint-desktop

Used by

[mixin] columns-desktop
[mixin] show-on-desktop
[mixin] hide-on-desktop

show-on-mobile

@mixin show-on-mobile($display: block) { ... }

Description

Hides element (display: none;) by default, only showing it on mobile screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`

show-on-tablet

@mixin show-on-tablet($display: block, $only: false) { ... }

Description

Hides element (display: none;) by default, only showing it on tablet screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`
`$only`	If true, adds max-width expression to media query preventing inheritance by larger breakpoints.	`Boolean`	`false`

Requires

[mixin] tablet

show-on-laptop

@mixin show-on-laptop($display: block, $only: false) { ... }

Description

Hides element (display: none;) by default, only showing it on laptop screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`
`$only`	If true, adds max-width expression to media query preventing inheritance by larger breakpoints.	`Boolean`	`false`

Requires

[mixin] laptop

show-on-desktop

@mixin show-on-desktop($display: block) { ... }

Description

Hides element (display: none;) by default, only showing it on desktop screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`

Requires

[mixin] desktop

hide-on-mobile

@mixin hide-on-mobile($display: block) { ... }

Description

Shows element by default, only hiding it (display: none;) on mobile screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`

hide-on-tablet

@mixin hide-on-tablet($display: block, $only: false) { ... }

Description

Shows element by default, only hiding it (display: none;) on tablet screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`
`$only`	If true, adds max-width expression to media query preventing inheritance by larger breakpoints.	`Boolean`	`false`

Requires

[mixin] tablet

hide-on-laptop

@mixin hide-on-laptop($display: block, $only: false) { ... }

Description

Shows element by default, only hiding it (display: none;) on laptop screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`
`$only`	If true, adds max-width expression to media query preventing inheritance by larger breakpoints.	`Boolean`	`false`

Requires

[mixin] laptop

hide-on-desktop

@mixin hide-on-desktop($display: block, $only: false) { ... }

Description

Shows element by default, only hiding it (display: none;) on desktop screen sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$display`	Display mode used when visible.	`String`	`block`
`$only`	If true, adds max-width expression to media query preventing inheritance by larger breakpoints.	`Boolean`	`false`

Requires

[mixin] desktop

transform

variables

transform-shadow-default-color

$transform-shadow-default-color: rgba($color-black, 0.15) !default;

transform-shadow-default-offset-x

$transform-shadow-default-offset-x: 0 !default;

transform-shadow-default-offset-y

$transform-shadow-default-offset-y: 0.5rem !default;

transform-shadow-default-blur

$transform-shadow-default-blur: 1rem !default;

transform-shadow-default-spread

$transform-shadow-default-spread: 0 !default;

mixins

absolute

@mixin absolute($top: null, $left: null, $right: null, $bottom: null) { ... }

Description

Applies absolute position to position specified by one of the arguments. If an argument is set to null (default) the property is not set. Note: order differs from traditional top, right, bottom left syntax.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$top`	Value for top.	`Number`	`null`
`$left`	Value for left.	`Number`	`null`
`$right`	Value for right.	`Number`	`null`
`$bottom`	Value for bottom.	`Number`	`null`

Used by

[mixin] center-h
[mixin] center-v
[mixin] center-hv
[mixin] overlay

aspect-ratio

@mixin aspect-ratio($width: null, $height: null, $properties: padding-top, $clear-height: 'auto') { ... }

Description

Applies an aspect ratio (e.g. 4:3, or 21) to element by adding a vertical padding and setting the height to 0. This requires a child elements to be positioned on top of this element (e.g. @include overlay;).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Value for width.	`Number`	`null`
`$height`	Value for height.	`Number`	`null`
`$properties`	One or more properties to set.	`List` or `String`	`padding-top`
`$clear-height`	Whether to set the height to 0.	`String` or `Boolean`	`'auto'`

Requires

[mixin] properties

center-h

@mixin center-h($width: null, $height: null) { ... }

Description

Centers the element horizontally using absolute positioning and a translation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Value for width.	`Number`	`null`
`$height`	Value for height.	`Number`	`null`

Requires

[mixin] absolute
[mixin] translate

center-v

@mixin center-v($width: null, $height: null) { ... }

Description

Centers the element vertically using absolute positioning and a translation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Value for width.	`Number`	`null`
`$height`	Value for height.	`Number`	`null`

Requires

[mixin] absolute
[mixin] translate

center-hv

@mixin center-hv($width: null, $height: null) { ... }

Description

Centers the element horizontally and vertically using absolute positioning and a translation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Value for width.	`Number`	`null`
`$height`	Value for height.	`Number`	`null`

Requires

[mixin] absolute
[mixin] translate

overlay

@mixin overlay() { ... }

Description

Positions the element on top of the parent element. Requires the parent to haven a position set.

Parameters

None.

Requires

[mixin] absolute

rounded

@mixin rounded() { ... }

Description

Adds a border-radius of 100%, resulting in a rounded element.

Parameters

None.

shadow

@mixin shadow($position: 'bottom, $color: $transform-shadow-default-color, $offset-x: $transform-shadow-default-offset-x, $offset-y: $transform-shadow-default-offset-y, $blur: $transform-shadow-default-blur, $spread: $transform-shadow-default-spread) { ... }

Description

Adds a (box) shadow.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	Can be one of: 'all', 'top', 'right', bottom' or 'left'.	`String`	`'bottom`
`$color`	Color of the shadow.	`Color`	`$transform-shadow-default-color`
`$offset-x`	X offset of the shadow.	`Number`	`$transform-shadow-default-offset-x`
`$offset-y`	X offset of the shadow.	`Number`	`$transform-shadow-default-offset-y`
`$blur`	Blur amount of the shadow.	`Number`	`$transform-shadow-default-blur`
`$spread`	Spread amount of the shadow.	`Number`	`$transform-shadow-default-spread`

rotate

@mixin rotate($deg, $origin) { ... }

Description

Rotates the element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$deg`	Degrees of rotation.	`Number`	— none
`$origin`	The origin for an element's transformations.	`String`	— none

Requires

[function] tr_rotate

scale

@mixin scale($sx, $sy: null) { ... }

Description

Scales the element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$sx`	X scale factor.	`Number`	— none
`$sy`	Y scale factor, if omitted: $sx scale factor is applied to both x and y.	`Number`	`null`

Requires

[function] tr_scale

translate

@mixin translate($x: null, $y: null) { ... }

Description

Translates the element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x`	X translation amount.	`Number`	`null`
`$y`	Y translation amount.	`Number`	`null`

Requires

[function] tr_translate

Used by

[mixin] center-h
[mixin] center-v
[mixin] center-hv

functions

tr_rotate

@function tr_rotate($deg) { ... }

Description

Returns the (transform) value for a given rotation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$deg`	Degrees of rotation.	`Number`	— none

Returns

String —

Transform value.

Used by

[mixin] rotate

tr_scale

@function tr_scale($sx, $sy: null) { ... }

Description

Returns the (transform) value for a given scale.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$sx`	X scale factor.	`Number`	— none
`$sy`	Y scale factor, if omitted: $sx scale factor is applied to both x and y.	`Number`	`null`

Returns

String —

Transform value.

Used by

[mixin] scale

tr_translate

@function tr_translate($x: null, $y: null) { ... }

Description

Returns the (transform) value for a given translation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x`	X translation amount.	`Number`	`null`
`$y`	Y translation amount.	`Number`	`null`

Returns

String —

Transform value.

Used by

[mixin] translate

typography

variables

typography-color-base

$typography-color-base: $color-black !default;

typography-color-text

$typography-color-text: $typography-color-base !default;

typography-color-link

$typography-color-link: $color-blue !default;

Used by

[mixin] anchor

typography-color-link-hover

$typography-color-link-hover: $typography-color-link !default;

Used by

[mixin] anchor
[mixin] anchor

typography-color-h

$typography-color-h: $typography-color-base !default;

typography-color-border

$typography-color-border: $color-border;

typography-default-hover-link

$typography-default-hover-link: true !default;

typography-decoration-link

$typography-decoration-link: underline !default;

Used by

[mixin] anchor
[mixin] anchor

typography-font-family-base

$typography-font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif !default;

typography-font-family-text

$typography-font-family-text: $typography-font-family-base !default;

typography-font-family-h

$typography-font-family-h: $typography-font-family-base !default;

typography-font-size-text

$typography-font-size-text: 1rem !default;

typography-font-size-text-mobile

$typography-font-size-text-mobile: $typography-font-size-text !default;

Used by

[mixin] body

typography-font-size-text-tablet

$typography-font-size-text-tablet: $typography-font-size-text !default;

Used by

[mixin] body

typography-font-size-text-laptop

$typography-font-size-text-laptop: $typography-font-size-text !default;

Used by

[mixin] body

typography-font-size-text-desktop

$typography-font-size-text-desktop: $typography-font-size-text !default;

Used by

[mixin] body

typography-font-size-text-big

$typography-font-size-text-big: ($typography-font-size-text * 1.25) !default;

typography-font-size-text-big-mobile

$typography-font-size-text-big-mobile: $typography-font-size-text-big !default;

Used by

[mixin] body--big

typography-font-size-text-big-tablet

$typography-font-size-text-big-tablet: $typography-font-size-text-big !default;

Used by

[mixin] body--big

typography-font-size-text-big-laptop

$typography-font-size-text-big-laptop: $typography-font-size-text-big !default;

Used by

[mixin] body--big

typography-font-size-text-big-desktop

$typography-font-size-text-big-desktop: $typography-font-size-text-big !default;

Used by

[mixin] body--big

typography-font-size-text-small

$typography-font-size-text-small: ($typography-font-size-text * 0.75) !default;

typography-font-size-text-small-mobile

$typography-font-size-text-small-mobile: $typography-font-size-text-small !default;

Used by

[mixin] body--small

typography-font-size-text-small-tablet

$typography-font-size-text-small-tablet: $typography-font-size-text-small !default;

Used by

[mixin] body--small

typography-font-size-text-small-laptop

$typography-font-size-text-small-laptop: $typography-font-size-text-small !default;

Used by

[mixin] body--small

typography-font-size-text-small-desktop

$typography-font-size-text-small-desktop: $typography-font-size-text-small !default;

Used by

[mixin] body--small

typography-font-size-h1

$typography-font-size-h1: ($typography-font-size-text * 2.5) !default;

typography-font-size-h1-mobile

$typography-font-size-h1-mobile: $typography-font-size-h1 !default;

Used by

[mixin] h1

typography-font-size-h1-tablet

$typography-font-size-h1-tablet: $typography-font-size-h1 !default;

Used by

[mixin] h1

typography-font-size-h1-laptop

$typography-font-size-h1-laptop: $typography-font-size-h1 !default;

Used by

[mixin] h1

typography-font-size-h1-desktop

$typography-font-size-h1-desktop: $typography-font-size-h1 !default;

Used by

[mixin] h1

typography-font-size-h2

$typography-font-size-h2: ($typography-font-size-text * 2) !default;

typography-font-size-h2-mobile

$typography-font-size-h2-mobile: $typography-font-size-h2 !default;

Used by

[mixin] h2

typography-font-size-h2-tablet

$typography-font-size-h2-tablet: $typography-font-size-h2 !default;

Used by

[mixin] h2

typography-font-size-h2-laptop

$typography-font-size-h2-laptop: $typography-font-size-h2 !default;

Used by

[mixin] h2

typography-font-size-h2-desktop

$typography-font-size-h2-desktop: $typography-font-size-h2 !default;

Used by

[mixin] h2

typography-font-size-h3

$typography-font-size-h3: ($typography-font-size-text * 1.75) !default;

typography-font-size-h3-mobile

$typography-font-size-h3-mobile: $typography-font-size-h3 !default;

Used by

[mixin] h3

typography-font-size-h3-tablet

$typography-font-size-h3-tablet: $typography-font-size-h3 !default;

Used by

[mixin] h3

typography-font-size-h3-laptop

$typography-font-size-h3-laptop: $typography-font-size-h3 !default;

Used by

[mixin] h3

typography-font-size-h3-desktop

$typography-font-size-h3-desktop: $typography-font-size-h3 !default;

Used by

[mixin] h3

typography-font-size-h4

$typography-font-size-h4: ($typography-font-size-text * 1.5) !default;

typography-font-size-h4-mobile

$typography-font-size-h4-mobile: $typography-font-size-h4 !default;

Used by

[mixin] h4

typography-font-size-h4-tablet

$typography-font-size-h4-tablet: $typography-font-size-h4 !default;

Used by

[mixin] h4

typography-font-size-h4-laptop

$typography-font-size-h4-laptop: $typography-font-size-h4 !default;

Used by

[mixin] h4

typography-font-size-h4-desktop

$typography-font-size-h4-desktop: $typography-font-size-h4 !default;

Used by

[mixin] h4

typography-font-size-h5

$typography-font-size-h5: ($typography-font-size-text * 1.25) !default;

typography-font-size-h5-mobile

$typography-font-size-h5-mobile: $typography-font-size-h5 !default;

Used by

[mixin] h5

typography-font-size-h5-tablet

$typography-font-size-h5-tablet: $typography-font-size-h5 !default;

Used by

[mixin] h5

typography-font-size-h5-laptop

$typography-font-size-h5-laptop: $typography-font-size-h5 !default;

Used by

[mixin] h5

typography-font-size-h5-desktop

$typography-font-size-h5-desktop: $typography-font-size-h5 !default;

Used by

[mixin] h5

typography-font-size-h6

$typography-font-size-h6: $typography-font-size-text !default;

typography-font-size-h6-mobile

$typography-font-size-h6-mobile: $typography-font-size-h6 !default;

Used by

[mixin] h6

typography-font-size-h6-tablet

$typography-font-size-h6-tablet: $typography-font-size-h6 !default;

Used by

[mixin] h6

typography-font-size-h6-laptop

$typography-font-size-h6-laptop: $typography-font-size-h6 !default;

Used by

[mixin] h6

typography-font-size-h6-desktop

$typography-font-size-h6-desktop: $typography-font-size-h6 !default;

Used by

[mixin] h6

typography-font-weight-text

$typography-font-weight-text: normal !default;

Used by

[mixin] body

typography-font-weight-h

$typography-font-weight-h: bold !default;

typography-font-weight-h1

$typography-font-weight-h1: $typography-font-weight-h !default;

Used by

[mixin] h1

typography-font-weight-h2

$typography-font-weight-h2: $typography-font-weight-h !default;

Used by

[mixin] h2

typography-font-weight-h3

$typography-font-weight-h3: $typography-font-weight-h !default;

Used by

[mixin] h3

typography-font-weight-h4

$typography-font-weight-h4: $typography-font-weight-h !default;

Used by

[mixin] h4

typography-font-weight-h5

$typography-font-weight-h5: $typography-font-weight-h !default;

Used by

[mixin] h5

typography-font-weight-h6

$typography-font-weight-h6: $typography-font-weight-h !default;

Used by

[mixin] h6

typography-line-height-base

$typography-line-height-base: 1.5 !default;

typography-line-height-text

$typography-line-height-text: $typography-line-height-base !default;

typography-line-height-text-mobile

$typography-line-height-text-mobile: $typography-line-height-text !default;

Used by

[mixin] body

typography-line-height-text-tablet

$typography-line-height-text-tablet: $typography-line-height-text !default;

Used by

[mixin] body

typography-line-height-text-laptop

$typography-line-height-text-laptop: $typography-line-height-text !default;

Used by

[mixin] body

typography-line-height-text-desktop

$typography-line-height-text-desktop: $typography-line-height-text !default;

Used by

[mixin] body

typography-line-height-text-big

$typography-line-height-text-big: $typography-line-height-base !default;

typography-line-height-text-big-mobile

$typography-line-height-text-big-mobile: $typography-line-height-text-big !default;

Used by

[mixin] body--big

typography-line-height-text-big-tablet

$typography-line-height-text-big-tablet: $typography-line-height-text-big !default;

Used by

[mixin] body--big

typography-line-height-text-big-laptop

$typography-line-height-text-big-laptop: $typography-line-height-text-big !default;

Used by

[mixin] body--big

typography-line-height-text-big-desktop

$typography-line-height-text-big-desktop: $typography-line-height-text-big !default;

Used by

[mixin] body--big

typography-line-height-text-small

$typography-line-height-text-small: $typography-line-height-base !default;

typography-line-height-text-small-mobile

$typography-line-height-text-small-mobile: $typography-line-height-text-small !default;

Used by

[mixin] body--small

typography-line-height-text-small-tablet

$typography-line-height-text-small-tablet: $typography-line-height-text-small !default;

Used by

[mixin] body--small

typography-line-height-text-small-laptop

$typography-line-height-text-small-laptop: $typography-line-height-text-small !default;

Used by

[mixin] body--small

typography-line-height-text-small-desktop

$typography-line-height-text-small-desktop: $typography-line-height-text-small !default;

Used by

[mixin] body--small

typography-line-height-h

$typography-line-height-h: 1.2 !default;

typography-line-height-h1

$typography-line-height-h1: $typography-line-height-h !default;

typography-line-height-h1-mobile

$typography-line-height-h1-mobile: $typography-line-height-h1 !default;

Used by

[mixin] h1

typography-line-height-h1-tablet

$typography-line-height-h1-tablet: $typography-line-height-h1 !default;

Used by

[mixin] h1

typography-line-height-h1-laptop

$typography-line-height-h1-laptop: $typography-line-height-h1 !default;

Used by

[mixin] h1

typography-line-height-h1-desktop

$typography-line-height-h1-desktop: $typography-line-height-h1 !default;

Used by

[mixin] h1

typography-line-height-h2

$typography-line-height-h2: $typography-line-height-h !default;

typography-line-height-h2-mobile

$typography-line-height-h2-mobile: $typography-line-height-h2 !default;

Used by

[mixin] h2

typography-line-height-h2-tablet

$typography-line-height-h2-tablet: $typography-line-height-h2 !default;

Used by

[mixin] h2

typography-line-height-h2-laptop

$typography-line-height-h2-laptop: $typography-line-height-h2 !default;

Used by

[mixin] h2

typography-line-height-h2-desktop

$typography-line-height-h2-desktop: $typography-line-height-h2 !default;

Used by

[mixin] h2

typography-line-height-h3

$typography-line-height-h3: $typography-line-height-h !default;

typography-line-height-h3-mobile

$typography-line-height-h3-mobile: $typography-line-height-h3 !default;

Used by

[mixin] h3

typography-line-height-h3-tablet

$typography-line-height-h3-tablet: $typography-line-height-h3 !default;

Used by

[mixin] h3

typography-line-height-h3-laptop

$typography-line-height-h3-laptop: $typography-line-height-h3 !default;

Used by

[mixin] h3

typography-line-height-h3-desktop

$typography-line-height-h3-desktop: $typography-line-height-h3 !default;

Used by

[mixin] h3

typography-line-height-h4

$typography-line-height-h4: $typography-line-height-h !default;

typography-line-height-h4-mobile

$typography-line-height-h4-mobile: $typography-line-height-h4 !default;

Used by

[mixin] h4

typography-line-height-h4-tablet

$typography-line-height-h4-tablet: $typography-line-height-h4 !default;

Used by

[mixin] h4

typography-line-height-h4-laptop

$typography-line-height-h4-laptop: $typography-line-height-h4 !default;

Used by

[mixin] h4

typography-line-height-h4-desktop

$typography-line-height-h4-desktop: $typography-line-height-h4 !default;

Used by

[mixin] h4

typography-line-height-h5

$typography-line-height-h5: $typography-line-height-h !default;

typography-line-height-h5-mobile

$typography-line-height-h5-mobile: $typography-line-height-h5 !default;

Used by

[mixin] h5

typography-line-height-h5-tablet

$typography-line-height-h5-tablet: $typography-line-height-h5 !default;

Used by

[mixin] h5

typography-line-height-h5-laptop

$typography-line-height-h5-laptop: $typography-line-height-h5 !default;

Used by

[mixin] h5

typography-line-height-h5-desktop

$typography-line-height-h5-desktop: $typography-line-height-h5 !default;

Used by

[mixin] h5

typography-line-height-h6

$typography-line-height-h6: $typography-line-height-h !default;

typography-line-height-h6-mobile

$typography-line-height-h6-mobile: $typography-line-height-h6 !default;

Used by

[mixin] h6

typography-line-height-h6-tablet

$typography-line-height-h6-tablet: $typography-line-height-h6 !default;

Used by

[mixin] h6

typography-line-height-h6-laptop

$typography-line-height-h6-laptop: $typography-line-height-h6 !default;

Used by

[mixin] h6

typography-line-height-h6-desktop

$typography-line-height-h6-desktop: $typography-line-height-h6 !default;

Used by

[mixin] h6

typography-letter-spacing-base

$typography-letter-spacing-base: normal;

typography-letter-spacing-text

$typography-letter-spacing-text: $typography-letter-spacing-base !default;

typography-letter-spacing-text-mobile

$typography-letter-spacing-text-mobile: $typography-letter-spacing-text !default;

Used by

[mixin] body

typography-letter-spacing-text-tablet

$typography-letter-spacing-text-tablet: $typography-letter-spacing-text !default;

Used by

[mixin] body

typography-letter-spacing-text-laptop

$typography-letter-spacing-text-laptop: $typography-letter-spacing-text !default;

Used by

[mixin] body

typography-letter-spacing-text-desktop

$typography-letter-spacing-text-desktop: $typography-letter-spacing-text !default;

Used by

[mixin] body

typography-letter-spacing-text-big

$typography-letter-spacing-text-big: $typography-letter-spacing-base !default;

typography-letter-spacing-text-big-mobile

$typography-letter-spacing-text-big-mobile: $typography-letter-spacing-text-big !default;

Used by

[mixin] body--big

typography-letter-spacing-text-big-tablet

$typography-letter-spacing-text-big-tablet: $typography-letter-spacing-text-big !default;

Used by

[mixin] body--big

typography-letter-spacing-text-big-laptop

$typography-letter-spacing-text-big-laptop: $typography-letter-spacing-text-big !default;

Used by

[mixin] body--big

typography-letter-spacing-text-big-desktop

$typography-letter-spacing-text-big-desktop: $typography-letter-spacing-text-big !default;

Used by

[mixin] body--big

typography-letter-spacing-text-small

$typography-letter-spacing-text-small: $typography-letter-spacing-base !default;

typography-letter-spacing-text-small-mobile

$typography-letter-spacing-text-small-mobile: $typography-letter-spacing-text-small !default;

Used by

[mixin] body--small

typography-letter-spacing-text-small-tablet

$typography-letter-spacing-text-small-tablet: $typography-letter-spacing-text-small !default;

Used by

[mixin] body--small

typography-letter-spacing-text-small-laptop

$typography-letter-spacing-text-small-laptop: $typography-letter-spacing-text-small !default;

Used by

[mixin] body--small

typography-letter-spacing-text-small-desktop

$typography-letter-spacing-text-small-desktop: $typography-letter-spacing-text-small !default;

Used by

[mixin] body--small

typography-letter-spacing-h

$typography-letter-spacing-h: normal;

typography-letter-spacing-h1

$typography-letter-spacing-h1: $typography-letter-spacing-h !default;

typography-letter-spacing-h1-mobile

$typography-letter-spacing-h1-mobile: $typography-letter-spacing-h1 !default;

Used by

[mixin] h1

typography-letter-spacing-h1-tablet

$typography-letter-spacing-h1-tablet: $typography-letter-spacing-h1 !default;

Used by

[mixin] h1

typography-letter-spacing-h1-laptop

$typography-letter-spacing-h1-laptop: $typography-letter-spacing-h1 !default;

Used by

[mixin] h1

typography-letter-spacing-h1-desktop

$typography-letter-spacing-h1-desktop: $typography-letter-spacing-h1 !default;

Used by

[mixin] h1

typography-letter-spacing-h2

$typography-letter-spacing-h2: $typography-letter-spacing-h !default;

typography-letter-spacing-h2-mobile

$typography-letter-spacing-h2-mobile: $typography-letter-spacing-h2 !default;

Used by

[mixin] h2

typography-letter-spacing-h2-tablet

$typography-letter-spacing-h2-tablet: $typography-letter-spacing-h2 !default;

Used by

[mixin] h2

typography-letter-spacing-h2-laptop

$typography-letter-spacing-h2-laptop: $typography-letter-spacing-h2 !default;

Used by

[mixin] h2

typography-letter-spacing-h2-desktop

$typography-letter-spacing-h2-desktop: $typography-letter-spacing-h2 !default;

Used by

[mixin] h2

typography-letter-spacing-h3

$typography-letter-spacing-h3: $typography-letter-spacing-h !default;

typography-letter-spacing-h3-mobile

$typography-letter-spacing-h3-mobile: $typography-letter-spacing-h3 !default;

Used by

[mixin] h3

typography-letter-spacing-h3-tablet

$typography-letter-spacing-h3-tablet: $typography-letter-spacing-h3 !default;

Used by

[mixin] h3

typography-letter-spacing-h3-laptop

$typography-letter-spacing-h3-laptop: $typography-letter-spacing-h3 !default;

Used by

[mixin] h3

typography-letter-spacing-h3-desktop

$typography-letter-spacing-h3-desktop: $typography-letter-spacing-h3 !default;

Used by

[mixin] h3

typography-letter-spacing-h4

$typography-letter-spacing-h4: $typography-letter-spacing-h !default;

typography-letter-spacing-h4-mobile

$typography-letter-spacing-h4-mobile: $typography-letter-spacing-h4 !default;

Used by

[mixin] h4

typography-letter-spacing-h4-tablet

$typography-letter-spacing-h4-tablet: $typography-letter-spacing-h4 !default;

Used by

[mixin] h4

typography-letter-spacing-h4-laptop

$typography-letter-spacing-h4-laptop: $typography-letter-spacing-h4 !default;

Used by

[mixin] h4

typography-letter-spacing-h4-desktop

$typography-letter-spacing-h4-desktop: $typography-letter-spacing-h4 !default;

Used by

[mixin] h4

typography-letter-spacing-h5

$typography-letter-spacing-h5: $typography-letter-spacing-h !default;

typography-letter-spacing-h5-mobile

$typography-letter-spacing-h5-mobile: $typography-letter-spacing-h5 !default;

Used by

[mixin] h5

typography-letter-spacing-h5-tablet

$typography-letter-spacing-h5-tablet: $typography-letter-spacing-h5 !default;

Used by

[mixin] h5

typography-letter-spacing-h5-laptop

$typography-letter-spacing-h5-laptop: $typography-letter-spacing-h5 !default;

Used by

[mixin] h5

typography-letter-spacing-h5-desktop

$typography-letter-spacing-h5-desktop: $typography-letter-spacing-h5 !default;

Used by

[mixin] h5

typography-letter-spacing-h6

$typography-letter-spacing-h6: $typography-letter-spacing-h !default;

typography-letter-spacing-h6-mobile

$typography-letter-spacing-h6-mobile: $typography-letter-spacing-h6 !default;

Used by

[mixin] h6

typography-letter-spacing-h6-tablet

$typography-letter-spacing-h6-tablet: $typography-letter-spacing-h6 !default;

Used by

[mixin] h6

typography-letter-spacing-h6-laptop

$typography-letter-spacing-h6-laptop: $typography-letter-spacing-h6 !default;

Used by

[mixin] h6

typography-letter-spacing-h6-desktop

$typography-letter-spacing-h6-desktop: $typography-letter-spacing-h6 !default;

Used by

[mixin] h6

typography-margin-base

$typography-margin-base: 1rem !default;

typography-margin-text

$typography-margin-text: $typography-margin-base !default;

typography-margin-text-mobile

$typography-margin-text-mobile: $typography-margin-text !default;

Used by

[mixin] body

typography-margin-text-tablet

$typography-margin-text-tablet: $typography-margin-text !default;

Used by

[mixin] body

typography-margin-text-laptop

$typography-margin-text-laptop: $typography-margin-text !default;

Used by

[mixin] body

typography-margin-text-desktop

$typography-margin-text-desktop: $typography-margin-text !default;

Used by

[mixin] body

typography-margin-hr

$typography-margin-hr: $typography-margin-base !default;

Used by

[mixin] hr

typography-margin-hr-mobile

$typography-margin-hr-mobile: $typography-margin-hr !default;

typography-margin-hr-tablet

$typography-margin-hr-tablet: $typography-margin-hr !default;

typography-margin-hr-laptop

$typography-margin-hr-laptop: $typography-margin-hr !default;

typography-margin-hr-desktop

$typography-margin-hr-desktop: $typography-margin-hr !default;

typography-margin-list

$typography-margin-list: $typography-margin-base !default;

Used by

[mixin] list

typography-margin-list-mobile

$typography-margin-list-mobile: $typography-margin-list !default;

typography-margin-list-tablet

$typography-margin-list-tablet: $typography-margin-list !default;

typography-margin-list-laptop

$typography-margin-list-laptop: $typography-margin-list !default;

typography-margin-list-desktop

$typography-margin-list-desktop: $typography-margin-list !default;

typography-margin-table

$typography-margin-table: $typography-margin-base 0 !default;

Used by

[mixin] table

typography-margin-table-mobile

$typography-margin-table-mobile: $typography-margin-table !default;

typography-margin-table-tablet

$typography-margin-table-tablet: $typography-margin-table !default;

typography-margin-table-laptop

$typography-margin-table-laptop: $typography-margin-table !default;

typography-margin-table-desktop

$typography-margin-table-desktop: $typography-margin-table !default;

typography-margin-h

$typography-margin-h: 0.5rem !default;

typography-margin-h1

$typography-margin-h1: $typography-margin-h !default;

typography-margin-h1-mobile

$typography-margin-h1-mobile: $typography-margin-h1 !default;

Used by

[mixin] h1

typography-margin-h1-tablet

$typography-margin-h1-tablet: $typography-margin-h1 !default;

Used by

[mixin] h1

typography-margin-h1-laptop

$typography-margin-h1-laptop: $typography-margin-h1 !default;

Used by

[mixin] h1

typography-margin-h1-desktop

$typography-margin-h1-desktop: $typography-margin-h1 !default;

Used by

[mixin] h1

typography-margin-h2

$typography-margin-h2: $typography-margin-h !default;

typography-margin-h2-mobile

$typography-margin-h2-mobile: $typography-margin-h2 !default;

Used by

[mixin] h2

typography-margin-h2-tablet

$typography-margin-h2-tablet: $typography-margin-h2 !default;

Used by

[mixin] h2

typography-margin-h2-laptop

$typography-margin-h2-laptop: $typography-margin-h2 !default;

Used by

[mixin] h2

typography-margin-h2-desktop

$typography-margin-h2-desktop: $typography-margin-h2 !default;

Used by

[mixin] h2

typography-margin-h3

$typography-margin-h3: $typography-margin-h !default;

typography-margin-h3-mobile

$typography-margin-h3-mobile: $typography-margin-h3 !default;

Used by

[mixin] h3

typography-margin-h3-tablet

$typography-margin-h3-tablet: $typography-margin-h3 !default;

Used by

[mixin] h3

typography-margin-h3-laptop

$typography-margin-h3-laptop: $typography-margin-h3 !default;

Used by

[mixin] h3

typography-margin-h3-desktop

$typography-margin-h3-desktop: $typography-margin-h3 !default;

Used by

[mixin] h3

typography-margin-h4

$typography-margin-h4: $typography-margin-h !default;

typography-margin-h4-mobile

$typography-margin-h4-mobile: $typography-margin-h4 !default;

Used by

[mixin] h4

typography-margin-h4-tablet

$typography-margin-h4-tablet: $typography-margin-h4 !default;

Used by

[mixin] h4

typography-margin-h4-laptop

$typography-margin-h4-laptop: $typography-margin-h4 !default;

Used by

[mixin] h4

typography-margin-h4-desktop

$typography-margin-h4-desktop: $typography-margin-h4 !default;

Used by

[mixin] h4

typography-margin-h5

$typography-margin-h5: $typography-margin-h !default;

typography-margin-h5-mobile

$typography-margin-h5-mobile: $typography-margin-h5 !default;

Used by

[mixin] h5

typography-margin-h5-tablet

$typography-margin-h5-tablet: $typography-margin-h5 !default;

Used by

[mixin] h5

typography-margin-h5-laptop

$typography-margin-h5-laptop: $typography-margin-h5 !default;

Used by

[mixin] h5

typography-margin-h5-desktop

$typography-margin-h5-desktop: $typography-margin-h5 !default;

Used by

[mixin] h5

typography-margin-h6

$typography-margin-h6: $typography-margin-h !default;

typography-margin-h6-mobile

$typography-margin-h6-mobile: $typography-margin-h6 !default;

Used by

[mixin] h6

typography-margin-h6-tablet

$typography-margin-h6-tablet: $typography-margin-h6 !default;

Used by

[mixin] h6

typography-margin-h6-laptop

$typography-margin-h6-laptop: $typography-margin-h6 !default;

Used by

[mixin] h6

typography-margin-h6-desktop

$typography-margin-h6-desktop: $typography-margin-h6 !default;

Used by

[mixin] h6

typography-margin-property-base

$typography-margin-property-base: margin-bottom !default;

typography-margin-property-text

$typography-margin-property-text: $typography-margin-property-base !default;

typography-margin-property-h

$typography-margin-property-h: $typography-margin-property-base !default;

typography-margin-property-hr

$typography-margin-property-hr: $typography-margin-property-base !default;

typography-margin-property-list

$typography-margin-property-list: $typography-margin-property-base !default;

typography-margin-property-table

$typography-margin-property-table: margin !default;

typography-margin-property-h1

$typography-margin-property-h1: $typography-margin-property-h !default;

typography-margin-property-h2

$typography-margin-property-h2: $typography-margin-property-h !default;

typography-margin-property-h3

$typography-margin-property-h3: $typography-margin-property-h !default;

typography-margin-property-h4

$typography-margin-property-h4: $typography-margin-property-h !default;

typography-margin-property-h5

$typography-margin-property-h5: $typography-margin-property-h !default;

typography-margin-property-h6

$typography-margin-property-h6: $typography-margin-property-h !default;

typography-padding-table

$typography-padding-table: $grid-margin-1 0 !default;

Used by

[mixin] table

typography-size-border

$typography-size-border: 1px !default;

typography-style-border

$typography-style-border: solid !default;

mixins

anchor

@mixin anchor($hover-to-decorate: $typography-default-hover-link) { ... }

Description

Applies anchor () styling.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$hover-to-decorate`	Whether text-decoration should be applied only on hover.	`Boolean`	`$typography-default-hover-link`

Requires

[variable] typography-color-link
[variable] typography-color-link-hover
[variable] typography-decoration-link
[variable] typography-decoration-link
[variable] typography-color-link-hover

Used by

[mixin] wysiwyg

anchor-inherit

@mixin anchor-inherit() { ... }

Description

Inherits color and text-decoration. Useful for resetting anchors ().

Parameters

None.

body

@mixin body($margin: false, $margin-properties: $typography-margin-property-text) { ... }

Description

Applies body styling to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to set for margin (if set).	`List` or `String`	`$typography-margin-property-text`

Requires

[mixin] margin
[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-margin-text-mobile
[variable] typography-margin-text-tablet
[variable] typography-margin-text-laptop
[variable] typography-margin-text-desktop
[variable] typography-font-size-text-mobile
[variable] typography-font-size-text-tablet
[variable] typography-font-size-text-laptop
[variable] typography-font-size-text-desktop
[variable] typography-line-height-text-mobile
[variable] typography-line-height-text-tablet
[variable] typography-line-height-text-laptop
[variable] typography-line-height-text-desktop
[variable] typography-letter-spacing-text-mobile
[variable] typography-letter-spacing-text-tablet
[variable] typography-letter-spacing-text-laptop
[variable] typography-letter-spacing-text-desktop
[variable] typography-font-weight-text

Used by

[mixin] list
[mixin] table
[mixin] wysiwyg

body--big

@mixin body--big() { ... }

Description

Can be used in conjunction with body to increase the font size configuration to "big". Should be applied after body mixin.

Parameters

None.

Requires

[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-font-size-text-big-mobile
[variable] typography-font-size-text-big-tablet
[variable] typography-font-size-text-big-laptop
[variable] typography-font-size-text-big-desktop
[variable] typography-line-height-text-big-mobile
[variable] typography-line-height-text-big-tablet
[variable] typography-line-height-text-big-laptop
[variable] typography-line-height-text-big-desktop
[variable] typography-letter-spacing-text-big-mobile
[variable] typography-letter-spacing-text-big-tablet
[variable] typography-letter-spacing-text-big-laptop
[variable] typography-letter-spacing-text-big-desktop

TODO's

Create standalone alternative.

body--small

@mixin body--small() { ... }

Description

Can be used in conjunction with body to increase the font size configuration to "small". Should be applied after body mixin.

Parameters

None.

Requires

[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-font-size-text-small-mobile
[variable] typography-font-size-text-small-tablet
[variable] typography-font-size-text-small-laptop
[variable] typography-font-size-text-small-desktop
[variable] typography-line-height-text-small-mobile
[variable] typography-line-height-text-small-tablet
[variable] typography-line-height-text-small-laptop
[variable] typography-line-height-text-small-desktop
[variable] typography-letter-spacing-text-small-mobile
[variable] typography-letter-spacing-text-small-tablet
[variable] typography-letter-spacing-text-small-laptop
[variable] typography-letter-spacing-text-small-desktop

TODO's

Create standalone alternative.

border

@mixin border($position: 'bottom, $color: $typography-color-border, $size: $typography-size-border, $style: $typography-style-border) { ... }

Description

Adds a border

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	Can be one of: 'all', 'top', 'right', bottom' or 'left'.	`String`	`'bottom`
`$color`	Color of the border.	`Color`	`$typography-color-border`
`$size`	Size of the border.	`String`	`$typography-size-border`
`$style`	Style of the border.	`String`	`$typography-style-border`

Used by

[mixin] hr
[mixin] table
[mixin] table

outline

@mixin outline($color: $typography-color-border, $size: $typography-size-border, $style: $typography-style-border) { ... }

Description

Adds outline to all elements (* selector on root).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	Color of the outline.	`Color`	`$typography-color-border`
`$size`	Size of the outline.	`Number`	`$typography-size-border`
`$style`	Style of the outline.	`String`	`$typography-style-border`

h1

@mixin h1($margin: false, $margin-properties: $typography-margin-property-h1) { ... }

Description

Applies h1 styling to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to set for margin (if set).	`List` or `String`	`$typography-margin-property-h1`

Requires

[mixin] margin
[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-margin-h1-mobile
[variable] typography-margin-h1-tablet
[variable] typography-margin-h1-laptop
[variable] typography-margin-h1-desktop
[variable] typography-font-size-h1-mobile
[variable] typography-font-size-h1-tablet
[variable] typography-font-size-h1-laptop
[variable] typography-font-size-h1-desktop
[variable] typography-line-height-h1-mobile
[variable] typography-line-height-h1-tablet
[variable] typography-line-height-h1-laptop
[variable] typography-line-height-h1-desktop
[variable] typography-letter-spacing-h1-mobile
[variable] typography-letter-spacing-h1-tablet
[variable] typography-letter-spacing-h1-laptop
[variable] typography-letter-spacing-h1-desktop
[variable] typography-font-weight-h1

Used by

[mixin] wysiwyg

h2

@mixin h2($margin: false, $margin-properties: $typography-margin-property-h2) { ... }

Description

Applies h2 styling to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to set for margin (if set).	`List` or `String`	`$typography-margin-property-h2`

Requires

[mixin] margin
[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-margin-h2-mobile
[variable] typography-margin-h2-tablet
[variable] typography-margin-h2-laptop
[variable] typography-margin-h2-desktop
[variable] typography-font-size-h2-mobile
[variable] typography-font-size-h2-tablet
[variable] typography-font-size-h2-laptop
[variable] typography-font-size-h2-desktop
[variable] typography-line-height-h2-mobile
[variable] typography-line-height-h2-tablet
[variable] typography-line-height-h2-laptop
[variable] typography-line-height-h2-desktop
[variable] typography-letter-spacing-h2-mobile
[variable] typography-letter-spacing-h2-tablet
[variable] typography-letter-spacing-h2-laptop
[variable] typography-letter-spacing-h2-desktop
[variable] typography-font-weight-h2

Used by

[mixin] wysiwyg

h3

@mixin h3($margin: false, $margin-properties: $typography-margin-property-h3) { ... }

Description

Applies h3 styling to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to set for margin (if set).	`List` or `String`	`$typography-margin-property-h3`

Requires

[mixin] margin
[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-margin-h3-mobile
[variable] typography-margin-h3-tablet
[variable] typography-margin-h3-laptop
[variable] typography-margin-h3-desktop
[variable] typography-font-size-h3-mobile
[variable] typography-font-size-h3-tablet
[variable] typography-font-size-h3-laptop
[variable] typography-font-size-h3-desktop
[variable] typography-line-height-h3-mobile
[variable] typography-line-height-h3-tablet
[variable] typography-line-height-h3-laptop
[variable] typography-line-height-h3-desktop
[variable] typography-letter-spacing-h3-mobile
[variable] typography-letter-spacing-h3-tablet
[variable] typography-letter-spacing-h3-laptop
[variable] typography-letter-spacing-h3-desktop
[variable] typography-font-weight-h3

Used by

[mixin] wysiwyg

h4

@mixin h4($margin: false, $margin-properties: $typography-margin-property-h4) { ... }

Description

Applies h4 styling to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to set for margin (if set).	`List` or `String`	`$typography-margin-property-h4`

Requires

[mixin] margin
[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-margin-h4-mobile
[variable] typography-margin-h4-tablet
[variable] typography-margin-h4-laptop
[variable] typography-margin-h4-desktop
[variable] typography-font-size-h4-mobile
[variable] typography-font-size-h4-tablet
[variable] typography-font-size-h4-laptop
[variable] typography-font-size-h4-desktop
[variable] typography-line-height-h4-mobile
[variable] typography-line-height-h4-tablet
[variable] typography-line-height-h4-laptop
[variable] typography-line-height-h4-desktop
[variable] typography-letter-spacing-h4-mobile
[variable] typography-letter-spacing-h4-tablet
[variable] typography-letter-spacing-h4-laptop
[variable] typography-letter-spacing-h4-desktop
[variable] typography-font-weight-h4

Used by

[mixin] wysiwyg

h5

@mixin h5($margin: false, $margin-properties: $typography-margin-property-h5) { ... }

Description

Applies h5 styling to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to set for margin (if set).	`List` or `String`	`$typography-margin-property-h5`

Requires

[mixin] margin
[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-margin-h5-mobile
[variable] typography-margin-h5-tablet
[variable] typography-margin-h5-laptop
[variable] typography-margin-h5-desktop
[variable] typography-font-size-h5-mobile
[variable] typography-font-size-h5-tablet
[variable] typography-font-size-h5-laptop
[variable] typography-font-size-h5-desktop
[variable] typography-line-height-h5-mobile
[variable] typography-line-height-h5-tablet
[variable] typography-line-height-h5-laptop
[variable] typography-line-height-h5-desktop
[variable] typography-letter-spacing-h5-mobile
[variable] typography-letter-spacing-h5-tablet
[variable] typography-letter-spacing-h5-laptop
[variable] typography-letter-spacing-h5-desktop
[variable] typography-font-weight-h5

Used by

[mixin] wysiwyg

h6

@mixin h6($margin: false, $margin-properties: $typography-margin-property-h6) { ... }

Description

Applies h6 styling to element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to set for margin (if set).	`List` or `String`	`$typography-margin-property-h6`

Requires

[mixin] margin
[mixin] responsive
[mixin] responsive
[mixin] responsive
[variable] typography-margin-h6-mobile
[variable] typography-margin-h6-tablet
[variable] typography-margin-h6-laptop
[variable] typography-margin-h6-desktop
[variable] typography-font-size-h6-mobile
[variable] typography-font-size-h6-tablet
[variable] typography-font-size-h6-laptop
[variable] typography-font-size-h6-desktop
[variable] typography-line-height-h6-mobile
[variable] typography-line-height-h6-tablet
[variable] typography-line-height-h6-laptop
[variable] typography-line-height-h6-desktop
[variable] typography-letter-spacing-h6-mobile
[variable] typography-letter-spacing-h6-tablet
[variable] typography-letter-spacing-h6-laptop
[variable] typography-letter-spacing-h6-desktop
[variable] typography-font-weight-h6

Used by

[mixin] wysiwyg

hr

@mixin hr($margin: false, $margin-properties) { ... }

Description

Adds horizontal rule.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to apply $margin to.	`List` or `String`	— none

Requires

[mixin] border
[mixin] margin
[variable] typography-margin-hr

Used by

[mixin] wysiwyg

list

@mixin list($margin: false, $margin-properties) { ... }

Description

Adds list style.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to apply $margin to.	`List` or `String`	— none

Requires

[mixin] body
[mixin] margin
[variable] typography-margin-list

Used by

[mixin] wysiwyg

margin

@mixin margin($margin: 'auto', $properties: $typography-margin-property-text, $value-mobile: $typography-margin-text, $value-tablet: null, $value-laptop: null, $value-desktop: null) { ... }

Description

Creates a margin if conditions apply (based on $margin), margin can be one of:

'auto', only applies the margin if the element is not the :last-child.
'true', always applies the margin.
'false', never applies the margin, this useful when calling this mixin from other mixins.
a number/string, any other value will result in it being used as the value for $properties, ignoring other value arguments.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`'auto'`
`$properties`	Margin property.	`String`	`$typography-margin-property-text`
`$value-mobile`	Value for mobile (ignored if set in $margin).	`String`	`$typography-margin-text`
`$value-tablet`	Value for tablet, relies on inheritance if set to null (ignored if set in $margin).	`String`	`null`
`$value-laptop`	Value for laptop, relies on inheritance if set to null (ignored if set in $margin).	`String`	`null`
`$value-desktop`	Value for desktop, relies on inheritance if set to null (ignored if set in $margin).	`String`	`null`

Requires

[mixin] responsive
[mixin] responsive
[mixin] properties

Used by

[mixin] body
[mixin] h1
[mixin] h2
[mixin] h3
[mixin] h4
[mixin] h5
[mixin] h6
[mixin] hr
[mixin] list
[mixin] table

mono

@mixin mono() { ... }

Description

Makes text monospaced.

Parameters

None.

table

@mixin table($margin: false, $margin-properties) { ... }

Description

Adds table rule.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`false`
`$margin-properties`	One or more properties to apply $margin to.	`List` or `String`	— none

Requires

[mixin] body
[mixin] margin
[mixin] border
[mixin] border
[variable] typography-margin-table
[variable] typography-padding-table

Used by

[mixin] wysiwyg

wysiwyg

@mixin wysiwyg($margin: 'auto', $not-me: null) { ... }

Description

Applies styling to children based on their tag name, this is particularly useful when dealing with uncontrolled markup (like the output from WYSIWYG editors or third party code).

Note: Styling based on tag names is typically not a good idea as it creates a strict binding between document structure and it's representation. In many cases, a better idea would be to use a class selector to apply styling (which acts independent of the tag name).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$margin`	Can be one of: 'auto', true, false, or a value.	`String` or `Boolean` or `Number`	`'auto'`
`$not-me`	An optional selector to exclude from automated styling (using a :not pseudo-class).	`String` or `Null`	`null`

Requires

[mixin] h1
[mixin] h2
[mixin] h3
[mixin] h4
[mixin] h5
[mixin] h6
[mixin] body
[mixin] anchor
[mixin] list
[mixin] hr
[mixin] table

util

css

Import util library.

Import util library. { ... }

Example

@import '~microscope-sass/lib/util';

mixins

inspect

@mixin inspect($color: #000, $size: 1px, $style: 'solid') { ... }

Description

Adds outline to all elements (* selector on root).

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	Color of the outline.	`Color`	`#000`
`$size`	Size of the outline.	`Number`	`1px`
`$style`	Style of the outline.	`String`	`'solid'`

properties

@mixin properties($properties, $value, $force: false) { ... }

Description

Applies $value to all $properties.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$properties`	One or more properties to set.	`List` or `String`	— none
`$value`	Value to set.	`Any`	— none
`$force`	Whether to use !important.	`Boolean`	`false`

Used by

[mixin] color-primary
[mixin] color-secondary
[mixin] color-background
[mixin] color-border
[mixin] color-danger
[mixin] color-info
[mixin] color-success
[mixin] color-warning
[mixin] container-margin
[mixin] container-margin
[mixin] container-margin
[mixin] container-padding
[mixin] container-padding
[mixin] container-padding
[mixin] breakout
[mixin] breakout
[mixin] columns
[mixin] omega
[mixin] rows
[mixin] responsive
[mixin] aspect-ratio
[mixin] margin

functions

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`	— none

Returns

String —

Updated string.

Author

Kitty Giraudel.

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.	`Numer`	— none

Returns

Number —

Unitless number.

Author

Kitty Giraudel.