RTL

RTL Utilities

Class Description

Class	Description
`.text-align-start` `.text-align-end` `.float-start` `.float-end` `.p--0-start` `.p--0-end` `.m--0-start` `.m--0-end` `.m-auto-start` `.m-auto-end` `.b--0-start` `.b--0-end` `.rtl-scalex-1` `.rtl-scalex-n1`	LTR = left to right RTL = right to left -start = always left on LTR ; always right on RTL. -end = always right on LTR ; always left on RTL. `.text-align-start` LTR: text-left , RTL: text-right `.text-align-end` LTR: text-right , RTL: text-left `.float-start` LTR: float-left , RTL: float-right `.float-end` LTR: float-right , RTL: float-left `.p--0-start` LTR: padding-left: 0 , RTL: padding-right: 0 `.p--0-end` LTR: padding-right: 0 , RTL: padding-left: 0 `.m--0-start` LTR: margin-left: 0 , RTL: margin-right: 0 `.m--0-end` LTR: margin-right: 0 , RTL: margin-left: 0 `.m-auto-start` LTR: margin-left: auto , RTL: margin-right: auto `.m-auto-end` LTR: margin-right: auto , RTL: margin-left: auto `.b--0-start` LTR: border-left: 0 , RTL: border-right: 0 `.b--0-end` LTR: border-right: 0 , RTL: border-left: 0 `.rtl-scalex-n1` = flip horizontal! scaleX(-1) `.rtl-scalex-1` = flip back! scaleX(1) Please note: the entire Smarty is developed from scratch in "dual mode". Is writen for both: LTR and RTL using @if conditionals. When you build your project (scss/gulp), according to your variables.scss settings, the output will be LTR or RTL. `$global-rtl-enable: false !default;` No additional css classes, no useless code generated! All classes are generated for the exactly mode you want. This is also unique in Smarty. These very few additional classes you see above, are the most common ones, helping you to avoid common confusions. As an example: `.float-start` is actually `.float-left` on LTR (normal) but is `.float-right` on RTL! So you don't need to worry about switching/editing the classes in your HTML code because is displaying in wrong direction. By default, Smarty uses these classes in all layouts/blocks. The beauty: if you are a developer and don't speak arab, develop the website in LTR mode and when you are done, just switch `$global-rtl-enable: true !default;` in variables.scss and everything should be in place! This is how Smarty is written: `.float-start { @if $global-rtl-enable == false { float: left !important; } @else { float: right !important; } }` This is a tiny example of code, but everything is written this way: header, components, etc! All floats, paddings, margins are using conditionals to be generated for LTR or RTL.

.text-align-start .text-align-end .float-start .float-end
.p--0-start .p--0-end .m--0-start .m--0-end .m-auto-start .m-auto-end .b--0-start .b--0-end
.rtl-scalex-1 .rtl-scalex-n1

LTR = left to right
RTL = right to left

*-start = always left on LTR ; always right on RTL.
*-end = always right on LTR ; always left on RTL.

.text-align-start LTR: text-left , RTL: text-right
.text-align-end LTR: text-right , RTL: text-left
.float-start LTR: float-left , RTL: float-right
.float-end LTR: float-right , RTL: float-left

.p--0-start LTR: padding-left: 0 , RTL: padding-right: 0
.p--0-end LTR: padding-right: 0 , RTL: padding-left: 0
.m--0-start LTR: margin-left: 0 , RTL: margin-right: 0
.m--0-end LTR: margin-right: 0 , RTL: margin-left: 0
.m-auto-start LTR: margin-left: auto , RTL: margin-right: auto
.m-auto-end LTR: margin-right: auto , RTL: margin-left: auto
.b--0-start LTR: border-left: 0 , RTL: border-right: 0
.b--0-end LTR: border-right: 0 , RTL: border-left: 0

.rtl-scalex-n1 = flip horizontal! scaleX(-1)
.rtl-scalex-1 = flip back! scaleX(1)

Please note: the entire Smarty is developed from scratch in "dual mode". Is writen for both: LTR and RTL using @if conditionals. When you build your project (scss/gulp), according to your variables.scss settings, the output will be LTR or RTL.
$global-rtl-enable: false !default;

No additional css classes, no useless code generated! All classes are generated for the exactly mode you want. This is also unique in Smarty.

These very few additional classes you see above, are the most common ones, helping you to avoid common confusions. As an example: .float-start is actually .float-left on LTR (normal) but is .float-right on RTL! So you don't need to worry about switching/editing the classes in your HTML code because is displaying in wrong direction. By default, Smarty uses these classes in all layouts/blocks.

The beauty: if you are a developer and don't speak arab, develop the website in LTR mode and when you are done, just switch $global-rtl-enable: true !default; in variables.scss and everything should be in place!

This is how Smarty is written:


														.float-start { 


															   @if $global-rtl-enable == false {

																      float: left !important;

															   } @else {

																      float: right !important;

															   }

														}

This is a tiny example of code, but everything is written this way: header, components, etc! All floats, paddings, margins are using conditionals to be generated for LTR or RTL.