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. Starting from version 1.3, both LTR and RTL layouts are using the same set of LESS files, with minor additions. From now on, CSS files with RTL styles are automatically generated by gulp task runner - first it compiles LESS 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 LESS 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 LESS files compilation in RTL version - do not hesitate to let me know, i'll assist you withmigrating.

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, because by default they don't support it. A couple of components, such as NoUI slider and Datatable extensions don't support RTL at all due to the plugin logic, but NoUI sliders will be fixed soon. 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-inverse">
			...
		</div>
		<!-- /main navbar -->


		<!-- Page container -->
		<div class="page-container">
			...
		</div>
		<!-- /page container -->

	</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 a custom manually updated Bootstrap LESS version, which is the same as LTR version, except a couple of additinal fixes. Table below contains files that belongs to original Bootstrap LESS files and have been modified:

What Where Description
tooltip.less /less/bootstrap/ Ignore arrow and tooltip positioning
popovers.less /less/bootstrap/ Ignore arrow and popover positioning

All other files are identical in both LTR and RTL versions.

Important notices

If you've already done a lot of changes in LESS files, that were available before version 1.3 - please contact me via support forum or email e.kopyov@gmail.com, i will help you out to identify where and what exactly was changed and assist you with migrating to a new version.