positioning.md

_positioning.scss

File includes function and mixins which help with positioning different type of elements

List of content:

• Mixin size (bootstrap 4.0.0)
• Mixin clearfix (bootstrap 4.0.0)
• Mixin z-index
• Mixin pseudo
• Mixin absolute
• Mixin fixed
• Mixin relative
• Mixin sticky

Default variables

Default variables declared in file to be used in mixins.

$z-indexes: (
  'modal',
  'header',
  'body',
  'footer'
) !default;

Mixin size

Description

Bootstrap helper which helps setting width and height of element

Parameters

• $width - variable describing width (required)
• $height - variable describing height (default $width)

Mixin clearfix

Description

Bootstrap helper. Applicable to parent class if children elements use float property. If you don't use this, the container won't get any height

Mixin z-index

Description

Mixin which sets z-index value appropriate to name's position in $z-indexes.
Thanks to this solution the order has been preserved for every item.
If $z-indexes doesn't contain given name there will be displayed error with appropriate information

Parameters

• $name - string with name which should be included in $z-indexes (required)

Usage:

Assigned appropriate z-index for header

.exampleZClass {
    @include z-index('header');
}

Mixin pseudo

Description

Mixin which helps with positioning pseudo elements with content, display and position properties.

Parameters

• $display - variable which will be used as a value for display (default block)
• $content - variable which will be used as a value for content (default empty string)

Usage:

Assigned element with inline display and default content

.examplePseudoClass {
   &:before {
       @include pseudo(block);
       ...
    }
   &:after {
       @include pseudo;
       ...
   }
}

Mixin absolute

Description

Mixin which helps to add position absolute with additional (optional) properties to class

Parameters

• $args - variable(s) which will be used as a value(s) for top right bottom left properties (default empty string)

Usage:

Assigned position absolute without additional properties

.exampleAbsoluteClass {
   @include absolute(top 0 left 0 bottom 0);
}

Mixin fixed

Description

Mixin which helps to add position fixed with additional (optional) properties to class

Parameters

• $args - variable(s) which will be used as a value(s) for top right bottom left properties (default empty string)

Usage:

Assigned position fixed without additional properties

.exampleFixedClass {
    @include fixed(left 50% bottom 150px);
}

Mixin relative

Description

Mixin which helps to add position relative with additional (optional) properties to class

Parameters

• $args - variable(s) which will be used as a value(s) for top right bottom left properties (default empty string)

Usage:

Assigned position relative without additional properties

.exampleRelativeClass {
    @include relative;
}

Mixin sticky

Description

Mixin which helps to add position sticky with additional (optional) properties to class

Parameters

• $args - variable(s) which will be used as a value(s) for top right bottom left properties (default empty string)

Usage:

Assigned position sticky without additional properties

.exampleStickyClass {
    @include sticky;
}