Right to left

FlatifyCSS supports the right to left layout, it is done by using inline featuers of CSS therefore elements are automatically positioned based on the document direction.

Note that you need to set dir="rtl" attribute for <html> tag and .rtl class as well.

Here are the list of CSS properties that is used to dynamically position elements based on direction:

inset-inline
margin-inline
padding-inline
border-inline
border-start-start-radius
border-start-end-radius
border-end-start-radius
border-end-end-radius
float: inline-start/inline-end
text-align: start/end

For some cases like transform there is not inline option, the :dir(rtl/ltr) CSS pseudo-class will be a saviour here.

This is one example of the usage:

&:dir(rtl) .inline:before,
.rtl &.inline:before {
  transform: rotate(3deg) scale(1.1, 1.2) skew(10deg);
}

&:dir(ltr) .inline:before,
.ltr &.inline:before {
  transform: rotate(-3deg) scale(1.1, 1.2) skew(-10deg);
}

For backward compatibility also the .ltr and .rtl classes are added.