Transform Utility

The transform utility contains helper classes for the CSS text-transform property.

Installation

npm install --save-dev iotacss-utils-transform

Dependencies

Settings.Core
Tools.Core

Settings

Name	Type	Default	Description
$iota-utils-transform-namespace	String
$iota-utils-transform-capitalize-name	String	capitalize
$iota-utils-transform-uppercase-name	String	uppercase
$iota-utils-transform-lowercase-name	String	lowercase
$iota-utils-transform-res	Boolean	false	Enable / Disable breakpoint specific classes
$iota-utils-transform-breakpoints	Map	$iota-global-breakpoints	Override breakpoints map only for transform utility

Class syntax

Simple Class

1 .[utility-namespace][transform-namespace][capitalize/uppercase/lowercase]

Responsive Class

1 .[utility-namespace][transform-namespace][capitalize/uppercase/lowercase]@[breakpoint]

Class list

.u-capitalize
.u-uppercase
.u-lowercase

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

1 $iota-utils-tramsform-uppercase : 'upper';

Enable responsive transform utilities

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

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

Set breakpoints only for transform utility

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

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

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