View source

Align Items

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

Installation

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

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-utils-align-items-namespace String 'ai-'
$iota-utils-align-items-start-name String start
$iota-utils-align-items-end-name String end
$iota-utils-align-items-center-name String center
$iota-utils-align-items-res Boolean false Enable / Disable breakpoint specific classes
$iota-utils-align-items-breakpoints Map $iota-global-breakpoints Breakpoints map

Class Syntax

Simple Class

1
.[utility-namespace][align-items-namespace][start/end/center]

Responsive Class

1
.[utility-namespace][align-items-namespace][start/end/center]@[breakpoint]

Class list

  • .u-ai-start
  • .u-ai-end
  • .u-ai-center

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

1
$iota-utils-align-items-namespace : 'align-items-';

Enable responsive align items utilities

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

1
2
3
<div class="u-ai-center u-ai-start@sm">
  Div with align-items: center; on mobile and align-items: flex-start; on tablets and up.
</div>

Set breakpoints only for align items utility

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

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

1
2
3
<div class="u-ai-center@xs">
  Div with align-items: center in mobile devices only.
</div>