View source

Flex Direction

The flex direction utility contains helper classes for the CSS flex-direction property.

Installation

npm install --save-dev iotacss-utils-flex-direction

Dependencies

  • Settings.Core
  • Tools.Core

Settings

Name Type Default Description
$iota-utils-flex-direction-namespace String 'fd-'
$iota-utils-flex-direction-row-name String row
$iota-utils-flex-direction-row-reverse-name String rowrev
$iota-utils-flex-direction-column-name String col
$iota-utils-flex-direction-column-reverse-name String colrev
$iota-utils-flex-direction-res Boolean false Enable / Disable breakpoint specific classes
$iota-utils-flex-direction-breakpoints Map $iota-global-breakpoints Breakpoints map

Class Syntax

Simple Class

1
.[utility-namespace][flex-direction-namespace][row/col/rowrev/colrev]

Responsive Class

1
.[utility-namespace][flex-direction-namespace][row/col/rowrev/colrev]@[breakpoint]

Class list

  • .u-fd-row
  • .u-fd-rowrev
  • .u-fd-col
  • .u-fd-colrev

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-fd-row to u-flex-direction-row. To do this, you should update the namespace classes:

1
$iota-utils-flex-direction-namespace : 'flex-direction-';

Enable responsive flex direction utilities

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

1
2
3
<div class="u-fd-rowrev u-fd-row@sm">
  Div with flex-direction: row-reverse; on mobile and flex-direction: row; on tablets and up.
</div>

Set breakpoints only for flex direction utility

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

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

1
2
3
<div class="u-fd-rowrev@xs">
  Div with flex-direction: row-reverse; in mobile devices only.
</div>