...
Table of Contents
| Table of Contents |
|---|
Sass
EdX mostly uses edX's legacy UIs (primarily Django templates and pre-micro-frontend interfaces) mostly use Bi-App-Sass to help flip our UI for languages that read right to left. The primary CSS properties that are involved in flipping are float, margin, padding, text-align, positioning, and borders. When you are using these properties in the edX platform, you should check whether it will need to be flipped for right-to-left languages. If so, use the bi-app mixins instead of the regular property: value syntax.
Note that for Bootstrap micro-frontends and bootstrap pages, edX instead uses rtlcss which automatically converts an LTR-based CSS file by flipping any directional rules. This . In micro-frontends, this happens as part of the webpack build via PostCSS plugins (See https://github.com/edx/frontend-build for more details on the MFE webpack build) This is preferable to Bi-App-Sass because almost all rules will "just work" as expected for RTL languages, so there is no need to use special mixins. If there are issues with the automatic translation, comment-based declarations can direct rtlcss as to how to specify the RTL rule. See RTLCSS: Control Directives for more details.
...