Align Utility

The align utility contains helper classes for the CSS vertical-align property.


Installation

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

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-utils-align-namespace String align
$iota-utils-align-top-name String top
$iota-utils-align-bottom-name String bottom
$iota-utils-align-middle-name String middle
$iota-utils-align-baseline-name String baseline
$iota-utils-align-res Boolean false Enable / Disable breakpoint specific classes
$iota-utils-align-breakpoints Map $iota-global-breakpoints Override breakpoints map only for align utility

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>