View source

RTL Tool

RTL Tool includes all the important mixins and functions for developing a right-to-left website.

Install

Install it through NPM.

npm install --save-dev iotacss-tools-rtl

Import it to your main file.

1
@import "<node_modules>/iotacss-tools-rtl/tools.rtl"

Dependencies

Available Mixins

Align Content

1
@include align-content(flex-start / flex-end);

Align Self

1
@include align-self(flex-start / flex-end);

Border

1
2
@include iota-border-left($value);
@include iota-border-right($value);

Border Color

1
2
3
@include iota-border-left-color($value);
@include iota-border-right-color($value);
@include iota-border-color($list);

Border Radius

1
2
3
4
5
6
7
8
@include iota-border-top-radius($value);
@include iota-border-right-radius($value);
@include iota-border-bottom-radius($value);
@include iota-border-left-radius($value);
@include iota-border-top-left-radius($value);
@include iota-border-top-right-radius($value);
@include iota-border-bottom-left-radius($value);
@include iota-border-bottom-right-radius($value);

Border Style

1
2
3
@include iota-border-left-style($value);
@include iota-border-right-style($value);
@include iota-border-style($list);

Border Width

1
2
3
@include iota-border-left-width($value);
@include iota-border-right-width($value);
@include iota-border-width($list);

Clear

1
@include iota-align-self(left / right);

Direction

1
@include iota-direction(ltr / rtl);

Justify Content

1
@include iota-justify-content(flex-start / flex-end);

Left / Right

1
2
@include iota-left($value);
@include iota-right($value);

Margin

1
2
3
@include iota-margin-left($value);
@include iota-margin-right($value);
@include iota-margin($list);

Padding

1
2
3
@include iota-padding-left($value);
@include iota-padding-right($value);
@include iota-padding($list);

Text Align

1
@include iota-text-align(left / right);