Text Utility

The text utility contains helper classes for the CSS text align property.

Installation

npm install --save-dev iotacss-utils-text

Dependencies

Settings.Core
Tools.Core

Settings

Name	Type	Default	Description
$iota-utils-text-namespace	String	text-
$iota-utils-text-left-name	String	left
$iota-utils-text-right-name	String	right
$iota-utils-text-center-name	String	center
$iota-utils-text-res	Boolean	false	Enable / Disable breakpoint specific classes
$iota-utils-text-breakpoints	Map	$iota-global-breakpoints	Breakpoints map for text utility

Class syntax

Simple Class

1 .[utility-namespace][text-namespace][left/center/right]

Responsive Class

1 .[utility-namespace][text-namespace][left/center/right]@[breakpoint]

Class list

.u-text-left
.u-text-center
.u-text-right

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-text-left to u-tl. To do this, you should update the namespace classes:

1
2 $iota-utils-text-namespace    : 't';
$iota-utils-text-left-name    : 'l';

Enable responsive text utilities

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

1
2
3 <h1 class="u-text-center u-text-right@sm">
  Heading aligned center on mobile and right on tablets and up.
</h1>

Set breakpoints only for text utility

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

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

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