Align Utility

Installation

npm install --save-dev iotacss-utils-align

Dependencies

• Settings.Core
• Tools.Core

Settings

Class syntax

Simple Class

1
.[utility-namespace][align-namespace][top/middle/bottom/baseline]

Responsive Class

1
.[utility-namespace][align-namespace][top/middle/bottom/baseline]@[breakpoint]

Class list

• .u-align-top
• .u-align-middle
• .u-align-bottom
• .u-align-baseline

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-align-top to u-at. To do this, you should update the namespace classes:

1
2
3
4
5
$iota-utils-align-namespace     : 'a';
$iota-utils-align-top-name      : 't';
$iota-utils-align-bottom-name   : 'b';
$iota-utils-align-middle-name   : 'm';
$iota-utils-align-baseline-name : 'b';

Enable responsive align utilities

By enabling the responsive align 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-align-res: true;

1
2
3
<h1 class="u-align-top u-align-middle@sm">
  Heading vertically aligned top on mobile and middle on tablets and up.
</h1>

Set breakpoints only for align utility

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

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

1
2
3
<h1 class="u-align-middle@xs">
  Heading aligned middle in mobiles.
</h1>