Rtl

Using Boosted for Right-to-left website presentation

Every release of Boosed ships with a dedicated right-to-left (RTL) version.

Usage

To get a RTL version of a boosted webpage you need two things :

  1. Replace the regular boosted.css and boosted.js files

  2. with their RTL counterpart boosted-rtl.css and boosted-rtl.jsfound in the distribution files. Add attribute dir="rtl" to your <html> tag.

Start template

<!doctype html>
<html lang="en" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!--
      Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
      Patent and Trademark Office and may be registered in certain other jurisdictions.
      Copyright © 2014 Monotype Imaging Inc. All rights reserved.
      Orange Company had buy the right for used Helvetica onto digital applications.
      If you are not autorized to used it, don't include the orangeHelvetica.css
      See NOTICE.txt for more informations.
    -->
    <link rel="stylesheet" href="css/orangeHelvetica.css" />
    <!--
      Orange Icons
      Copyright (C) 2016 - 2018 Orange SA All rights reserved
      See NOTICE.txt for more informations.
    -->
    <link rel="stylesheet" href="css/orangeIcons.css" />

    <!-- Boosted CSS -->
    <link rel="stylesheet" href="path/to/your/boosted-rtl.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <main id="content" role="main">
      My page content start here
    </main>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Boosted JS. -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="path/to/your/boosted-rtl.js"></script>
  </body>
</html>

Examples

Every example from the Examples page has his RTL counterpat. Just prefix the page url with rtl-* like in this example : examples/rtl-news-template/