Ungrouped

csss

.u-h--full

@css .u-h--full() { ... }

.invisible

@css .invisible() { ... }

/// // CSS declarations for .block /// @include element('element')

@css ///      // CSS declarations for .block
///      @include element('element')() { ... }

mixins

min-max-media-query

@mixin min-max-media-query() { ... }

Description

Mixins

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

scrollbars

@mixin scrollbars($size, $foreground-color, $background-color: mix($primary, white, 75%)) { ... }

Description

Mixin to customize scrollbars Beware, this does not work in all browsers

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

Horizontal scrollbar's height and vertical scrollbar's width

Lengthnone
$foreground-color

Scrollbar's color

Colornone
$background-color

Scrollbar's color

Colormix($primary, white, 75%)

Example

Scrollbar styling

@include scrollbars(.5em, slategray);

centerer

@mixin centerer($horizontal, $vertical) { ... }

Description

Centerer mixin to center object on screen.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$horizontal

Align horizontal

Booleannone
$vertical

Align vertical

Booleannone

clearfix

@mixin clearfix() { ... }

Description

Clearfix

Parameters

None.

box-shadow

@mixin box-shadow() { ... }

Description

Box Shadows

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

linear-gradient

@mixin linear-gradient() { ... }

Description

Linear-gradient

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

directional-gradient

@mixin directional-gradient() { ... }

Description

Linear-gradient

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

transform

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

Description

Transform mixen

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$transform

The transform to apply

Stringnone

transition

@mixin transition() { ... }

Description

transition

Parameters

None.

Example

Using box-shadow

@include transition(ease, .5s);

transition-property

@mixin transition-property() { ... }

Description

transition-property

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

transition-duration

@mixin transition-duration() { ... }

Description

transition-duration

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

transition-timing-function

@mixin transition-timing-function() { ... }

Description

transition-timing-function

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

animation-name

@mixin animation-name() { ... }

Description

animation-name

Parameters

None.

Example

Using box-shadow

@include animation-name('test');

animation-duration

@mixin animation-duration() { ... }

Description

animation-duration

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

animation-direction

@mixin animation-direction() { ... }

Description

animation-direction

Parameters

None.

Example

Using box-shadow

@include box-shadow(#000);

b

@mixin b() { ... }

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Used by

e

@mixin e() { ... }

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

Used by

m

@mixin m() { ... }

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

Used by

modifier

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

Description

Block Modifier

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$modifier

Modifier's name

Stringnone

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include modifier('modifier') {
   // CSS declarations for .block--modifier
   @include element('element') {
      // CSS declarations for .block--modifier__element
   }
}

Requires

  • [mixin] m

element

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

Description

Block Element

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$element

Element's name

Stringnone

Content

This mixin allows extra content to be passed (through the @content directive).

Example

 .block {
   // CSS declarations for .block
   @include element('element') {
        //CSS declarations for .block__element
   }

   @include modifier('modifier') {
       // CSS declarations for .block--modifier

       @include element('element') {
           // CSS declarations for .block--modifier__element
       }
   }
}

Requires

  • [mixin] e

block

@mixin block() { ... }

Description

// CSS declarations for .block @include element('element') { //CSS declarations for .block__element }

@include modifier('modifier') { // CSS declarations for .block--modifier

   @include element('element') {
       // CSS declarations for .block--modifier__element
   }

} }

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

  • [mixin] b

c

@mixin c() { ... }

Description

Content block - add ::content to selector

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

variables

displays

$displays: none, block, inline-block, inline, flex;

Description

Display

elementSeparator

$elementSeparator: '__';

Used by

  • [mixin] e

modifierSeparator

$modifierSeparator: '--';

Used by

inuit-widths-columns-responsive

$inuit-widths-columns-responsive: ( 1, 2, 3, 4, 6, 7, 8 );

Description

Trumps

functions

containsModifier

@function containsModifier() { ... }

Parameters

None.

Requires

Used by

  • [mixin] e

selectorToString

@function selectorToString() { ... }

Parameters

None.

Used by

getBlock

@function getBlock() { ... }

Parameters

None.

Requires

Used by

  • [mixin] e