background gradients

variables

ig-easing-gradient-steps

$ig-easing-gradient-steps: 10 !default;

Description

Number of intermediate color stops generated to achieve easing. A higher value results in better quality, but also much more generated code.

Type

Number

Used by

functions

ig-easing-gradient

@function ig-easing-gradient($type, $dir, $stop, $stops...) { ... }

Description

Generate a new easing background gradient. This function is intended to be as similar as possible to the newly proposed syntax for linear-gradient and radial-gradient which includes easing hints.

Parameters

NameDescriptionTypeDefault value
$type

Either 'linear' or 'radial', which means the gradient will be either a linear-gradient or a radial-gradient.

String—
$dir

The direction of the gradient. Depending on $type, this value must be a valid direction for linear-gradient or radial-gradient.

String—
$stop

A color stop as used for linear-gradient or radial-gradient.

Color or List—
$stops

More color stops as used for linear-gradient or radial-gradient. Between two color stops, you may also define an easing hint such as ease-in-out, cubic-bezier 0.42 0 0.58 1, steps 3 jump-end, and so on.

Arglist—

Returns

String —

A linear-gradient or radial-gradient with an alternative transitioning behavior.

Example

A smoother linear gradient

.background {
  background-image: ig-easing-gradient(
    linear,
    to top,
    #000,
    in-out-sine,
    transparent
  );
}

// Generates:

.background {
  background-image: linear-gradient(
    to top,
    black                        0%,
    rgba(0, 0, 0, 0.975528)     10%,
    rgba(0, 0, 0, 0.904508)     20%,
    rgba(0, 0, 0, 0.793893)     30%,
    rgba(0, 0, 0, 0.654508)     40%,
    rgba(0, 0, 0, 0.5)          50%,
    rgba(0, 0, 0, 0.345492)     60%,
    rgba(0, 0, 0, 0.206107)     70%,
    rgba(0, 0, 0, 0.0954915)    80%,
    rgba(0, 0, 0, 0.0244717)    90%,
    rgba(0, 0, 0, 3.78257e-11) 100%
  );
}

A smoother radial gradient

.background {
  background-image: ig-easing-gradient(
    radial,
    50em 16em at 0 0,
    #000,
    in-out-sine,
    transparent
  );
}

// Generates:

.background {
  background-image: radial-gradient(
    50em 16em at 0 0,
    black                        0%,
    rgba(0, 0, 0, 0.975528)     10%,
    rgba(0, 0, 0, 0.904508)     20%,
    rgba(0, 0, 0, 0.793893)     30%,
    rgba(0, 0, 0, 0.654508)     40%,
    rgba(0, 0, 0, 0.5)          50%,
    rgba(0, 0, 0, 0.345492)     60%,
    rgba(0, 0, 0, 0.206107)     70%,
    rgba(0, 0, 0, 0.0954915)    80%,
    rgba(0, 0, 0, 0.0244717)    90%,
    rgba(0, 0, 0, 3.78257e-11) 100%
  );
}

A smoother linear gradient with complex color positions

.background {
  background-image: ig-easing-gradient(
    linear,
    to top,
    #000 20%,
    in-out-sine,
    transparent calc(20% + 25em)
  );
}

// Generates:

.background {
  background-image: linear-gradient(
    to top,
    black                    20%,
    rgba(0, 0, 0, 0.975528)  calc(20% + (20% + 25em - 20%) * 0.1),
    rgba(0, 0, 0, 0.904508)  calc(20% + (20% + 25em - 20%) * 0.2),
    rgba(0, 0, 0, 0.793893)  calc(20% + (20% + 25em - 20%) * 0.3),
    rgba(0, 0, 0, 0.654508)  calc(20% + (20% + 25em - 20%) * 0.4),
    rgba(0, 0, 0, 0.5)       calc(20% + (20% + 25em - 20%) * 0.5),
    rgba(0, 0, 0, 0.345492)  calc(20% + (20% + 25em - 20%) * 0.6),
    rgba(0, 0, 0, 0.206107)  calc(20% + (20% + 25em - 20%) * 0.7),
    rgba(0, 0, 0, 0.0954915) calc(20% + (20% + 25em - 20%) * 0.8),
    rgba(0, 0, 0, 0.0244717) calc(20% + (20% + 25em - 20%) * 0.9),
    transparent              calc(20% + 25em))
  );
}

Throws

  • The first color stop argument must be a color stop.

  • The last color stop argument must be a color stop.

  • There can be at most one interpolation hint between to color stops.

  • Midpoint shifts are not supported.

  • Invalid gradient type: #{inspect($type)}.

Requires

Used by

Links

ig-easing-linear-gradient

@function ig-easing-linear-gradient() { ... }

Description

Alias for ig-easing-gradient('linear',...)

Parameters

None.

Requires

See

ig-easing-radial-gradient

@function ig-easing-radial-gradient() { ... }

Description

Alias for ig-easing-gradient('radial',...)

Parameters

None.

Requires

See

[private] ig-easing-gradient-ease-stops

@function ig-easing-gradient-ease-stops() { ... }

Description

Generate a smooth transition from one color stop to another using the provided easing function.

Parameters

None.

Requires

Used by

[private] ig-easing-gradient-bezier-stops

@function ig-easing-gradient-bezier-stops() { ... }

Description

Generate a smooth transition from one color stop to another using the provided cubic-bezier function.

Parameters

None.

Throws

  • Invalid color stop position: #{inspect($prev-stop-pos)}

  • Invalid color stop position: #{inspect($next-stop-pos)}

Requires

Used by

[private] ig-easing-gradient-steps-stops

@function ig-easing-gradient-steps-stops() { ... }

Description

Generate a step transition from one color stop to another.

Parameters

None.

Throws

  • Invalid $jump: #{inspect($jump)}

  • Invalid color stop position: #{inspect($prev-stop-pos)}

  • Invalid color stop position: #{inspect($next-stop-pos)}

Used by

[private] ig-easing-gradient-interpolate-stop-positions

@function ig-easing-gradient-interpolate-stop-positions() { ... }

Description

Interpolate the positions of multiple color stops between two color stops whose positions are set.

Parameters

None.

Throws

  • Invalid color stop position: #{inspect($prev-stop-pos)}

  • Invalid color stop position: #{inspect($next-stop-pos)}

Requires

Used by

[private] ig-easing-gradient-is-color-stop

@function ig-easing-gradient-is-color-stop() { ... }

Description

Check if the input is a valid color stop.

Parameters

None.

Requires

Used by

[private] ig-easing-gradient-is-positioned-color-stop

@function ig-easing-gradient-is-positioned-color-stop() { ... }

Description

Check if the input is a valid positioned color stop.

Parameters

None.

Used by

bem

mixins

ig-bem-block

@mixin ig-bem-block($name, $type: null) { ... }

Description

Generate a new block.

This mixin simply creates a new block with the name {namespace}_{name}, where {namespace} is the prefix assigned to $type and {name} is the block's name.

Parameters

NameDescriptionTypeDefault value
$name

Block name

String—
$type

BEMIT namespace of the block

Stringnull

Content

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

Example

Creating a new block

@include ig-bem-block('something', 'component') {
  /* some definitions */
}

// Generates:

.c-something {
  /* some definitions */
}

Throws

  • If $type is invalid

  • If the block is preceded by another block, element, modifier or suffix

Requires

Used by

ig-bem-object

@mixin ig-bem-object($name) { ... }

Description

Generate a new object block. It's a shorthand for ig-bem-block($name, 'object').

Parameters

NameDescriptionTypeDefault value
$name

Object block name

String—

Content

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

Requires

ig-bem-component

@mixin ig-bem-component($name) { ... }

Description

Generate a new component block. It's a shorthand for ig-bem-block($name, 'component').

Parameters

NameDescriptionTypeDefault value
$name

Component block name

String—

Content

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

Requires

ig-bem-layout

@mixin ig-bem-layout($name) { ... }

Description

Generate a new layout block. It's a shorthand for ig-bem-block($name, 'layout').

Parameters

NameDescriptionTypeDefault value
$name

Layout block name

String—

Content

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

Requires

ig-bem-utility

@mixin ig-bem-utility($name) { ... }

Description

Generate a new utility block. It's a shorthand for ig-bem-block($name, 'utility').

Parameters

NameDescriptionTypeDefault value
$name

Utility block name

String—

Content

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

Requires

ig-bem-scope

@mixin ig-bem-scope($name) { ... }

Description

Generate a new scope block. It's a shorthand for ig-bem-block($name, 'scope').

Parameters

NameDescriptionTypeDefault value
$name

Scope block name

String—

Content

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

Requires

ig-bem-theme

@mixin ig-bem-theme($name) { ... }

Description

Generate a new theme block. It's a shorthand for ig-bem-block($name, 'theme').

Parameters

NameDescriptionTypeDefault value
$name

Theme block name

String—

Content

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

Requires

ig-bem-js

@mixin ig-bem-js($name) { ... }

Description

Generate a new JS block. It's a shorthand for ig-bem-block($name, 'js').

Parameters

NameDescriptionTypeDefault value
$name

JS block name

String—

Content

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

Requires

ig-bem-qa

@mixin ig-bem-qa($name) { ... }

Description

Generate a new QA block. It's a shorthand for ig-bem-block($name, 'qa').

Parameters

NameDescriptionTypeDefault value
$name

QA block name

String—

Content

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

Requires

ig-bem-hack

@mixin ig-bem-hack($name) { ... }

Description

Generate a new hack block. It's a shorthand for ig-bem-block($name, 'hack').

Parameters

NameDescriptionTypeDefault value
$name

Hack block name

String—

Content

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

Requires

ig-bem-composed-of

@mixin ig-bem-composed-of($block, $blocks) { ... }

Description

Assert that a block or element is composed of another block. In BEM, such a relationship is referred to as a "mix": https://en.bem.info/methodology/key-concepts/#mix

Compilation will fail if the foreign block doesn't exist. This way, you can ensure that blocks are defined in the right order so that composed blocks/elements will actually override the foreign declarations without having to artificially increase the specificity.

Parameters

NameDescriptionTypeDefault value
$block

Either first block name, or list with two items: 1. block name, 2. block type

String or List—
$blocks

Either other block names, or list with two items: 1. block name, 2. block type

String or List—

Example

Successful assertion

@include ig-bem-component('someBlock') {
  /* some definitions */
}

@include ig-bem-component('anotherBlock') {
  /* some definitions */
  
  @include ig-bem-element('elem') {
    @include ig-bem-composed-of('someBlock' 'component');
    
    /* some definitions */
  }
}

// Intended use: <div class="c-anotherBlock__elem c-someBlock">...</div>

Failing assertion

@include ig-bem-component('anotherBlock') {
  /* some definitions */
  
  @include ig-bem-element('elem') {
    @include ig-bem-composed-of('someBlock' 'component');
    
    /* some definitions */
  }
}

@include ig-bem-component('someBlock') {
  /* some definitions */
}

// Compilation will fail because c-someBlock is defined after c-anotherBlock__elem

Throws

  • Block

Requires

ig-bem-element

@mixin ig-bem-element($name, $names) { ... }

Description

Generate a new BEM element.

The element will be generated according to the BEM naming convention. If the parent selector doesn't match the block selector, the element will be nested inside the parent selector. This means, you may nest elements inside other elements, modifiers or any kind of selector such as &:hover.

Parameters

NameDescriptionTypeDefault value
$name

First element name

String—
$names

More element names

String—

Content

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

Example

Element for a block

@include ig-bem-component('block') {
  /* some block definitions */
  
  @include ig-bem-element('elem') {
    /* some element definitions */
  }
}

// Generates:

.c-block {
  /* some block definitions */
}

.c-block__elem {
  /* some element definitions */
}

Element that is affected by the user hovering the block

@include ig-bem-component('block') {
  /* some block definitions */
  
  @include ig-bem-element('elem') {
    background-color: #eee;
  }
  
  &:hover {
    @include ig-bem-element('elem') {
      background-color: #000;
    }
  }
}

// Generates:

.c-block {
  /* some block definitions */
}

.c-block__elem {
  background-color: #eee;
}

.c-block:hover .c-block__elem {
  background-color: #000;
}

Multiple elements

@include ig-bem-component('block') {
  /* some block definitions */
  
  @include ig-bem-element('elem1', 'elem2') {
    /* some element definitions */
  }
}

// Generates:

.c-block {
  /* some block definitions */
}

.c-block__elem1, .c-block__elem2 {
  /* some element definitions */
}

Throws

  • If the element is not preceded by a block, element, modifier or suffix.

Requires

ig-bem-related-element

@mixin ig-bem-related-element($sign, $name, $names) { ... }

Description

Generate a BEM element that is related to the current element.

The generated element selector is appended to the current element selector. The $sign determines the relationship.

Parameters

NameDescriptionTypeDefault value
$sign

Relationshop sign, either '+' or '~'

String—
$name

First element name

String—
$names

More element names

String—

Content

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

Example

A sibling element to a single element

@include ig-bem-component('block') {
  @include ig-bem-element('elem') {
    /* some element definitions */
    
    @include ig-bem-related-element('~', 'sibling') {
      /* some sibling element definitions */
    }
  }
}

// Generates:

.c-block__elem {
  /* some element definitions */
}

.c-block__elem ~ .c-block__sibling {
  /* some sibling element definitions */
}

A successor element to a single element

@include ig-bem-component('block') {
  @include ig-bem-element('elem') {
    /* some element definitions */
    
    @include ig-bem-related-element('+', 'successor') {
      /* some successor element definitions */
    }
  }
}

// Generates:

.c-block__elem {
  /* some element definitions */
}

.c-block__elem + .c-block__successor {
  /* some successor element definitions */
}

A successor element to multiple elements

@include ig-bem-component('block') {
  @include ig-bem-element('elem1', 'elem2') {
    /* some element definitions */
    
    @include ig-bem-related-element('+', 'successor') {
      /* some successor element definitions */
    }
  }
}

// Generates:

.c-block__elem1, .c-block__elem2 {
  /* some element definitions */
}

.c-block__elem1 + .c-block__successor, .c-block__elem2 + .c-block__successor {
  /* some successor element definitions */
}

Throws

  • If the element is not preceded by an element.

Requires

Used by

ig-bem-sibling-element

@mixin ig-bem-sibling-element($name, $names) { ... }

Description

Generate a BEM element that is a sibling of the current element.

It's a shorthand for ig-bem-related-element('~', $name).

Parameters

NameDescriptionTypeDefault value
$name

First element name

String—
$names

List of more element names

List—

Content

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

Requires

ig-bem-next-element

@mixin ig-bem-next-element($name, $names) { ... }

Description

Generate a BEM element that is the successor of the current element.

It's a shorthand for ig-bem-related-element('+', $name).

Parameters

NameDescriptionTypeDefault value
$name

First element name

String—
$names

More element names

String—

Content

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

Requires

ig-bem-next-twin-element

@mixin ig-bem-next-twin-element() { ... }

Description

Generate the current BEM element as a successor of itself.

If this is applied to a single element, it behaves exactly the same as ig-bem-related-element('+', name); However, if it is applied to multiple elements, each twin element only will influence their other twin, which is not replicable with ig-bem-related-element.

Parameters

None.

Content

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

Example

Two twin elements

@include ig-bem-component('block') {
  @include ig-bem-element('elem') {
    /* some element definitions */
    
    @include ig-bem-next-twin-element {
      /* some twin element definitions */
    }
  }
}

// Generates:

.c-block__elem {
  /* some element definitions */
}

.c-block__elem + .c-block__elem {
  /* some twin element definitions */
}

Multiple twin elements

@include ig-bem-component('block') {
  @include ig-bem-element('elem1', 'elem2') {
    /* some element definitions */
    
    @include ig-bem-next-twin-element {
      /* some twin element definitions */
    }
  }
}

// Generates:

.c-block__elem1, .c-block__elem2 {
  /* some element definitions */
}

.c-block__elem1 + .c-block__elem1, .c-block__elem2 + .c-block__elem2 {
  /* some twin element definitions */
}

Requires

ig-bem-modifier

@mixin ig-bem-modifier($name, $names) { ... }

Description

Generate a new BEM modifier.

If the parent context is block or element, the modifier will modify said block or element according to the BEM naming convention.

If the parent context is a modifier or suffix, then the modifier will depend on said modifier or suffix. Depending on $extend, the meaning of this dependency (and the resulting selector) varies: If it's false (default), you signalize that the modifier also exists by itself, but it changes its behavior when the parent modifier or suffix is set. If it's true, you signalize that the modifier extends the parent modifier or suffix and can only be used in conjunction with it.

Parameters

NameDescriptionTypeDefault value
$name

First element name or list with two items: 1. first element name, 2. bool indicating if the modifier is extending

String or List—
$names

More element names or lists with two items: 1. element name, 2. bool indicating if the modifier is extending

String or List—

Content

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

Example

Modifier that modifies a block or element

@include ig-bem-component('block') {
  @include ig-bem-modifier('mod') {
    background-color: #eee;
  }
  
  @include ig-bem-element('elem') {
    @include ig-bem-modifier('mod') {
      background-color: #222;
    }
  }
}

// Generates:

.c-block--mod {
  background-color: #eee;
}

.c-block__elem--mod {
  background-color: #222;
}

Modifier nested in another modifier, not extending

@include ig-bem-component('block') {
  @include ig-bem-modifier('mod') {
    background-color: #eee;
  }
  
  @include ig-bem-modifier('dark') {
    /* some definitions */
    
    @include ig-bem-modifier('mod') {
      background-color: #222;
    }
  }
}

// Generates:

.c-block--mod {
  background-color: #eee;
}

.c-block--dark {
  /* some definitions */
}

.c-block--dark.c-block--mod {
  background-color: #222;
}

Modifier nested in another modifier, extending

@include ig-bem-component('block') {
  @include ig-bem-modifier('mod') {
    background-color: #eee;
  }
  
  @include ig-bem-modifier('dark') {
    /* some definitions */
    
    @include ig-bem-modifier('mod' true) {
      background-color: #222;
    }
  }
}

// Generates:

.c-block--mod {
  background-color: #eee;
}

.c-block--dark {
  /* some definitions */
}

.c-block--dark--mod {
  background-color: #222;
}

Throws

  • If the element is not preceded by a block, element, modifier or suffix.

Requires

ig-bem-multi

@mixin ig-bem-multi($first, $others) { ... }

Description

Generate multiple entities (BEM or not) at once.

NOTE: This mixin does not generate perfectly optimized selectors in order to keep track of contexts.

Parameters

NameDescriptionTypeDefault value
$first

First selector. Either a string for a manual selector, or a list with the first items standing for a BEM selector function (optionally suffixed by a colon) and other items being passed as arguments to said function.

String or List—
$others

Other selectors. Either a string for a manual selector, or a list with the first items standing for a BEM selector function (optionally suffixed by a colon) and other items being passed as arguments to said function.

String or List—

Content

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

Example

Creating multiple elements, a modifier and an anchor

@include ig-bem-object('buttonstrip') {
  display: none;
  
  @include ig-bem-multi('modifier' 'mod', 'element' 'button' 'separator', '> a') {
    display: block;
  }
}

// Generates:

.o-buttonstrip {
  display: none;
}

.o-buttonstrip--mod {
  display: block;
}

.o-buttonstrip__button, {
.o-buttonstrip__separator {
  display: block;
}

.o-buttonstrip > a {
  display: block;
}

Creating multiple elements, a modifier and an anchor - optional colons included

@include ig-bem-object('buttonstrip') {
  display: none;
  
  @include ig-bem-multi('modifier:' 'mod', 'element:' 'button' 'separator', '> a') {
    display: block;
  }
}

// Generates:

.o-buttonstrip {
  display: none;
}

.o-buttonstrip--mod {
  display: block;
}

.o-buttonstrip__button, {
.o-buttonstrip__separator {
  display: block;
}

.o-buttonstrip > a {
  display: block;
}

Throws

  • Function

Requires

ig-bem-state

@mixin ig-bem-state($state, $states) { ... }

Description

Create a new state rule.

Parameters

NameDescriptionTypeDefault value
$state

First state name

String—
$states

List of more state names

List—

Content

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

Example

Using single is-state

@include ig-bem-object('menu') {
  display: none;
  
  @include ig-bem-state('is', open') {
    display: block;
  }
}

// Generates:

.o-menu {
  display: none;
}

.o-menu.is-open {
  display: block;
}

Using multiple is-states

@include ig-bem-object('menu') {
  display: none;
  
  @include ig-bem-state('is', open', 'visible') {
    display: block;
  }
}

// Generates:

.o-menu {
  display: none;
}

.o-menu.is-open,
.o-menu.is-visible {
  display: block;
}

Requires

Used by

ig-bem-is

@mixin ig-bem-is() { ... }

Description

Create a new has-state modifier.

It's a shorthand for ig-bem-state('is', $state, $states...).

Parameters

None.

Content

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

Requires

ig-bem-has

@mixin ig-bem-has() { ... }

Description

Create a new has-state modifier.

It's a shorthand for ig-bem-state('has', $state, $states...).

Parameters

None.

Content

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

Requires

ig-bem-suffix

@mixin ig-bem-suffix($name) { ... }

Description

Generate a new suffix.

Parameters

NameDescriptionTypeDefault value
$name

Suffix name

String—

Content

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

Example

Using a suffix

@include ig-bem-utility('hidden') {
  display: none;
  
  @media (max-width: 320px) {
    @include ig-bem-suffix('phone') {
      display: none;
    }
  }
  
  @media (max-width: 768px) {
    @include ig-bem-suffix('tablet') {
      display: none;
    }
  }
}

// Generates:

.u-hidden {
  display: none;
}

@media (max-width: 320px) {
  .u-hidden@phone {
    display: none;
  }
}

@media (max-width: 768px) {
  .u-hidden@tablet {
    display: none;
  }
}

Throws

  • If the element is not preceded by a block or modifier.

Requires

ig-bem-at-theme

@mixin ig-bem-at-theme($name, $names) { ... }

Description

Declare new rules for the current block for when this theme is active.

Parameters

NameDescriptionTypeDefault value
$name

First theme block name

String—
$names

More theme block names

String—

Content

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

Requires

ig-bem-add-validator

@mixin ig-bem-add-validator($func-name, $func-names) { ... }

Description

Register one or multiple validator functions.

A validator function is a function that accepts 4 arguments:

  1. BEM entity type (string)
  2. Arguments passed to the mixin (map)
  3. The generated selector (selector)
  4. The generated context (list, may be null)

The function must return a list with two items:

  1. true if the mixin usage is valid, otherwise false,
  2. a string with a rejection reason (empty if the usage is valid).

Parameters

NameDescriptionTypeDefault value
$func-name

First function name.

String—
$func-names

Other function names.

String—

Requires

ig-bem-remove-validator

@mixin ig-bem-remove-validator($func-name, $func-names) { ... }

Description

Unregister one or multiple validator functions.

Parameters

NameDescriptionTypeDefault value
$func-name

First function name.

String—
$func-names

Other function names.

String—

Requires

[private] ig-bem-validate

@mixin ig-bem-validate() { ... }

Parameters

None.

Throws

  • A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}

Requires

Used by

functions

ig-bem-block

@function ig-bem-block() { ... }

Description

Generate a new block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

Used by

See

ig-bem-object

@function ig-bem-object() { ... }

Description

Generate a new object block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-component

@function ig-bem-component() { ... }

Description

Generate a new component block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-layout

@function ig-bem-layout() { ... }

Description

Generate a new layout block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-utility

@function ig-bem-utility() { ... }

Description

Generate a new utility block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-scope

@function ig-bem-scope() { ... }

Description

Generate a new scope block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-theme

@function ig-bem-theme() { ... }

Description

Generate a new theme block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-js

@function ig-bem-js() { ... }

Description

Generate a new JS block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-qa

@function ig-bem-qa() { ... }

Description

Generate a new QA block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-hack

@function ig-bem-hack() { ... }

Description

Generate a new hack block. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-element

@function ig-bem-element() { ... }

Description

Generate a new BEM element. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Throws

  • Element nesting is forbidden.

  • A nested element must be an immediate children of the parent element.

Requires

Used by

See

ig-bem-related-element

@function ig-bem-related-element() { ... }

Description

Generate a new BEM element that is related to the current element. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Throws

  • Invalid relationship sign #{inspect($sign)}.

Requires

Used by

See

ig-bem-sibling-element

@function ig-bem-sibling-element() { ... }

Description

Generate a new BEM element that is a sibling of the current element. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-next-element

@function ig-bem-next-element() { ... }

Description

Generate a new BEM element that is the successor of the current element. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-next-twin-element

@function ig-bem-next-twin-element() { ... }

Description

Generate the current BEM element as a successor of itself. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Throws

  • Could not generate twin element selector.

Requires

Used by

See

[private] ig-bem-theme-selector

@function ig-bem-theme-selector() { ... }

Parameters

None.

Requires

Used by

ig-bem-modifier

@function ig-bem-modifier() { ... }

Description

Generate a new BEM modifier. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Throws

  • A modifier must be an immediate child of the parent context

  • Could not generate modifier selector.

Requires

Used by

See

ig-bem-state

@function ig-bem-state() { ... }

Description

Generate a new state.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Used by

See

ig-bem-is

@function ig-bem-is() { ... }

Description

Generate a new is-state modifier. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-has

@function ig-bem-has() { ... }

Description

Generate a new has-state modifier. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Requires

See

ig-bem-suffix

@function ig-bem-suffix() { ... }

Description

Generate a new suffix. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Throws

  • A suffix must be an immediate child of the parent context

Requires

Used by

See

ig-bem-at-theme

@function ig-bem-at-theme() { ... }

Description

Declare new rules for the current block for when this theme is active. Check the respective mixin documentation for more information.

Parameters

None.

Returns

List —

A list with two items: 1. selector, 2. context or null

Throws

  • An at-theme rule must be an immediate child of a block

Requires

Used by

See

ig-bem-add-validator

@function ig-bem-add-validator() { ... }

Description

Register one or multiple validator functions. Check the respective mixin documentation for more information.

Parameters

None.

Requires

Used by

See

ig-bem-remove-validator

@function ig-bem-remove-validator() { ... }

Description

Unregister one or multiple validator functions. Check the respective mixin documentation for more information.

Parameters

None.

Requires

Used by

See

ig-bem-validator--enforce-namespace-order

@function ig-bem-validator--enforce-namespace-order() { ... }

Description

A validator that makes sure blocks are declared in the right order, determined by the namespace used.

Parameters

None.

Requires

ig-bem-validator--immutable-entities

@function ig-bem-validator--immutable-entities() { ... }

Description

A validator that makes all BEM entities immutable.

Parameters

None.

Requires

variables

[private] ig-bem-validators

$ig-bem-validators: ();

Description

A list of validator functions.

Type

List

Used by

ig-bem-element-separator

$ig-bem-element-separator: '__' !default;

Description

Separating character sequence for elements.

Type

String

Used by

ig-bem-modifier-separator

$ig-bem-modifier-separator: '--' !default;

Description

Separating character sequence for modifiers.

Type

String

Used by

ig-bem-suffix-separator

$ig-bem-suffix-separator: '\\@' !default;

Description

Separating character sequence for BEMIT suffixes.

Type

String

Used by

ig-bem-namespaces

$ig-bem-namespaces: (
    object:    'o',
    component: 'c',
    layout:    'l',
    scope:     's',
    theme:     't',
    utility:   'u',
    js:        'js',
    qa:        'qa',
    hack:      '_'
) !default;

Description

Prefixes for all BEMIT namespaces.

Type

Map

Map structure

NameDescriptionTypeValue
utility

Utility namespace

String'u'
object

Object namespace

String'o'
component

Component namespace

String'c'
layout

Layout namespace

String'l'
scope

Scope namespace

String's'
theme

Theme namespace

String't'
js

JS namespace

String'js'
qa

QA namespace

String'qa'
hack

Hack namespace

String'_'

Used by

[private] ig-bem-blocks

$ig-bem-blocks: ();

Description

A list of all generated blocks.

Type

List

Used by

ig-bem-max-depth

$ig-bem-max-depth: 99 !default;

Description

Maximum nesting depth of BEM mixins. The large default value means there is no effective limit.

Type

Number

Used by

ig-bem-element-nesting-policy

$ig-bem-element-nesting-policy: 'allow' !default;

Description

Indicates how nested elements should be handled.

'allow' means elements will be nested, i.e. the result will be {e} {b}element. 'disallow' means an error will be emitted. 'append' means the element name will be appended to the parent element, i.e. the result will be {e}element. Any other value is treated as 'allow'.

Type

String

Used by

ig-bem-context-id

$ig-bem-context-id: 'bem' !default;

Description

Context ID used for all BEM-related mixins.

Type

String

Used by

ig-bem-debug

$ig-bem-debug: false !default;

Description

Debug mode.

Type

Bool

ig-bem-debug-colors

$ig-bem-debug-colors: (
    object:    #ffa500,
    component: #00f,
    layout:    #ff0,
    utility:   #008000,
    hack:      #f00
) !default;

Description

Colors assigned to namespaces.

Type

Map

contexts

variables

[private] ig-context-stacks

$ig-context-stacks: ();

Description

Map of all context stacks.

Type

Map

Used by

mixins

ig-context-stack-create

@mixin ig-context-stack-create($stack-id) { ... }

Description

Create a new context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack

String—

Throws

  • If context stack already exists

Requires

ig-context-stack-clear

@mixin ig-context-stack-clear($stack-id) { ... }

Description

Clear a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack

String—

Requires

ig-context-stack-delete

@mixin ig-context-stack-delete($stack-id) { ... }

Description

Delete a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack

String—

Requires

ig-context-push

@mixin ig-context-push($stack-id, $id, $data: ()) { ... }

Description

Push a new context to a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—
$id

ID of new context

String—
$data

Data that belongs to the context

Any()

Requires

Used by

ig-context-pop

@mixin ig-context-pop($stack-id) { ... }

Description

Pop the latest context from a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—

Throws

  • If context stack doesn't exist

Requires

Used by

ig-context-assert-stack-must-contain

@mixin ig-context-assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) { ... }

Description

Assert that a context stack must contain one of the given context IDs.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—
$context-ids

Context IDs

List—
$check-head-only

If false, all items will be checked. If true, only the head will be checked.

Boolfalse

Throws

  • Must be called inside of contexts

Requires

ig-context-assert-stack-must-not-contain

@mixin ig-context-assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) { ... }

Description

Assert that a context stack must not contain any of the given context IDs.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—
$context-ids

Context IDs

List—
$check-head-only

If false, all items will be checked. If true, only the head will be checked.

Boolfalse

Throws

  • Must not be called inside of contexts

Requires

ig-context-assert-stack-count

@mixin ig-context-assert-stack-count($stack-id, $max-count) { ... }

Description

Assert that a context stack must contain a number of contexts smaller than $max-count.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—
$max-count

Maximum number ofg contexts in context stack

Number—

Throws

  • Maximum context count

Requires

Used by

functions

ig-context-stack-create

@function ig-context-stack-create($stack-id) { ... }

Description

Create a new context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack

String—

Throws

  • Context stack

Requires

Used by

ig-context-stack-clear

@function ig-context-stack-clear($stack-id) { ... }

Description

Clear a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack

String—

Throws

  • Context stack

Requires

Used by

ig-context-stack-delete

@function ig-context-stack-delete($stack-id) { ... }

Description

Delete a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack

String—

Throws

  • Context stack

Requires

Used by

ig-context-push

@function ig-context-push($stack-id, $id, $data: ()) { ... }

Description

Push a new context to a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—
$id

ID of new context

String—
$data

Data that belongs to the context

Any()

Returns

List —

A list with two items: 1 = context id, 2 = context data

Throws

  • Context stack

Requires

Used by

ig-context-pop

@function ig-context-pop($stack-id) { ... }

Description

Pop the latest context from a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—

Returns

List —

A list with two items: 1 = context id, 2 = context data

Throws

  • Context stack

Requires

Used by

ig-context-stack-contains

@function ig-context-stack-contains($stack-id, $context-ids, $check-head-only: false) { ... }

Description

Check if a context stack contains one of the given context IDs.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—
$context-ids

Context IDs

List—
$check-head-only

If false, all items will be checked. If true, only the head will be checked.

Boolfalse

Returns

Bool —

true if the context stack contains one of the context IDs, otherwise false

Throws

  • Context stack

Requires

Used by

ig-context-stack-count

@function ig-context-stack-count($stack-id) { ... }

Description

Get the number of contexts from a context stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—

Returns

Number —

The number of contexts

Throws

  • Context stack

Requires

Used by

ig-context-get

@function ig-context-get($stack-id, $type-or-level) { ... }

Description

Get a specific context from the stack.

Parameters

NameDescriptionTypeDefault value
$stack-id

ID of context stack to use

String—
$type-or-level

If this is a number (!= 0), the nth context from the head will be returned. If it is a string, the first context with a matching ID will be returned. If it is a list, the first context that matches one of the IDs in the list will be returned.

Number or String or List—

Returns

List —

Null if no match was found, otherwise a list with two items: 1. context ID, 2. context data.

Throws

  • Context stack

Requires

Used by

easing

variables

[private] ig-cubic-bezier-sample-pool

$ig-cubic-bezier-sample-pool: ();

Used by

ig-cubic-bezier-sample-pool-size

$ig-cubic-bezier-sample-pool-size: 10 !default;

Description

Sample pool size for cubic bezier calculations.

Used by

ig-cubic-bezier-newton-min-slope

$ig-cubic-bezier-newton-min-slope: 0.001 !default;

Description

Minimum slope required to use the Newton-Raphson method for cubic bezier calculations.

Used by

ig-cubic-bezier-newton-iters

$ig-cubic-bezier-newton-iters: 4 !default;

Description

Number of iterations of the Newton-Raphson method.

Used by

ig-cubic-bezier-subdiv-precision

$ig-cubic-bezier-subdiv-precision: 0.0000001 !default;

Description

Precision of the subdivision method for cubic bezier calculations.

Used by

ig-cubic-bezier-subdiv-max-iters

$ig-cubic-bezier-subdiv-max-iters: 10 !default;

Description

Maximum iterations of the subdivision method for cubic bezier calculations.

Used by

functions

ig-cubic-bezier

@function ig-cubic-bezier($x1, $y1, $x2, $y2, $x) { ... }

Description

A cubic bezier function identical to the CSS cubic-bezier function.

Parameters

NameDescriptionTypeDefault value
$x1

X of first point

Number—
$y1

Y of first point

Number—
$x2

X of second point

Number—
$y2

Y of second point

Number—
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

Used by

[private] ig-cubic-bezier-func-a

@function ig-cubic-bezier-func-a() { ... }

Parameters

None.

Used by

[private] ig-cubic-bezier-func-b

@function ig-cubic-bezier-func-b() { ... }

Parameters

None.

Used by

[private] ig-cubic-bezier-func-c

@function ig-cubic-bezier-func-c() { ... }

Parameters

None.

Used by

[private] ig-cubic-bezier-func

@function ig-cubic-bezier-func() { ... }

Description

One-dimensional cubic bezier function.

Parameters

None.

Requires

Used by

[private] ig-cubic-bezier-func-slope

@function ig-cubic-bezier-func-slope() { ... }

Description

Derivative of the one-dimensional cubic bezier function.

Parameters

None.

Requires

Used by

[private] ig-cubic-bezier-newton-raphson

@function ig-cubic-bezier-newton-raphson() { ... }

Description

Newton-Raphson method to calculate the t parameter for a given x parameter.

Parameters

None.

Requires

Used by

[private] ig-cubic-bezier-binary-subdivide

@function ig-cubic-bezier-binary-subdivide() { ... }

Description

Subdivision method to calculate the t parameter for a given x parameter.

Parameters

None.

Requires

Used by

[private] ig-cubic-bezier-t-for-x

@function ig-cubic-bezier-t-for-x() { ... }

Description

Calculate the t parameter for a given x parameter.

Parameters

None.

Requires

Used by

ig-ease

@function ig-ease($x) { ... }

Description

Sinusoidal easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in

@function ig-ease-in($x) { ... }

Description

Sinusoidal easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out

@function ig-ease-out($x) { ... }

Description

Sinusoidal easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out

@function ig-ease-in-out($x) { ... }

Description

Sinusoidal easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-sine

@function ig-ease-in-sine($x) { ... }

Description

Sinusoidal easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out-sine

@function ig-ease-out-sine($x) { ... }

Description

Sinusoidal easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out-sine

@function ig-ease-in-out-sine($x) { ... }

Description

Sinusoidal easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-quad

@function ig-ease-in-quad($x) { ... }

Description

Quadratic easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out-quad

@function ig-ease-out-quad($x) { ... }

Description

Quadratic easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out-quad

@function ig-ease-in-out-quad($x) { ... }

Description

Quadratic easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-cubic

@function ig-ease-in-cubic($x) { ... }

Description

Cubic easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out-cubic

@function ig-ease-out-cubic($x) { ... }

Description

Cubic easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out-cubic

@function ig-ease-in-out-cubic($x) { ... }

Description

Cubic easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-quart

@function ig-ease-in-quart($x) { ... }

Description

Quart easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out-quart

@function ig-ease-out-quart($x) { ... }

Description

Quart easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out-quart

@function ig-ease-in-out-quart($x) { ... }

Description

Quart easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-quint

@function ig-ease-in-quint($x) { ... }

Description

Quint easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out-quint

@function ig-ease-out-quint($x) { ... }

Description

Quint easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out-quint

@function ig-ease-in-out-quint($x) { ... }

Description

Quint easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-expo

@function ig-ease-in-expo($x) { ... }

Description

Exponential easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out-expo

@function ig-ease-out-expo($x) { ... }

Description

Exponential easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out-expo

@function ig-ease-in-out-expo($x) { ... }

Description

Exponential easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-circ

@function ig-ease-in-circ($x) { ... }

Description

Circular easing function (in direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-out-circ

@function ig-ease-out-circ($x) { ... }

Description

Circular easing function (out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

ig-ease-in-out-circ

@function ig-ease-in-out-circ($x) { ... }

Description

Circular easing function (in-out direction).

Parameters

NameDescriptionTypeDefault value
$x

Progress between 0 and 1 inclusive

Number—

Returns

Number

Requires

functions

functions

ig-str-replace

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

Description

Replace a substring with a new string.

Parameters

NameDescriptionTypeDefault value
$string

String to search

String—
$search

Substring that gets replaced

String—
$replace

String that replaces $search

String—

Returns

String —

A string with all instances of $search replaced with $replace

ig-str-implode

@function ig-str-implode($list, $glue) { ... }

Description

Concatenate all items from $list.

Parameters

NameDescriptionTypeDefault value
$list—List—
$glue

Delimiter

Number—

Returns

String

Used by

ig-list-slice

@function ig-list-slice($list, $start: 1, $end: length($list)) { ... }

Description

Extract a subset from the given list.

Parameters

NameDescriptionTypeDefault value
$list—List—
$start

Indices before this value will be discarded

Number1
$end

Indices starting after this value will be discarded

Numberlength($list)

Returns

List —

A slice of the list

Used by

ig-list-prepend

@function ig-list-prepend($list, $value) { ... }

Description

Add a new item to the beginning of a list.

Parameters

NameDescriptionTypeDefault value
$list—List—
$value—Number—

Returns

List —

A list with $value at the beginning, followed by the other items

Used by

ig-quicksort

@function ig-quicksort($l) { ... }

Description

Sort numeric items in a list.

The implementation is based on the algorithm on the German Wikipedia article about quicksort: https://de.wikipedia.org/wiki/Quicksort#Pseudocode

Parameters

NameDescriptionTypeDefault value
$l—List—

Returns

List —

Sorted list

Requires

Used by

[private] ig-quicksort-partition

@function ig-quicksort-partition() { ... }

Parameters

None.

Used by

ig-map-get-default

@function ig-map-get-default($map, $key, $default) { ... }

Description

Try to get the value for the given key from the given map. If it doesn't contain that key, return the provided default value instead.

Parameters

NameDescriptionTypeDefault value
$map—Map—
$key—String—
$default—Any—

Returns

Any —

Either the value assigned to $key or $default

ig-map-get-deep

@function ig-map-get-deep($map, $key, $default: null) { ... }

Description

Get the value for a map within a map (or deeper).

Parameters

NameDescriptionTypeDefault value
$map—Map—
$key—String or List—
$default—Anynull

Returns

Any —

Either the value assigned to $key or $default

Used by

ig-map-merge-recursive

@function ig-map-merge-recursive($map1, $map2) { ... }

Description

Merge two maps recursively.

Parameters

NameDescriptionTypeDefault value
$map1—Map—
$map2—Map—

Returns

Map —

The result of a recursive merge of $map1 and $map2

Throws

  • Two maps expected.

Used by

ig-map-print

@function ig-map-print($map) { ... }

Description

Get the contents of a map as a user-friendly string representation.

Parameters

NameDescriptionTypeDefault value
$map—Map—

Returns

String

Requires

Used by

ig-selector-nest-fix

@function ig-selector-nest-fix($selector) { ... }

Description

A bugfix for the built-in selector-nest function.

For some reason, Sass will duplicate parts of the selector which will result in excessively long selectors and bad compilation performance. This fix removes all duplicate selectors and should be called right after selector-nest.

Issue was reported: https://github.com/sass/libsass/issues/2640

Parameters

NameDescriptionTypeDefault value
$selector

Selector modified with selector-nest

Selector—

Returns

Selector —

Selector without duplicates

Used by

ig-selector-suffix-match

@function ig-selector-suffix-match($selector, $suffixes) { ... }

Description

Check if the given selector ends with one of the provided suffixes.

Parameters

NameDescriptionTypeDefault value
$selector—Selector—
$suffixes—Selector—

Returns

Bool —

true if the selector matches at least one suffix, otherwise false.

Used by

ig-strip-unit

@function ig-strip-unit($n) { ... }

Description

Remove the unit from any variable.

Parameters

NameDescriptionTypeDefault value
$n—Any—

Returns

Number —

Unit-less variable

Used by

ig-px-to-rem

@function ig-px-to-rem($size, $base: $ig-root-size) { ... }

Description

Convert a pixel value to a rem value.

Parameters

NameDescriptionTypeDefault value
$size

Pixel value to convert

Number—
$base

Reference base font size used for conversion

Number$ig-root-size

Returns

Number —

Pixel value converted to rem

Used by

mixins

ig-execute

@mixin ig-execute() { ... }

Description

A mixin with the sole purpose of letting you use temporary variables without polluting the global namespace.

Parameters

None.

Content

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

global variables

variables

ig-root-size

$ig-root-size: 16px !default;

Description

Reference root font size in px that is used for px -> rem conversions.

Type

Number

harmony

functions

ig-harmony-modular-scale

@function ig-harmony-modular-scale($times, $base, $ratio) { ... }

Description

Adjust a value to a modular scale.

For a more sophisticated solution, check out modularscale-sass.

Parameters

NameDescriptionTypeDefault value
$times

Number of iterations. If positive, $base will be multiplied with $ratio. If negative, $base will be divided by $ratio.

Number—
$base

Single base value or, for a multi-stranded modular scale, a list of base values

Number or List—
$ratio

Ratio

Number—

Returns

Number

Requires

Used by

Links

mixins

ig-fluid-modular-scale

@mixin ig-fluid-modular-scale($props, $times, $fluid-map) { ... }

Description

Combine fluid properties with modular scales to achieve fluid modular scales.

Parameters

NameDescriptionTypeDefault value
$props

Property or list of properties to set

String or List—
$times

Number of iterations. See ig-harmony-modular-scale for more information.

Number—
$fluid-map

A map with keys = viewports and values = modular scales

Number—

Example

Responsive font sizes between 2 viewports based on modular scales

$ms: (
  320px: (1rem 2rem, 1.1),
  640px: (1rem 2rem, 1.2)
);

h1 {
  @include ig-fluid-modular-scale(font-size, 3, $ms);
}

h2 {
  @include ig-fluid-modular-scale(font-size, 2, $ms);
}

h3 {
  @include ig-fluid-modular-scale(font-size, 1, $ms);
}

Requires

See

math functions

functions

ig-math-pow

@function ig-math-pow($base, $exp) { ... }

Description

Perform exponentiation. Only integer exponents are supported.

Parameters

NameDescriptionTypeDefault value
$base—Number—
$exp—Number—

Returns

Number

Example

Exponentiation with a positive exponent

$result: ig-math-pow(3, 2); // The value of $result is 3^2 = 9

Exponentiation with a negative exponent

$result: ig-math-pow(2, -3); // The value of $result is 1/(2^3) = 1/8

Used by

ig-math-clamp

@function ig-math-clamp($value, $min, $max) { ... }

Description

Clamp a number between a minimum and maximum value.

Parameters

NameDescriptionTypeDefault value
$value

Value to clamp

Number—
$min

Minimum value

Number—
$max

Maximum value

Number—

Returns

Number

Example

$result: ig-math-clamp(20, 0, 10); // The value of $result is 10
$result: ig-math-clamp(50, 20, 100); // The value of $result is 50

property trees

variables

ig-props-enforce-double-dashes

$ig-props-enforce-double-dashes: true !default;

Description

Indicate if property names must start with two dashes (--). This is required if property trees are also used for native CSS custom properties.

Type

Bool

Used by

ig-props-default-tree

$ig-props-default-tree: 'default' !default;

Description

Default tree name to use if no name is specified.

Type

String

[private] ig-props-trees

$ig-props-trees: ();

Description

List of all created property trees.

Type

List

Used by

mixins

ig-props-save

@mixin ig-props-save($map, $tree: $ig-props-default-tree, $merge: false) { ... }

Description

Save a property tree. If a tree with the sane name already exists, the trees will be merged.

Parameters

NameDescriptionTypeDefault value
$map

Map containing properties

Map—
$tree

ID the map is saved as

String$ig-props-default-tree
$merge

If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.

Boolfalse

Requires

ig-props-delete

@mixin ig-props-delete($tree: $ig-props-default-tree) { ... }

Description

Delete a property tree.

Parameters

NameDescriptionTypeDefault value
$tree

ID of the tree to be deleted

String$ig-props-default-tree

Requires

ig-props-assign-native

@mixin ig-props-assign-native($root: null, $tree: $ig-props-default-tree) { ... }

Description

Generate assignments for native CSS custom properties with the values from the specified tree.

Parameters

NameDescriptionTypeDefault value
$root

Sub-tree to use for assignment

Stringnull
$tree

ID of the property tree to use

String$ig-props-default-tree

Requires

[private] ig-props-assign-native-internal

@mixin ig-props-assign-native-internal() { ... }

Parameters

None.

Used by

functions

ig-props-save

@function ig-props-save($map, $tree: $ig-props-default-tree, $merge: false) { ... }

Description

Save a property tree. If a tree with the sane name already exists, the trees will be merged.

Parameters

NameDescriptionTypeDefault value
$map

Map containing properties

Map—
$tree

ID the map is saved as

String$ig-props-default-tree
$merge

If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.

Boolfalse

Throws

  • Property tree keys must start with two dashes (--). If you don\

  • Property tree #{inspect($tree)} does already exist.

Requires

Used by

ig-props-delete

@function ig-props-delete($tree: $ig-props-default-tree) { ... }

Description

Unset a property tree.

Parameters

NameDescriptionTypeDefault value
$tree

ID of the tree to be deleted

String$ig-props-default-tree

Throws

  • Property tree

Requires

Used by

ig-props-get-all

@function ig-props-get-all($tree: $ig-props-default-tree) { ... }

Description

Get an entire property tree.

Parameters

NameDescriptionTypeDefault value
$tree

ID of the property tree

String$ig-props-default-tree

Returns

Map

Throws

  • Unknown tree

Requires

Used by

ig-props-get

@function ig-props-get($key, $tree: $ig-props-default-tree, $default: null) { ... }

Description

Read a value from a property tree.

Parameters

NameDescriptionTypeDefault value
$key

Key of the property to read. If this is a list of keys, the map will be traversed in that order.

String or List—
$tree

ID of the property tree to use

String$ig-props-default-tree
$default

Default value to return of no match was found. If null, this function will throw an error instead.

Anynull

Returns

Any —

Value assigned to property or $default

Throws

  • If there was no match for $key and $default is null

Requires

Used by

ig-props-get-native

@function ig-props-get-native($key, $default: null) { ... }

Description

Generate a var() function call to get native CSS custom property.

Parameters

NameDescriptionTypeDefault value
$key

Key of the property to read. If this is a list of keys, the map will be traversed in that order.

String or List—
$default

Default value to return of no match was found.

Anynull

Returns

String —

var()

[private] ig-props-validate

@function ig-props-validate() { ... }

Description

Validate property names.

Parameters

None.

Used by

responsive

variables

ig-fluid-support-named-viewports

$ig-fluid-support-named-viewports: true !default;

Description

If true, named viewports will be supported if a compatible $breakpoints map exists. This is the case for include-media, for example.

Type

Bool

Used by

mixins

ig-fluid-property

@mixin ig-fluid-property($props, $fluid-map) { ... }

Description

Scale a property uniformly between a specific set of target viewports / values.

Parameters

NameDescriptionTypeDefault value
$props

Property or list of properties to set

String or List—
$fluid-map

A map with keys = viewports and values = target value

Number—

Example

Responsive font-size between 2 viewports

.something {
  @include ig-fluid-property(font-size, ( 320px: 20px, 720px: 30px ));
}

// Generates:

@media (min-width: 320px) and (max-width: 720px) {
  .something {
    font-size: calc(20px + 10 * ((100vw - 20px) / 400));
  }
}

@media (max-width: 320px) {
  .something {
    font-size: 20px;
  }
}

@media (min-width: 720px) {
  .something {
    font-size: 30px;
  }
}

Responsive font-size between 3 viewports

.something {
  @include ig-fluid-property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px ));
}

// Generates:

@media (min-width: 320px) and (max-width: 720px) {
  .something {
    font-size: calc(20px + 10 * ((100vw - 20px) / 400));
  }
}

@media (min-width: 720px) and (max-width: 1280px) {
  .something {
    font-size: calc(30px + 10 * ((100vw - 30px) / 400));
  }
}

@media (max-width: 320px) {
  .something {
    font-size: 20px;
  }
}

@media (min-width: 720px) {
  .something {
    font-size: 30px;
  }
}

Throws

  • $fluid-map must contain at least two viewports.

  • $fluid-map contains invalid viewports.

Requires

Used by

functions

[private] ig-fluid-property-calc

@function ig-fluid-property-calc($min-value, $max-value, $min-width, $max-width) { ... }

Description

Generate the calc() function that uniformly scales a value from $min-value to $max-value depending on the viewport width.

Parameters

NameDescriptionTypeDefault value
$min-value

Minimum value

Number—
$max-value

Maximum value

Number—
$min-width

Minimum viewport width

Number—
$max-width

Maximum viewport width

Number—

Throws

  • Units of $min-value and $max-value, $min-width and $max-width must match.

  • This combination of units is not supported.

Requires

Used by