Position Utility

The position utility contains helper classes for the CSS position property.

Installation

npm install --save-dev iotacss-utils-position

Dependencies

Settings.Core
Tools.Core

Settings

Name	Type	Default	Description
$iota-utils-position-namespace	String	' '
$iota-utils-position-absolute-name	String	absolute
$iota-utils-position-fixed-name	String	fixed
$iota-utils-position-relative-name	String	relative
$iota-utils-position-static-name	String	static
$iota-utils-position-res	Boolean	false	Enable / Disable breakpoint specific classes
$iota-utils-position-breakpoints	Map	$iota-global-breakpoints	Breakpoints map

Class Syntax

Simple Class

1 .[utility-namespace][position-namespace][absolute/relative/fixed/static]

Responsive Class

1 .[utility-namespace][position-namespace][absolute/relative/fixed/static]@[breakpoint]

Class list

.u-absolute
.u-relative
.u-fixed
.u-static

Change class names

iotaCSS allows you to fully customize all classes based on your needs. Assuming you would like to change the syntax of the classes from .u-absolute to u-position-absolute. To do this, you should update the namespace classes:

1 $iota-utils-position-namespace : 'position';

Enable responsive position utilities

By enabling the responsive position utilities, you have access to a set of utility classes which bind to breakpoints. By default, they bind to the iotaCSS global breakpoints specified in Settings.Core.

1 $iota-utils-position-res: true;

1
2
3 <h1 class="u-absolute u-fixed@sm">
  Heading positioned absolute on mobile and fixed on tablets and up.
</h1>

Set breakpoints only for position utility

In case you would like to use different breakpoints to position utility only, you should use the local variable.

1
2
3
4 $iota-utils-position-res: true;
$iota-utils-position-breakpoints: (
  xs: screen and (max-width: 767px)
);

1
2
3 <h1 class="u-absolute@xs">
  Heading positioned absolute in mobiles.
</h1>