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>