RTL layout overview
Overview
RTL layout - layout in right-to-left direction, where content displays from the right-hand side of a page and concludes on the left-hand side, such as in Arabic, Hebrew and Urdu. Other words - the whole page layout and content is mirrored. Limitless template supports RTL layout version in all 4 available main layout variations.
Screenshot of RTL folder
The difference
Both LTR and RTL versions use the same markup, class names and content ordering. The only difference is dir="rtl" attribute added to the <html> element of the page, which changes the direction. Both LTR and RTL layouts are using the same set of SCSS files, with minor additions. CSS files with RTL styles are automatically generated by gulp task runner - first it compiles SCSS files to a normal LTR version, right after that it generates a new set of CSS files with RTL support.
The main benefit of this method - no need to store separate versions of SCSS files and update them manually, it saves a lot of time and makes updating process much faster. However, the only downside here is - it works only with GULP. So if you have any questions about SCSS files compilation in RTL version - do not hesitate to contact me.
For those who don't know how to use gulp, please check this section for step-by-step description on how to set it up and running.
Also some of the plugins are modified in order to work with RTL direction, as well as demo pages. A couple of components, such as ION range slider and Datatable extensions don't support RTL at all due to the plugin logic, but ION range sliders will be fixed soon as far as I am aware. All other options and features are supported.
Example markup:
<!-- RTL layout -->
<html lang="ar" dir="rtl">
<!-- Page head -->
<head>
...
</head>
<!-- /page head -->
<!-- Page body -->
<body>
<!-- Main navbar -->
<div class="navbar navbar-dark navbar-expand-md">
...
</div>
<!-- /main navbar -->
<!-- Page content -->
<div class="page-content">
...
</div>
<!-- /page content -->
</body>
<!-- /page body -->
</html>
<!-- /RTL layout -->
Bootstrap RTL
By default, Bootstrap framework doesn't support RTL direction. But fortunately it can be updated manually. Limitless template uses manually updated Bootstrap SCSS version, which is exactly the same as in LTR version, with exception of a few additional fixes. Table below contains files that belongs to original Bootstrap SCSS files and have been modified:
| What | Where | Description |
|---|---|---|
_tooltip.scss |
/scss/_bootstrap/ | Ignore arrow and tooltip positioning |
_popovers.scss |
/scss/_bootstrap/ | Ignore arrow and popover positioning |
_dropdown.scss |
/scss/_bootstrap/ | Ignore dropdown alignment |
_progress.scss |
/scss/_bootstrap/ | Ignore animation direction |
All other files are identical in both LTR and RTL versions.