View source

Float Utility

The float utility contains helper classes for the CSS float property.

Installation

npm install --save-dev iotacss-utils-float

Dependencies

  • Settings.Core
  • Tools.Core

Settings

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

Class Syntax

Simple Class

1
.[utility-namespace][float-namespace][left/right]

Responsive Class

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

Class list

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

1
2
3
$iota-utils-float-namespace   : 'f';
$iota-utils-float-left-name   : 'l';
$iota-utils-float-right-name  : 'r';

Enable responsive float utilities

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

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

Set breakpoints only for float utility

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

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

1
2
3
<h1 class="u-float-right@xs">
  Heading aligned right on mobiles.
</h1>