Skip to main content

RTL

Onekit supported layout with RTL direction. This is very useful if you use multi-language sites or for sites that have Arabic, Persian, Urdu and others.

CSS

If you want to activate rtl mode, you must use following css.

            
              <!-- rtl -->
              <link rel="stylesheet" href="src/plugins/aos/dist/aos-rtl.css">
              <link rel="stylesheet" href="src/css/theme-rtl.css">

JS

If you want to activate rtl mode, you must use following js

            
              <!-- RTL js -->
              <script src="src/js/theme-rtl.js"></script>

HTML

If you want to activate rtl mode, you must edit flickity slider html code.

            
              "rightToLeft": true,

add in following flickity html code.

            
              data-flickity='{ "rightToLeft": true, "cellAlign": "left", "wrapAround": true, "draggable": false, "adaptiveHeight": true, "prevNextButtons": true , "imagesLoaded": true }'>

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

            
              <!doctype html>
              <html lang="ar" dir="rtl">
                <head>
                <!-- Title -->
                <title>مرحبا بالعالم!</title>

                <!-- Required meta tags -->
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                <!-- Favicon  -->
                <link rel="icon" href="src/img-min/logo/favicon.png">

                <!--Plugins Styles-->
                <link rel="stylesheet" href="src/plugins/lightgallery.js/dist/css/lightgallery.min.css">
                <link rel="stylesheet" href="src/plugins/flickity/dist/flickity.min.css">

                <!--rtl-->
                <link rel="stylesheet" href="src/plugins/aos/dist/aos-rtl.css">
                <link rel="stylesheet" href="src/css/theme-rtl.css">
              </head>

              <body>
                <h1>مرحبا بالعالم!</h1>

                <!-- =========={ JAVASCRIPT }==========  -->
                <!-- Core js -->
                <script src="src/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

                <!-- Plugin js -->
                <script src="src/plugins/aos/dist/aos.js"></script>
                <script src="src/plugins/waypoints/lib/noframework.waypoints.min.js"></script>
                <script src="src/plugins/counterup2/dist/index.js"></script>
                <script src="src/plugins/jarallax/dist/jarallax.min.js"></script>
                <script src="src/plugins/jarallax/dist/jarallax-video.min.js"></script>
                <script src="src/plugins/lax.js/lib/lax.min.js"></script>

                <script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
                <script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
                <script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>

                <script src="src/plugins/flickity/dist/flickity.pkgd.min.js"></script>
                <script src="src/plugins/typed.js/dist/typed.umd.js"></script>
                <script src="src/plugins/isotope-layout/dist/isotope.pkgd.min.js"></script>
                <script src="src/plugins/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

                <!-- RTL js -->
                <script src="src/js/theme-rtl.js"></script>
              </body>
              </html>

RTL bundle starter template

            
              <!doctype html>
              <html lang="ar" dir="rtl">
                <head>
                <!-- Title -->
                <title>مرحبا بالعالم!</title>

                <!-- Required meta tags -->
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                <!-- Favicon  -->
                <link rel="icon" href="src/img-min/logo/favicon.png">

                <!--bundle rtl-->
                <link rel="stylesheet" href="dist/css/bundle-rtl.min.css">
              </head>

              <body>
                <h1>مرحبا بالعالم!</h1>

                <!-- =========={ JAVASCRIPT }==========  -->
                <!-- Bundle RTL js -->
                <script src="dist/js/bundle-rtl.min.js"></script>
              </body>
              </html>

Tools

If want to running rtl task series, you can use this:

Task Series Description
npm run cssrtl Compile theme.css file to theme-rtl.css
npm run mincssrtl Compile theme-rtl.css and all plugins css file to bundle-rtl.min.css in /dist/css/ directory
npm run minjsrtl Minify theme-rtl.js all plugins js to bundle-rtl.min.js in /dist/js/ directory

SCSS

If want to change css value from scss, you can edit src/scss/_variables.scss. Ltr and rtl variables is in one file, so this will make easy customize.

More info

Example RTL page can preview in here Home Default RTL

You can make customize rtl scss with follow tutorial from rtlcss.com