View on GitHub

RTL

Using Boosted for right-to-left website presentation

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

Usage

To get a RTL version of a boosted webpage you only need to replace the regular boosted.css file with the RTL counterpart boosted-rtl.css. Please ensure to add dir="rtl" attribute to your <html> tag.

Helvetica Neue

Boosted RTL uses the Arabic version of Helvetica Neue in lieu of the PanEuropean Helvetica Neue. It also covers the Basic Latin alphabet.

Starter 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">
    <title>Hello, world!</title>

    <link rel="preconnect" href="https://code.jquery.com" crossorigin="anonymous">
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin="anonymous">
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">
    
    <!--
      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 has purchased the right to use Helvetica in its websites and mobile applications.
      If you are not authorized to used it, don't include the orangeHelvetica.css.
      See NOTICE.txt for more information.
    -->
    <link rel="preload" href="fonts/HelveticaNeueW20-55Roman.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/HelveticaNeueW20-75Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/orangeHelvetica.min.css" />
    <!--
      Orange Icons
      Copyright (C) 2016 - 2019 Orange SA All rights reserved
      See NOTICE.txt for more information.
    -->
    <link rel="stylesheet" href="css/orangeIcons.min.css" />

    <!-- Boosted CSS -->
    <link rel="stylesheet" href="css/boosted-rtl.min.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

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

    <!-- Optional JavaScript; choose one of the two! -->
    
    <!-- Option 1: jQuery and Boosted Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/js/boosted.bundle.min.js" integrity="sha384-hQFBUEXKv1tPjGNFpCctXthNheXFWEyT+cKHsR5+8VYwGoe2L0SIaDNXDpE1LlTK" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Boosted JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/jquery.tablesorter.min.js" integrity="sha384-+PEWXCk8F17zxsQsEjkuHjUN4yFMHv03eKxKLrqwDql8FJQM0NeSvHRZFVLfXyn7" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js" integrity="sha384-llVNZVxgabZyf5ZeGs3m2QcNbEE0UK1PBKM6ZoJmWK5BuBpqZUXpN1nWXd0SrAC5" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/boosted@4.5.3/dist/js/boosted.min.js" integrity="sha384-dZ5yFPu4JLOG6APRar263bUkZl+uDJl2LWBDXvSyVocYb4g2FJrT0BxpETyjdqtj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Boostwatch RTL

See Boostwatch page in RTL mode to see components in action.

Examples

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