diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 10650d8afa..52a5b5f0e7 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -280,24 +280,24 @@ p, ul, ol, dl {
 
       .page-header {
         width: flex-grid(6,12);
-        float: flip(left, right);
-        #{$margin-right}: flex-gutter();
+        @include float(left);
+        @include margin-right(flex-gutter());
       }
 
       .nav-actions {
         position: relative;
         bottom: -($baseline*0.75);
         width: flex-grid(6,12);
-        float: flip(left, right);
-        text-align: $right;
+        @include float(left);
+        @include text-align(right);
 
         .nav-item {
           display: inline-block;
           vertical-align: top;
-          #{$margin-right}: ($baseline/2);
+          @include margin-right($baseline/2);
 
           &:last-child {
-            #{$margin-right}: 0;
+            @include margin-right(0);
           }
         }
 
@@ -500,21 +500,21 @@ p, ul, ol, dl {
 
 .main-column {
   clear: both;
-  float: $left;
+  @include float(left);
   width: 70%;
 }
 
 .sidebar {
-  float: $right;
+  @include float(right);
   width: 28%;
 }
 
 .left {
-  float: $left;
+  @include float(left);
 }
 
 .right {
-  float: $right;
+  @include float(right);
 }
 
 // ====================
@@ -539,7 +539,7 @@ p, ul, ol, dl {
 .item-actions {
   position: absolute;
   top: 5px;
-  #{$right}: 5px;
+  @include right(5px);
 
   .edit-button,
   .delete-button,
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index 8e65dc2a8b..3bfafc7d28 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -27,14 +27,14 @@
   }
 
   .wrapper-l {
-    float: flip(left, right);
+    @include float(left);
     width: flex-grid(7,12);
   }
 
   .wrapper-r {
-    float: flip(right, left);
+    @include float(right);
     width: flex-grid(4,12);
-    text-align: $right;
+    @include text-align(right);
   }
 
   .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
@@ -128,8 +128,8 @@
 
   // specific elements - course name/info
   .info-course {
-    #{$margin-right}: flex-gutter();
-    #{$border-right}: 1px solid $gray-l4;
+    @include margin-right(flex-gutter());
+    @include border-right(1px solid $gray-l4);
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
     .course-org, .course-number {
@@ -144,7 +144,7 @@
     }
 
     .course-org {
-      #{$margin-right}: ($baseline/4);
+      @include margin-right($baseline/4);
     }
 
     .course-title {
@@ -184,7 +184,7 @@
     padding: ($baseline*0.75) 0;
 
     .nav-sub {
-      text-align: $left;
+      @include text-align(left);
     }
 
     .nav-account-help {
@@ -238,7 +238,7 @@
 
   .branding {
     width: 20%;
-    #{$margin-right}: 2%;
+    @include margin-right(2%);
   }
 
   .nav-account {
@@ -263,7 +263,7 @@
 
     .branding {
       width: 20%;
-      #{$margin-right}: 2%;
+      @include margin-right(2%);
     }
 
     .info-course {
diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss
index 1f782e8317..aca138b068 100644
--- a/cms/static/sass/elements/_icons.scss
+++ b/cms/static/sass/elements/_icons.scss
@@ -12,14 +12,14 @@
 .icon-inline {
   display: inline-block;
   vertical-align: middle;
-  #{$margin-right}: ($baseline/4);
+  @include margin-right($baseline/4);
 }
 
 // ui - badges
 .wrapper-ui-badge {
   position: absolute;
   top: -1px;
-  #{$left}: ($baseline*1.5);
+  @include left($baseline*1.5);
   width: 100%;
 }
 
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 33569702a5..70289057ea 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -148,7 +148,7 @@ nav {
     }
 
     .nav-sub {
-      text-align: $left;
+      @include text-align(left);
 
       // ui triangle/nub
       &:after {
@@ -167,20 +167,20 @@ nav {
   &.ui-right {
 
     .wrapper-nav-sub {
-      #{$left}: none;
-      #{$right}: 0;
+      @include left(none);
+      @include right(0);
     }
 
     .nav-sub {
 
       // ui triangle/nub
       &:after {
-        #{$right}: $baseline;
+        @include right($baseline);
         margin-right: -10px;
       }
 
       &:before {
-        #{$right}: $baseline;
+        @include right($baseline);
         margin-right: -11px;
       }
     }
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index 8c362f971e..05077ab7db 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -35,7 +35,7 @@
 
       [class^="icon-"] {
         @extend %t-icon6;
-        #{$margin-right}: ($baseline/4);
+        @include margin-right($baseline/4);
       }
 
       &:hover {
@@ -84,11 +84,11 @@
         @include clearfix();
 
         .action-item {
-          float: flip(left, right);
-          #{$margin-right}: ($baseline/2);
+          @include float(left);
+          @include margin-right($baseline/2);
 
           &:last-child {
-            #{$margin-right}: 0;
+            @include margin-right(0);
           }
 
           .action {
@@ -98,7 +98,7 @@
             [class^="icon-"] {
               @extend %t-icon4;
               vertical-align: middle;
-              #{$margin-right}: $baseline/4;
+              @include margin-right($baseline/4);
 
             }
 
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index 93a0cfb46c..b1269e4ebd 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -210,7 +210,7 @@
     vertical-align: middle;
     width: $baseline*17.5;
     border: 4px solid $black;
-    text-align: $left;
+    @include text-align(left);
 
     .copy {
       border-top: 4px solid $blue;
@@ -225,10 +225,10 @@
 
       .nav-item {
         display: inline-block;
-        #{$margin-right}: ($baseline*0.75);
+        @include margin-right($baseline*0.75);
 
         &:last-child {
-          #{$margin-right}: 0;
+          @include margin-right(0);
         }
       }
 
@@ -437,22 +437,22 @@
 
     .copy {
       width: flex-grid(7, 12);
-      #{$margin-right}: flex-gutter();
+      @include margin-right(flex-gutter());
     }
 
     .nav-actions {
       width: flex-grid(4, 12);
-      float: flip(left, right);
+      @include float(left);
       margin-top: ($baseline/4);
       text-align: right;
 
       .nav-item {
         display: inline-block;
         vertical-align: middle;
-        #{$margin-right}: ($baseline/2);
+        @include margin-right($baseline/2);
 
         &:last-child {
-          #{$margin-right}: 0;
+          @include margin-right(0);
         }
       }
     }
@@ -612,22 +612,22 @@
 
   	.copy {
   		width: flex-grid(7, 12);
-  		#{$margin-right}: flex-gutter();
+  		@include margin-right(flex-gutter());
   	}
 
   	.nav-actions {
   	  width: flex-grid(4, 12);
-      float: flip(left, right);
+      @include float(left);
       margin-top: ($baseline/2);
   	  text-align: right;
 
   	  .nav-item {
   	    display: inline-block;
   	    vertical-align: middle;
-  	    #{$margin-right}: ($baseline/2);
+  	    @include margin-right($baseline/2);
 
   	    &:last-child {
-  	      #{$margin-right}: 0;
+  	      @include margin-right(0);
   	    }
 
        .action-primary {
@@ -829,7 +829,7 @@ body.uxdesign.alerts {
   .content-primary {
     @extend %ui-window;
     width: flex-grid(12, 12);
-    #{$margin-right}: flex-gutter();
+    @include margin-right(flex-gutter());
     padding: $baseline ($baseline*1.5);
 
     > section {
@@ -856,9 +856,9 @@ body.uxdesign.alerts {
         }
 
         a {
-          float: flip(left, right);
+          @include float(left);
           width: flex-grid(5, 12);
-          #{$margin-right}: flex-gutter();
+          @include margin-right(flex-gutter());
         }
       }
     }
@@ -882,7 +882,7 @@ body.uxdesign.alerts {
     @include clearfix;
 
     .alert-message {
-      float: flip(left, right);
+      @include float(left);
       margin: 4px 0 0 0;
       color: $gray-d3;
     }
@@ -892,7 +892,7 @@ body.uxdesign.alerts {
     }
 
     .alert-action {
-      float: flip(left, right);
+      @include float(left);
 
       &.secondary {
         @include orange-button;
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index a35f240c60..1bb350f4fe 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -24,17 +24,17 @@
     @include clearfix();
 
     .copy {
-      float: flip(left, right);
+      @include float(left);
       width: flex-grid(8,12);
-      #{$margin-right}: flex-gutter();
+      @include margin-right(flex-gutter());
     }
 
     .nav-introduction-supplementary {
       @extend %t-copy-sub2;
-      float: flip(right, left);
+      @include float(right);
       width: flex-grid(4,12);
       display: block;
-      text-align: right;
+      @include text-align(right);
 
       .icon {
         @extend %t-action3;
diff --git a/cms/static/sass/style-app-extend1-rtl.scss b/cms/static/sass/style-app-extend1-rtl.scss
new file mode 100644
index 0000000000..8801d803b8
--- /dev/null
+++ b/cms/static/sass/style-app-extend1-rtl.scss
@@ -0,0 +1,64 @@
+// studio - css architecture
+// ====================
+
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+
+// VENDOR + REBASE *referenced/used vendor presentation and reset*
+// ====================
+@import 'reset';
+
+// BASE  *default edX offerings*
+// ====================
+// base - utilities
+@import 'config';
+@import 'variables';
+@import 'mixins';
+@import 'mixins-inherited';
+
+// base - assets
+@import 'assets/fonts';
+@import 'assets/graphics'; // sprites, basic img/figure/svg styling
+@import 'assets/anims'; // animations
+
+// base - starter
+@import 'base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/icons'; // references to icons used
+@import 'elements/controls'; // buttons, link styles, sliders, etc.
+@import 'elements/xblocks'; //  studio rendering chrome for xblocks
+@import 'elements/modules'; //  content module patterns
+@import 'elements/layout'; // various standard layouts
+
+// base - specific views
+@import 'views/account';
+@import 'views/assets';
+@import 'views/updates';
+@import 'views/dashboard';
+@import 'views/export';
+@import 'views/index';
+@import 'views/course-create';
+@import 'views/import';
+@import 'views/outline';
+@import 'views/settings';
+@import 'views/static-pages';
+@import 'views/unit';
+@import 'views/container';
+@import 'views/users';
+@import 'views/checklists';
+@import 'views/textbooks';
+@import 'views/export-git';
+@import 'views/group-configuration';
+
+// base - contexts
+@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
+
+// temp - inherited
+@import 'assets/content-types';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss
index 981e9e226f..d0d5a2b1f5 100644
--- a/cms/static/sass/style-app-extend1.scss
+++ b/cms/static/sass/style-app-extend1.scss
@@ -1,6 +1,8 @@
 // studio - css architecture
 // ====================
 
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
 
diff --git a/cms/static/sass/style-app-rtl.scss b/cms/static/sass/style-app-rtl.scss
new file mode 100644
index 0000000000..12985bd37f
--- /dev/null
+++ b/cms/static/sass/style-app-rtl.scss
@@ -0,0 +1,45 @@
+// studio - css architecture
+// ====================
+
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+
+// VENDOR + REBASE *referenced/used vendor presentation and reset*
+// ====================
+@import 'reset';
+
+// BASE  *default edX offerings*
+// ====================
+// base - utilities
+@import 'config';
+@import 'variables';
+@import 'mixins';
+@import 'mixins-inherited';
+
+// base - assets
+@import 'assets/fonts';
+@import 'assets/graphics'; // sprites, basic img/figure/svg styling
+@import 'assets/anims'; // animations
+
+// base - starter
+@import 'base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/icons'; // references to icons used
+@import 'elements/controls'; // buttons, link styles, sliders, etc.
+@import 'elements/modules'; //  content module patterns
+@import 'elements/navigation'; // all archetypes of navigation
+@import 'elements/layout'; // various standard layouts
+@import 'elements/forms';
+@import 'elements/header';
+@import 'elements/footer';
+@import 'elements/sock';
+@import 'elements/tender-widget';
+@import 'elements/system-feedback'; // alerts, notifications, states
+@import 'elements/system-help'; // help UI
+@import 'elements/modal'; // interstitial UI, dialogs, modal windows
+@import 'elements/vendor'; // overrides to vendor-provided styling
+@import 'elements/modal-window';
diff --git a/cms/static/sass/style-app.scss b/cms/static/sass/style-app.scss
index 0ff2381a3d..8b49c60522 100644
--- a/cms/static/sass/style-app.scss
+++ b/cms/static/sass/style-app.scss
@@ -1,6 +1,8 @@
 // studio - css architecture
 // ====================
 
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
 
diff --git a/cms/static/sass/vendor/bi-app/_bi-app-ltr.scss b/cms/static/sass/vendor/bi-app/_bi-app-ltr.scss
new file mode 100755
index 0000000000..6278a31380
--- /dev/null
+++ b/cms/static/sass/vendor/bi-app/_bi-app-ltr.scss
@@ -0,0 +1,11 @@
+// ------------------------------------------
+// left to right module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-ltr';
+@import 'mixins';
\ No newline at end of file
diff --git a/cms/static/sass/vendor/bi-app/_bi-app-rtl.scss b/cms/static/sass/vendor/bi-app/_bi-app-rtl.scss
new file mode 100755
index 0000000000..17b7f2e90f
--- /dev/null
+++ b/cms/static/sass/vendor/bi-app/_bi-app-rtl.scss
@@ -0,0 +1,11 @@
+// ------------------------------------------
+// right to left module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-rtl';
+@import 'mixins';
\ No newline at end of file
diff --git a/cms/static/sass/vendor/bi-app/_mixins.scss b/cms/static/sass/vendor/bi-app/_mixins.scss
new file mode 100755
index 0000000000..353999671d
--- /dev/null
+++ b/cms/static/sass/vendor/bi-app/_mixins.scss
@@ -0,0 +1,294 @@
+// ------------------------------------------
+// bi app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// ------------------------------------------
+// Table of contents
+// ------------------------------------------
+// padding
+// margin
+// float
+// text align
+// clear
+// left / right
+// border
+//  - width
+//  - style
+//  - color
+//  - generic
+//  - radius
+// ltr / rtl contents
+// ------------------------------------------
+
+// generic mixin for properties with values
+// (top right bottom left)
+// ------------------------------------------
+@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
+  @if $bi-app-direction == ltr {
+    #{$property}: $top $right $bottom $left;
+  } @else {
+    #{$property}: $top $left $bottom $right;
+  }
+}
+
+// padding
+// ------------------------------------------
+@mixin padding-left($distance) {
+  padding-#{$bi-app-left}: $distance;
+}
+
+@mixin padding-right($distance) {
+  padding-#{$bi-app-right}: $distance;
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+  @include bi-app-compact(padding, $top, $right, $bottom, $left);
+}
+
+// margin
+// ------------------------------------------
+@mixin margin-left($distance) {
+  margin-#{$bi-app-left}: $distance;
+}
+
+@mixin margin-right($distance) {
+  margin-#{$bi-app-right}: $distance;
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+  @include bi-app-compact(margin, $top, $right, $bottom, $left);
+}
+
+// float
+// ------------------------------------------
+@mixin bi-app-float-left {
+  float: $bi-app-left;
+}
+
+@mixin bi-app-float-right {
+  float: $bi-app-right;
+}
+
+@mixin float($direction) {
+  @if $direction == left {
+    @include bi-app-float-left;
+  } @else if $direction == right {
+    @include bi-app-float-right;
+  } @else {
+    float: $direction;
+  }
+}
+
+// text align
+// ------------------------------------------
+@mixin bi-app-text-align-left {
+  text-align: $bi-app-left;
+}
+
+@mixin bi-app-text-align-right {
+  text-align: $bi-app-right;
+}
+
+@mixin text-align($direction) {
+  @if $direction == left {
+    @include bi-app-text-align-left;
+  } @else if $direction == right {
+    @include bi-app-text-align-right;
+  } @else {
+    text-align: $direction;
+  }
+}
+
+// clear
+// ------------------------------------------
+@mixin bi-app-clear-left {
+  clear: $bi-app-left;
+}
+
+@mixin bi-app-clear-right {
+  clear: $bi-app-right;
+}
+
+@mixin clear($direction) {
+  @if $direction == left {
+    @include bi-app-clear-left;
+  } @else if $direction == right {
+    @include bi-app-clear-right;
+  } @else {
+    clear: $direction;
+  }
+}
+
+// left / right
+// ------------------------------------------
+@mixin left($distance) {
+  @if $bi-app-direction == ltr {
+    left: $distance;
+  } @else if $bi-app-direction == rtl {
+    right: $distance;
+  }
+}
+
+@mixin right($distance) {
+  @if $bi-app-direction == ltr {
+    right: $distance;
+  } @else if $bi-app-direction == rtl {
+    left: $distance;
+  }
+}
+
+// border
+// ------------------------------------------
+
+// width
+@mixin border-left-width($width) {
+  border-#{$bi-app-left}-width: $width;
+}
+
+@mixin border-right-width($width) {
+  border-#{$bi-app-right}-width: $width;
+}
+
+@mixin border-width($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-width, $top, $right, $bottom, $left);
+}
+
+// style
+@mixin border-left-style($style) {
+  border-#{$bi-app-left}-style: $style;
+}
+
+@mixin border-right-style($style) {
+  border-#{$bi-app-right}-style: $style;
+}
+
+@mixin border-style($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-style, $top, $right, $bottom, $left);
+}
+
+// color
+@mixin border-left-color($color) {
+  border-#{$bi-app-left}-color: $color;
+}
+
+@mixin border-right-color($color) {
+  border-#{$bi-app-right}-color: $color;
+}
+
+@mixin border-color($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-color, $top, $right, $bottom, $left);
+}
+
+// generic
+@mixin border-left($border-style) {
+  border-#{$bi-app-left}: $border-style;
+}
+
+@mixin border-right($border-style) {
+  border-#{$bi-app-right}: $border-style;
+}
+
+// radius
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-#{$bi-app-left}-radius: $radius;
+     -moz-border-top#{$bi-app-left}-radius: $radius;
+          border-top-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-#{$bi-app-right}-radius: $radius;
+     -moz-border-top#{$bi-app-right}-radius: $radius;
+          border-top-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-left}-radius: $radius;
+     -moz-border-bottom#{$bi-app-left}-radius: $radius;
+          border-bottom-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-right}-radius: $radius;
+     -moz-border-bottom#{$bi-app-right}-radius: $radius;
+          border-bottom-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+@mixin border-top-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-top-right-radius($radius);
+}
+
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-left-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
+  @if $topRight != null {
+    @include border-top-left-radius($topLeft);
+    @include border-top-right-radius($topRight);
+    @include border-bottom-right-radius($bottomRight);
+    @include border-bottom-left-radius($bottomLeft);
+  } @else {
+    -webkit-border-radius: $topLeft;
+       -moz-border-radius: $topLeft;
+        -ms-border-radius: $topLeft;
+         -o-border-radius: $topLeft;
+            border-radius: $topLeft;
+  }
+}
+
+// Returns "en" or "ar", useful for image suffixes.
+// Usage: background-image: url(/img/header-#{lang()}.png);
+@function lang() {
+  @if $bi-app-direction == ltr {
+    @return 'en';
+  } @else {
+    @return 'ar';
+  }
+}
+
+// Support for "direction" declaration (renders ltr/rtl).
+// Useful for form elements as they swap the text-indent property and align the text accordingly.
+@mixin direction {
+  direction: $bi-app-direction;
+}
+
+// Inverts a percentage value. Example: 97% becames 3%.
+// Useful for background-position.
+@function bi-app-invert-percentage($percentage) {
+  @if $bi-app-direction == rtl {
+    @return 100% - $percentage;
+  } @else {
+    @return $percentage;
+  }
+}
+
+// ltr / rtl contents
+// ------------------------------------------
+@mixin ltr {
+  @if $bi-app-direction == ltr {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if $bi-app-direction == rtl {
+    @content;
+  }
+}
diff --git a/cms/static/sass/vendor/bi-app/_variables-ltr.scss b/cms/static/sass/vendor/bi-app/_variables-ltr.scss
new file mode 100755
index 0000000000..36d5a7b06e
--- /dev/null
+++ b/cms/static/sass/vendor/bi-app/_variables-ltr.scss
@@ -0,0 +1,15 @@
+// ------------------------------------------
+// left to right variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : left;
+$bi-app-right 				  : right;
+$bi-app-direction 			: ltr;
+$bi-app-invert-direction: rtl;
\ No newline at end of file
diff --git a/cms/static/sass/vendor/bi-app/_variables-rtl.scss b/cms/static/sass/vendor/bi-app/_variables-rtl.scss
new file mode 100755
index 0000000000..7300f17863
--- /dev/null
+++ b/cms/static/sass/vendor/bi-app/_variables-rtl.scss
@@ -0,0 +1,15 @@
+// ------------------------------------------
+// right to left variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : right;
+$bi-app-right           : left;
+$bi-app-direction 			: rtl;
+$bi-app-invert-direction: ltr;
\ No newline at end of file
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index eab6d498bc..7bb9ce2dcb 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -37,7 +37,7 @@
       .action {
         @extend %t-action3;
         position: absolute;
-        #{$right}: 0;
+        @include right(0);
         top: 40%;
       }
     }
@@ -241,7 +241,7 @@
       @extend %t-action3;
       position: absolute;
       top: 0;
-      #{$right}: 0;
+      @include right(0);
     }
   }
 }
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index c61f8bd1e2..a3aa93fd7d 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -34,10 +34,10 @@
 
     .new-button {
       @extend %t-action3;
-      #{$margin-left}: $baseline;
+      @include margin-left($baseline);
 
       [class^="icon-"] {
-        #{$margin-right}: ($baseline/2);
+        @include margin-right($baseline/2);
       }
     }
   }
@@ -68,7 +68,7 @@
       width: flex-grid(3, 12);
 
       &.pagination-compact {
-        text-align: $right;
+        @include text-align(right);
       }
 
       &.pagination-full {
@@ -134,7 +134,7 @@
       .current-page {
         @extend %ui-depth1;
         position: absolute;
-        #{$left}: -($baseline/4);
+        @include left(-($baseline/4));
       }
 
       .page-divider {
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index d616f69f21..2927f6ed63 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -57,15 +57,15 @@
         @include transition(color $tmg-f2 ease-in-out 0s);
         width: flex-grid(6, 9);
         margin: 0;
-        #{$margin-right}: flex-gutter();
-        float: flip(left, right);
+        @include margin-right(flex-gutter());
+        @include float(left);
 
         .ui-toggle-expansion {
           @include transition(all $tmg-f2 ease-in-out 0s);
           @extend %t-action1;
           display: inline-block;
           vertical-align: middle;
-          #{$margin-right}: ($baseline/2);
+          @include margin-right($baseline/2);
           color: $gray-l4;
         }
 
@@ -85,9 +85,9 @@
       .checklist-status {
         @extend %t-copy-sub1;
         width: flex-grid(3, 9);
-        float: flip(right, left);
+        @include float(right);
         margin-top: ($baseline/2);
-        text-align: $right;
+        @include text-align(right);
         color: $gray-l2;
 
 
@@ -126,7 +126,7 @@
 
       .action-primary {
         @include green-button();
-        float: flip(left, right);
+        @include float(left);
 
         .icon-add {
           @extend %t-icon7;
@@ -140,7 +140,7 @@
         @include grey-button();
         @extend %t-action3;
         @extend %t-regular;
-        float: flip(right, left);
+        @include float(right);
 
         .icon-delete {
           @extend %t-icon7;
@@ -226,16 +226,16 @@
       .task-input {
         display: inline-block;
         vertical-align: text-top;
-        float: flip(left, right);
+        @include float(left);
         margin-top: ($baseline/2);
-        #{$margin-right}: flex-gutter();
+        @include margin-right(flex-gutter());
       }
 
       .task-details {
         @extend %t-strong;
         display: inline-block;
         vertical-align: text-top;
-        float: flip(left, right);
+        @include float(left);
         width: flex-grid(6,9);
 
         .task-name {
@@ -264,7 +264,7 @@
         @include clearfix();
         display: inline-block;
         vertical-align: middle;
-        float: flip(right, left);
+        @include float(right);
         width: flex-grid(2,9);
         margin: ($baseline/2) 0 0 flex-gutter();
         opacity: 0.0;
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index c85e862410..2dcfb35648 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -66,16 +66,16 @@
       .title-2 {
         width: flex-grid(4, 9);
         margin: 0;
-        #{$margin-right}: flex-gutter();
-        float: flip(left, right);
+        @include margin-right(flex-gutter());
+        @include float(left);
       }
 
       .tip {
         @extend %t-copy-sub2;
         width: flex-grid(5, 9);
-        float: flip(right, left);
+        @include float(right);
         margin-top: ($baseline/2);
-        text-align: $right;
+        @include text-align(right);
         color: $gray-l2;
       }
     }
@@ -371,7 +371,7 @@
         }
 
         .field {
-          float: flip(left, right);
+          @include float(left);
           width: flex-grid(3, 9);
           margin-bottom: ($baseline/4);
           margin-right: flex-gutter();
@@ -383,7 +383,7 @@
           .tip {
             position: absolute;
             top: 0;
-            #{$right}: 0;
+            @include right(0);
           }
         }
       }
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index 97b2689198..5b04353791 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -203,7 +203,7 @@
       position: absolute;
       display: block;
       top: 0;
-      #{$right}: 0;
+      @include right(0);
       z-index: 11;
       width: 35px;
       height: 100%;
@@ -238,8 +238,8 @@
     .component-actions,
     .course-nav-item-actions {
       display: inline-block;
-      float: flip(right, left);
-      #{$margin-right}: ($baseline*2);
+      @include float(right);
+      @include margin-right($baseline*2);
       padding: 8px 0px;
       vertical-align: middle;
       text-align: center;
diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index c21160cf6e..eff594d0ca 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -29,7 +29,7 @@
         .textbook-title {
           @extend %t-title4;
           @extend %t-strong;
-          #{$margin-right}: ($baseline*14);
+          @include margin-right($baseline*14);
         }
 
         .ui-toggle-expansion {
@@ -83,7 +83,7 @@
           opacity: 0.0;
           position: absolute;
           top: $baseline;
-          #{$right}: $baseline;
+          @include right($baseline);
 
           .action {
             display: inline-block;
@@ -303,9 +303,9 @@
             display: block;
             width: 46%;
             border-bottom: none;
-            margin: flip(0 ($baseline*0.75) 0 0, 0 0 0 ($baseline*0.75));
+            @include margin(0 ($baseline*0.75) 0 0);
             padding: ($baseline/4) 0 0 0;
-            float: $left;
+            @include float(left);
             position: relative;
 
             input, textarea {
@@ -316,7 +316,7 @@
                 @extend %ui-btn-flat-outline;
                 position: absolute;
                 top: 3px;
-                #{$right}: 0;
+                @include right(0);
             }
 
           }
diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss
index 29c4dc5df5..0e0681cb7c 100644
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -164,8 +164,8 @@
 	width: 30%;
 	padding: 20px 30px;
 	margin: 0;
-	border-radius: flip(0 3px 3px 0, 3px 0 0 3px);
-	#{$border-left}: none;
+	@include border-radius(0 3px 3px 0);
+	@include border-left(none);
 	background: $lightGrey;
 
 	.title {
@@ -184,7 +184,7 @@
 
     .edit-icon,
     .delete-icon {
-      #{$margin-right}: 4px;
+      @include margin-right(4px);
     }
   }
 
diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss
index 2108877c07..783589e0e3 100644
--- a/cms/static/sass/views/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -121,7 +121,7 @@
       // ELEM: item - metadata
       .item-metadata {
         width: flex-grid(5, 9);
-        #{$margin-right}: flex-gutter();
+        @include margin-right(flex-gutter());
 
         .user-username, .user-email {
           display: inline-block;
@@ -132,7 +132,7 @@
           @include transition(color $tmg-f2 ease-in-out 0s);
           @extend %t-title4;
           @extend %t-strong;
-          margin: flip(0 ($baseline/2) ($baseline/10) 0, 0 0 ($baseline/10) ($baseline/2));
+          @include margin(0 ($baseline/2) ($baseline/10) 0);
           color: $gray-d4;
         }
 
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 1ec4def880..3af3397ba8 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -61,7 +61,7 @@ div.problem {
     width: 100px;
 
     label {
-      float: flip(left, right);
+      @include float(left);
       clear: both;
       margin-bottom: 5px;
 
@@ -81,23 +81,23 @@ div.problem {
     }
 
     .indicator_container {
-      float: flip(left, right);
+      @include float(left);
       width: 25px;
       height: 1px;
-      #{$margin-right}: 15px;
+      @include margin-right(15px);
     }
 
     fieldset {
       @include box-sizing(border-box);
       margin: 0px 0px $baseline;
-      #{$padding-left}: $baseline;
-      #{$border-left}: 1px solid #ddd;
+      @include padding-left($baseline);
+      @include border-left(1px solid #ddd);
     }
 
     input[type="radio"],
     input[type="checkbox"] {
-      float: flip(left, right);
-      margin: flip(4px 8px 0 0, 4px 0 0 8px);
+      @include float(left);
+      @include margin(4px 8px 0 0);
     }
 
     text {
@@ -634,7 +634,7 @@ div.problem {
       // margin-top: 10px;
       display: inline-block;
       margin-top: 8px;
-      #{$margin-left}: $baseline/2;
+      @include margin-left($baseline/2);
       color: #666;
       font-style: italic;
       -webkit-font-smoothing: antialiased;
diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss
index 47d7b6cddb..deaa5fb578 100644
--- a/common/lib/xmodule/xmodule/css/sequence/display.scss
+++ b/common/lib/xmodule/xmodule/css/sequence/display.scss
@@ -293,29 +293,38 @@ nav.sequence-nav {
         }
       }
 
-      $prev-icon: url('../images/sequence-nav/previous-icon.png');
-      $next-icon: url('../images/sequence-nav/next-icon.png');
-
       &.prev {
-        left: flip(-10px, auto);
-        right: flip(auto, -10px);
-        border-radius: flip(35px 0 0 35px, 0 35px 35px 0);
+        @include left(-10px);
+        @include border-radius(35px 0 0 35px);
 
         a {
-          background-image: flip($prev-icon, $next-icon);
           background-position: center 15px;
+
+          @include ltr {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
+
+          @include rtl {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
         }
       }
 
       &.next {
-        left: flip(auto, -10px);
-        right: flip(-10px, auto);
-        border-radius: flip(0 35px 35px 0, 35px 0 0 35px);
+        @include right(-10px);
+        @include border-radius(0 35px 35px 0);
 
         a {
-          #{$margin-left}: 30px;
-          background-image: flip($next-icon, $prev-icon);
+          @include margin-left(30px);
           background-position: center 15px;
+
+          @include ltr {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
+
+          @include rtl {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
         }
       }
     }
@@ -339,7 +348,7 @@ nav.sequence-bottom {
     display: inline-block;
 
     li {
-      float: flip(left, right);
+      @include float(left);
       width: 50px;
       height: 44px;
       border: 1px solid #ccc;
@@ -373,25 +382,36 @@ nav.sequence-bottom {
 */        }
       }
 
-      $prev-icon: url('../images/sequence-nav/previous-icon.png');
-      $next-icon: url('../images/sequence-nav/next-icon.png');
-
       &.prev {
-        border-radius: flip(35px 0 0 35px, 0 35px 35px 0);
+        @include border-radius(35px 0 0 35px);
 
         a {
-          background-image: flip($prev-icon, $next-icon);
           background-position: center 15px;
+
+          @include ltr {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
+
+          @include rtl {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
         }
       }
 
       &.next {
-        border-radius: flip(0 35px 35px 0, 35px 0 0 35px);
-        #{$border-left}: none;
+        @include border-radius(0 35px 35px 0);
+        @include border-left(none);
 
         a {
-          background-image: flip($next-icon, $prev-icon);
           background-position: center 15px;
+
+          @include ltr {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
+
+          @include rtl {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
         }
       }
     }
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 55d61c4ab9..2c71bcd2a3 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -1,34 +1,6 @@
 // studio - utilities - mixins and extends
 // ====================
 
-// right to left mixins and variables
-// thanks to https://gist.github.com/Integralist/7269907
-@function flip($value_ltr, $value_rtl) {
-  @if $rtl { @return $value_rtl; }
-  @else { @return $value_ltr; }
-}
-
-$padding-left:    padding-left;
-$padding-right:   padding-right;
-$margin-left:     margin-left;
-$margin-right:    margin-right;
-$border-left:     border-left;
-$border-right:    border-right;
-$left:            left;
-$right:           right;
-
-@if $rtl {
-  $padding-left:  padding-right;
-  $padding-right: padding-left;
-  $margin-left:   margin-right;
-  $margin-right:  margin-left;
-  $border-left:   border-right;
-  $border-right:  border-left;
-  $left:          right;
-  $right:         left;
-}
-
-
 // mixins - font sizing
 @mixin font-size($sizeValue: 16){
   font-size: $sizeValue + px;
@@ -118,13 +90,13 @@ $right:           right;
 // layout placeholders
 %ui-col-wide  {
   width: flex-grid(9, 12);
-  #{$margin-right}: flex-gutter();
-  float: flip(left, right);
+  @include margin-right(flex-gutter());
+  @include float(left);
 }
 
 %ui-col-narrow  {
   width: flex-grid(3, 12);
-  float: flip(left, right);
+  @include float(left);
 }
 
 
diff --git a/lms/envs/common.py b/lms/envs/common.py
index ca8eb6247f..a37c3915a9 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1069,6 +1069,25 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-app-extend2.css',
     },
+    'style-app-rtl': {
+        'source_filenames': [
+            'sass/application-rtl.css',
+            'sass/ie-rtl.css'
+        ],
+        'output_filename': 'css/lms-style-app-rtl.css',
+    },
+    'style-app-extend1-rtl': {
+        'source_filenames': [
+            'sass/application-extend1-rtl.css',
+        ],
+        'output_filename': 'css/lms-style-app-extend1-rtl.css',
+    },
+    'style-app-extend2-rtl': {
+        'source_filenames': [
+            'sass/application-extend2-rtl.css',
+        ],
+        'output_filename': 'css/lms-style-app-extend2-rtl.css',
+    },
     'style-course-vendor': {
         'source_filenames': [
             'js/vendor/CodeMirror/codemirror.css',
@@ -1084,6 +1103,13 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-course.css',
     },
+    'style-course-rtl': {
+        'source_filenames': [
+            'sass/course-rtl.css',
+            'xmodule/modules.css',
+        ],
+        'output_filename': 'css/lms-style-course-rtl.css',
+    },
     'style-xmodule-annotations': {
         'source_filenames': [
             'css/vendor/ova/annotator.css',
diff --git a/lms/static/sass/application-extend1-rtl.scss b/lms/static/sass/application-extend1-rtl.scss
new file mode 100644
index 0000000000..84cfce127b
--- /dev/null
+++ b/lms/static/sass/application-extend1-rtl.scss
@@ -0,0 +1,53 @@
+/*
+ * This file is dynamically generated and ignored by Git.
+ * DO NOT MAKE CHANGES HERE. Instead, go edit its template:
+ * /edx/app/edxapp/edx-platform/lms/static/sass/application-extend1-rtl.scss.mako
+ */
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/config';
+@import 'base/variables';
+@import 'base/mixins';
+
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// shared - platform
+@import 'multicourse/home';
+@import 'multicourse/dashboard';
+@import 'multicourse/account';
+@import 'multicourse/courses';
+@import 'multicourse/course_about';
+@import 'multicourse/jobs';
+@import 'multicourse/media-kit';
+@import 'multicourse/about_pages';
+@import 'multicourse/press_release';
+@import 'multicourse/error-pages';
+@import 'multicourse/help';
+@import 'multicourse/edge';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
diff --git a/lms/static/sass/application-extend1-rtl.scss.mako b/lms/static/sass/application-extend1-rtl.scss.mako
new file mode 100644
index 0000000000..ae9b76b03e
--- /dev/null
+++ b/lms/static/sass/application-extend1-rtl.scss.mako
@@ -0,0 +1,62 @@
+## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/config';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// shared - platform
+@import 'multicourse/home';
+@import 'multicourse/dashboard';
+@import 'multicourse/account';
+@import 'multicourse/courses';
+@import 'multicourse/course_about';
+@import 'multicourse/jobs';
+@import 'multicourse/media-kit';
+@import 'multicourse/about_pages';
+@import 'multicourse/press_release';
+@import 'multicourse/error-pages';
+@import 'multicourse/help';
+@import 'multicourse/edge';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution
diff --git a/lms/static/sass/application-extend1.scss.mako b/lms/static/sass/application-extend1.scss.mako
index ead0570306..3b1f32a8c4 100644
--- a/lms/static/sass/application-extend1.scss.mako
+++ b/lms/static/sass/application-extend1.scss.mako
@@ -1,11 +1,11 @@
 ## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
 
-
 // lms - css application architecture (platform)
 // ====================
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 // BASE  *default edX offerings*
 // ====================
diff --git a/lms/static/sass/application-extend2-rtl.scss b/lms/static/sass/application-extend2-rtl.scss
new file mode 100644
index 0000000000..d9f7938dc6
--- /dev/null
+++ b/lms/static/sass/application-extend2-rtl.scss
@@ -0,0 +1,61 @@
+/*
+ * This file is dynamically generated and ignored by Git.
+ * DO NOT MAKE CHANGES HERE. Instead, go edit its template:
+ * /edx/app/edxapp/edx-platform/lms/static/sass/application-extend2-rtl.scss.mako
+ */
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/config';
+@import 'base/variables';
+@import 'base/mixins';
+
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+@import 'elements/system-feedback';
+
+// base - specific views
+@import 'views/verification';
+@import 'views/shoppingcart';
+
+// applications
+@import "discussion/utilities/variables";
+@import "discussion/mixins";
+@import 'discussion/discussion'; // Process old file after definitions but before everything else
+@import "discussion/elements/actions";
+@import "discussion/elements/editor";
+@import "discussion/elements/labels";
+@import "discussion/elements/navigation";
+@import "discussion/views/thread";
+@import "discussion/views/create-edit-post";
+@import "discussion/views/response";
+@import 'discussion/utilities/developer';
+@import 'discussion/utilities/shame';
+
+@import 'news';
+
+// temp - shame and developer
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
diff --git a/lms/static/sass/application-extend2-rtl.scss.mako b/lms/static/sass/application-extend2-rtl.scss.mako
new file mode 100644
index 0000000000..5d0faeea4f
--- /dev/null
+++ b/lms/static/sass/application-extend2-rtl.scss.mako
@@ -0,0 +1,70 @@
+## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/config';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+@import 'elements/system-feedback';
+
+// base - specific views
+@import 'views/verification';
+@import 'views/shoppingcart';
+
+// applications
+@import "discussion/utilities/variables";
+@import "discussion/mixins";
+@import 'discussion/discussion'; // Process old file after definitions but before everything else
+@import "discussion/elements/actions";
+@import "discussion/elements/editor";
+@import "discussion/elements/labels";
+@import "discussion/elements/navigation";
+@import "discussion/views/thread";
+@import "discussion/views/create-edit-post";
+@import "discussion/views/response";
+@import 'discussion/utilities/developer';
+@import 'discussion/utilities/shame';
+
+@import 'news';
+
+// temp - shame and developer
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution
diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako
index 5a086c934f..ea8626aab5 100644
--- a/lms/static/sass/application-extend2.scss.mako
+++ b/lms/static/sass/application-extend2.scss.mako
@@ -1,11 +1,11 @@
 ## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
 
-
 // lms - css application architecture (platform)
 // ====================
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 // BASE  *default edX offerings*
 // ====================
diff --git a/lms/static/sass/application-rtl.scss b/lms/static/sass/application-rtl.scss
new file mode 100644
index 0000000000..9d71cb5891
--- /dev/null
+++ b/lms/static/sass/application-rtl.scss
@@ -0,0 +1,49 @@
+/*
+ * This file is dynamically generated and ignored by Git.
+ * DO NOT MAKE CHANGES HERE. Instead, go edit its template:
+ * /edx/app/edxapp/edx-platform/lms/static/sass/application-rtl.scss.mako
+ */
+
+// lms - css application architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/config';
+@import 'base/variables';
+@import 'base/mixins';
+
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// shared - course
+@import 'shared/forms';
+@import 'shared/footer';
+@import 'shared/header';
+@import 'shared/course_object';
+@import 'shared/course_filter';
+@import 'shared/modal';
+@import 'shared/activation_messages';
+@import 'shared/unsubscribe';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
diff --git a/lms/static/sass/application-rtl.scss.mako b/lms/static/sass/application-rtl.scss.mako
new file mode 100644
index 0000000000..c696c60e08
--- /dev/null
+++ b/lms/static/sass/application-rtl.scss.mako
@@ -0,0 +1,58 @@
+## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/config';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// shared - course
+@import 'shared/forms';
+@import 'shared/footer';
+@import 'shared/header';
+@import 'shared/course_object';
+@import 'shared/course_filter';
+@import 'shared/modal';
+@import 'shared/activation_messages';
+@import 'shared/unsubscribe';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution
diff --git a/lms/static/sass/application.scss.mako b/lms/static/sass/application.scss.mako
index 041f9b02b0..f179fbb36b 100644
--- a/lms/static/sass/application.scss.mako
+++ b/lms/static/sass/application.scss.mako
@@ -5,6 +5,7 @@
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 // BASE  *default edX offerings*
 // ====================
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index 125c1b3d36..c8af654c39 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -1,33 +1,6 @@
 // lms - utilities - mixins and extends
 // ====================
 
-// right to left mixins and variables
-// thanks to https://gist.github.com/Integralist/7269907
-@function flip($value_ltr, $value_rtl) {
-  @if $rtl { @return $value_rtl; }
-  @else { @return $value_ltr; }
-}
-
-$padding-left:    padding-left;
-$padding-right:   padding-right;
-$margin-left:     margin-left;
-$margin-right:    margin-right;
-$border-left:     border-left;
-$border-right:    border-right;
-$left:            left;
-$right:           right;
-
-@if $rtl {
-  $padding-left:  padding-right;
-  $padding-right: padding-left;
-  $margin-left:   margin-right;
-  $margin-right:  margin-left;
-  $border-left:   border-right;
-  $border-right:  border-left;
-  $left:          right;
-  $right:         left;
-}
-
 // mixins - font sizing
 @mixin font-size($sizeValue: 16){
   font-size: $sizeValue + px;
diff --git a/lms/static/sass/course-rtl.scss b/lms/static/sass/course-rtl.scss
new file mode 100644
index 0000000000..efdc274223
--- /dev/null
+++ b/lms/static/sass/course-rtl.scss
@@ -0,0 +1,70 @@
+/*
+ * This file is dynamically generated and ignored by Git.
+ * DO NOT MAKE CHANGES HERE. Instead, go edit its template:
+ * /edx/app/edxapp/edx-platform/lms/static/sass/course-rtl.scss.mako
+ */
+@import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+@import 'base/reset';
+@import 'base/font_face';
+@import 'base/variables';
+@import 'base/mixins';
+
+
+@import 'base/base';
+@import 'base/extends';
+@import 'base/animations';
+@import 'shared/tooltips';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// Course base / layout styles
+@import 'course/layout/courseware_header';
+@import 'course/layout/footer';
+@import 'course/base/mixins';
+@import 'course/base/base';
+@import 'course/base/extends';
+@import 'xmodule/modules/css/module-styles.scss';
+
+// courseware
+@import 'course/courseware/courseware';
+@import 'course/courseware/sidebar';
+@import 'course/courseware/amplifier';
+@import 'course/layout/calculator';
+@import 'course/layout/timer';
+@import 'course/layout/chat';
+
+// course-specific courseware (all styles in these files should be gated by a
+// course-specific class). This should be replaced with a better way of
+// providing course-specific styling.
+@import "course/courseware/courses/_cs188.scss";
+
+// wiki
+@import "course/wiki/basic-html";
+@import "course/wiki/sidebar";
+@import "course/wiki/create";
+@import "course/wiki/wiki";
+@import "course/wiki/table";
+
+// pages
+@import "course/info";
+@import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py
+@import "course/textbook";
+@import "course/profile";
+@import "course/gradebook";
+@import "course/tabs";
+@import "course/staff_grading";
+@import "course/rubric";
+@import "course/open_ended_grading";
+
+// instructor
+@import "course/instructor/instructor";
+@import "course/instructor/instructor_2";
+@import "course/instructor/email";
+@import "xmodule/descriptors/css/module-styles.scss";
+
+// discussion
+@import "course/discussion/form-wmd-toolbar";
diff --git a/lms/static/sass/course-rtl.scss.mako b/lms/static/sass/course-rtl.scss.mako
new file mode 100644
index 0000000000..05eaee88e8
--- /dev/null
+++ b/lms/static/sass/course-rtl.scss.mako
@@ -0,0 +1,77 @@
+@import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+@import 'base/reset';
+@import 'base/font_face';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+@import 'base/extends';
+@import 'base/animations';
+@import 'shared/tooltips';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// Course base / layout styles
+@import 'course/layout/courseware_header';
+@import 'course/layout/footer';
+@import 'course/base/mixins';
+@import 'course/base/base';
+@import 'course/base/extends';
+@import 'xmodule/modules/css/module-styles.scss';
+
+// courseware
+@import 'course/courseware/courseware';
+@import 'course/courseware/sidebar';
+@import 'course/courseware/amplifier';
+@import 'course/layout/calculator';
+@import 'course/layout/timer';
+@import 'course/layout/chat';
+
+// course-specific courseware (all styles in these files should be gated by a
+// course-specific class). This should be replaced with a better way of
+// providing course-specific styling.
+@import "course/courseware/courses/_cs188.scss";
+
+// wiki
+@import "course/wiki/basic-html";
+@import "course/wiki/sidebar";
+@import "course/wiki/create";
+@import "course/wiki/wiki";
+@import "course/wiki/table";
+
+// pages
+@import "course/info";
+@import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py
+@import "course/textbook";
+@import "course/profile";
+@import "course/gradebook";
+@import "course/tabs";
+@import "course/staff_grading";
+@import "course/rubric";
+@import "course/open_ended_grading";
+
+// instructor
+@import "course/instructor/instructor";
+@import "course/instructor/instructor_2";
+@import "course/instructor/email";
+@import "xmodule/descriptors/css/module-styles.scss";
+
+// discussion
+@import "course/discussion/form-wmd-toolbar";
diff --git a/lms/static/sass/course.scss.mako b/lms/static/sass/course.scss.mako
index 5a9c18a918..eb35050fe9 100644
--- a/lms/static/sass/course.scss.mako
+++ b/lms/static/sass/course.scss.mako
@@ -1,4 +1,5 @@
 @import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 @import 'base/reset';
 @import 'base/font_face';
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index bfb5438107..ae38f34279 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -80,7 +80,7 @@ div.info-wrapper {
   section.handouts {
     @extend .sidebar;
     border-radius: 0 4px 4px 0;
-    #{$border-left}: 1px solid #ddd;
+    @include border-left(1px solid #ddd);
     box-shadow: none;
     font-size: 14px;
 
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index 26a90fabc8..d5acd15d36 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -141,7 +141,7 @@
       margin-bottom: lh();
 
       h1 {
-        float: $left;
+        @include float(left);
         font-size: 1em;
         font-weight: 100;
         margin: 0;
@@ -188,7 +188,7 @@
         }
 
         h2 {
-          #{$border-right}: 1px dashed #ddd;
+          @include border-right(1px dashed #ddd);
           @include box-sizing(border-box);
           display: table-cell;
           letter-spacing: 0;
@@ -201,7 +201,7 @@
 
         .sections {
           display: table-cell;
-          #{$padding-left}: flex-gutter(9);
+          @include padding-left(flex-gutter(9));
           width: flex-grid(7, 9);
 
           > div {
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index c9fd7e4dbe..30b5cfaed7 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -6,7 +6,7 @@ body {
 }
 
 body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
-  text-align: $left;
+  @include text-align(left);
   font-family: $sans-serif;
 }
 
@@ -49,7 +49,7 @@ form {
 form.choicegroup {
   label {
     clear: both;
-    float: $left;
+    @include float(left);
   }
 }
 
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index 934e9e45d1..1425a9efc4 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -1,6 +1,6 @@
 h1.top-header {
   border-bottom: 1px solid $border-color-2;
-  text-align: $left;
+  @include text-align(left);
   font-size: em(24);
   font-weight: 100;
   padding-bottom: lh();
diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss
index dd8b98eea5..3c220ac7f0 100644
--- a/lms/static/sass/course/base/_mixins.scss
+++ b/lms/static/sass/course/base/_mixins.scss
@@ -1,28 +1,3 @@
-// right to left mixins and variables
-@function flip($value_ltr, $value_rtl) {
-  @if $rtl { @return $value_rtl; }
-  @else { @return $value_ltr; }
-}
-
-$padding-left:    padding-left;
-$padding-right:   padding-right;
-$margin-left:     margin-left;
-$margin-right:    margin-right;
-$border-left:     border-left;
-$border-right:    border-right;
-$left:            left;
-$right:           right;
-
-@if $rtl {
-  $padding-left:  padding-right;
-  $padding-right: padding-left;
-  $margin-left:   margin-right;
-  $margin-right:  margin-left;
-  $border-left:   border-right;
-  $border-right:  border-left;
-  $left:          right;
-  $right:         left;
-}
 
 @mixin blue-button {
   display: block;
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index ead47c5c4e..6c8c3edc85 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -23,7 +23,7 @@ html.video-fullscreen{
 
   .instructor-info-action {
     @extend %t-copy-sub2;
-    float: flip(right, left);
+    @include float(left);
     margin-left: ($baseline/2);
     padding: ($baseline/4) ($baseline/2);
     border-radius: ($baseline/4);
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index b68c7146d0..5c471aad51 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -1,8 +1,8 @@
 .course-index {
   @extend .sidebar;
   @extend .tran;
-  border-radius: flip(3px 0 0 3px, 0 3px 3px 0);
-  #{$border-right}: 1px solid $border-color-2;
+  @include border-right(1px solid $border-color-2);
+  @include border-radius(3px 0 0 3px);
 
   #open_close_accordion {
     display: none;
@@ -47,7 +47,7 @@
         a {
           border-radius: 0;
           box-shadow: none;
-          #{$padding-left}: 19px;
+          @include padding-left(19px);
           color: $link-color;
         }
 
@@ -61,13 +61,18 @@
         }
 
         span.ui-icon {
-          left: flip(0, auto);
-          right: flip(0, auto);
-          background-image: url("/static/images/ui-icons_222222_256x240.png");
+          @include left(0);
           opacity: 0.3;
+          background-image: url("/static/images/ui-icons_222222_256x240.png");  // jQuery UI sprite
 
-          &.ui-icon-triangle-1-e { // jQuery UI east arrow
-            background-position: flip(-32px -16px, -96px -16px); // flip(jQuery UI east arrow, jQuery UI west arrow)
+          &.ui-icon-triangle-1-e {
+            @include ltr {
+              background-position: -32px -16px; // jQuery UI east arrow position
+            }
+
+            @include rtl {
+              background-position: -96px -16px; // jQuery UI west arrow position
+            }
           }
         }
       }
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index 434ca846a5..6bc0618bdd 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 {
         input[type="button"].add {
           @include idashbutton($blue);
           position: absolute;
-          #{$right}: $baseline;
+          @include right($baseline);
         }
       }
 
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index 288d3a50e1..fb8335f0dd 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -19,7 +19,7 @@ nav.course-material {
     margin-left: 10px;
 
     li {
-      float: $left;
+      @include float(left);
       list-style: none;
       margin-right: 6px;
 
@@ -120,7 +120,7 @@ header.global.slim {
 
   h1.logo {
     margin: 0 10px 0 13px;
-    #{$padding-right}: 20px;
+    @include padding-right(20px);
 
     &:before {
       @extend %faded-vertical-divider;
@@ -128,7 +128,7 @@ header.global.slim {
       display: block;
       height: 35px;
       position: absolute;
-      #{$right}: 3px;
+      @include right(3px);
       top: 0;
       width: 1px;
     }
@@ -156,7 +156,7 @@ header.global.slim {
   h2 {
     display: block;
     width: 700px;
-    float: flip(left, right);
+    @include float(left);
     font-size: 0.9em;
     font-weight: 600;
     color: $lighter-base-font-color;
diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss
index 2fbb149bf8..003424c969 100644
--- a/lms/static/sass/course/layout/_courseware_subnav.scss
+++ b/lms/static/sass/course/layout/_courseware_subnav.scss
@@ -18,7 +18,7 @@ nav.course-material {
     padding: 10px 0 0 0;
 
     li {
-      float: $left;
+      @include float(left);
       list-style: none;
 
       a {
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index 42b012ef75..62e8987bed 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -12,7 +12,7 @@ body.discussion {
 
     .new-post-icon {
       margin-top: 8px;
-      #{$margin-right}: 7px;
+      @include margin-right(7px);
       font-size: 16px;
       vertical-align: middle;
       color: $white;
@@ -242,7 +242,7 @@ body.discussion {
   }
 
   .discussion-column {
-    float: flip(right, left);
+    @include float(right);
     @include box-sizing(border-box);
     width: 68%;
     max-width: 800px;
@@ -369,7 +369,7 @@ body.discussion {
         .notification-checkbox {
           display: inline-block;
           padding: $baseline/4 0 $baseline/2 0;
-          #{$margin-right}: $baseline/2;
+          @include margin-right($baseline/2);
           border-radius: 5px;
           border: 1px solid gray;
 
@@ -377,7 +377,7 @@ body.discussion {
             display: inline-block;
             text-align: center;
             vertical-align: middle;
-            #{$margin-left}: $baseline/2;
+            @include margin-right($baseline/2);
           }
 
           .icon {
@@ -535,8 +535,8 @@ body.discussion {
 
       .response-body {
         ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
-          #{$padding-left}: 40px;
-          #{$padding-right}: 0;
+          @include padding-left(40px);
+          @include padding-right(0);
         }
       }
     }
@@ -557,15 +557,21 @@ body.discussion {
       padding: 0 18px;
       width: 100%;
       box-shadow: 0 1px 1px $shadow-l1;
-      text-align: $left;
+      @include text-align(left);
       font-size: 13px;
 
-      .icon-reply:before {
-        content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward
+      .icon-reply:before { // flip the icon for RTL
+        @include ltr {
+          content: "\f112"; // FA icon arrow to the left
+        }
+
+        @include rtl {
+          content: "\f064"; // FA icon arrow to the right
+        }
       }
 
       span.add-response-btn-text {
-        #{$padding-left}: ($baseline/5);
+        @include padding-left($baseline/5);
       }
     }
   }
@@ -650,7 +656,7 @@ body.discussion {
 
   .discussion-submit-post {
     @include blue-button;
-    float: $left;
+    @include float(left);
   }
 
   .wmd-button {
@@ -686,10 +692,16 @@ body.discussion {
       padding-left: ($baseline*1.5);
       width: 100%;
       box-shadow: 0 1px 1px $shadow-l1;
-      text-align: $left;
+      @include text-align(left);
 
       .icon-reply:before {
-        content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward
+        @include ltr {
+          content: "\f112"; // FA icon arrow to the left
+        }
+
+        @include rtl {
+          content: "\f064"; // FA icon arrow to the right
+        }
       }
 
       &:hover, &:focus {
@@ -912,9 +924,9 @@ body.discussion {
     width: 16px;
     height: 17px;
     margin-top: 8px;
-    #{$margin-right}: 7px;
+    @include margin-right(7px);
     font-size: 16px;
-    #{$padding-right}: $baseline/2;
+    @include padding-right($baseline/2);
     vertical-align: middle;
     color: $white;
   }
diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss
index f4d12f93e8..26f173f542 100644
--- a/lms/static/sass/discussion/_mixins.scss
+++ b/lms/static/sass/discussion/_mixins.scss
@@ -89,7 +89,7 @@
 
 @mixin discussion-wmd-preview-label {
   padding-top: 3px;
-  #{$padding-left}: 5px;
+  @include padding-left(5px);
   width: 100%;
   color: #bbb;
   text-transform: uppercase;
@@ -102,8 +102,8 @@
   color: #333;
 
   ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places
-    #{$padding-left}: 40px;
-    #{$padding-right}: 0;
+    @include padding-left(40px);
+    @include padding-right(0);
   }
 }
 
@@ -135,11 +135,11 @@
   color: $color;
 
   .icon {
-    #{$margin-right}: ($baseline/5);
+    @include margin-right($baseline/5);
   }
 
   &:last-child {
-    #{$margin-right}: 0;
+    @include margin-right(0);
   }
 
   &.is-hidden {
diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss
index fa5e9e2dfe..5a8ff68a03 100644
--- a/lms/static/sass/discussion/elements/_actions.scss
+++ b/lms/static/sass/discussion/elements/_actions.scss
@@ -8,7 +8,7 @@
   .response-actions-list,
   .comment-actions-list {
     @extend %ui-no-list;
-    text-align: $right;
+    @include text-align(right);
 
     .actions-item {
       @include box-sizing(border-box);
@@ -58,7 +58,7 @@
       &:after,
       &:before {
         bottom: 100%;
-        #{$right}: 3px;
+        @include right(3px);
         border: solid transparent;
         content: " ";
         height: 0;
@@ -71,7 +71,7 @@
         border-color: $transparent;
         border-bottom-color: $white;
         border-width: 6px;
-        #{$margin-right}: 1px;
+        @include margin-right(1px);
       }
 
       &:before {
@@ -254,7 +254,7 @@
       display: block;
       padding: ($baseline/10) 0;
       white-space: nowrap;
-      text-align: $right;
+      @include text-align(right);
       color: $gray-l1;
 
       &:hover, &:focus {
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index d983d26acb..48b18d8a0f 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -3,7 +3,7 @@
 
 .forum-nav {
   @include box-sizing(border-box);
-  float: flip(left, right);
+  @include float(left);
   position: relative;
   width: 31%;
   border: 1px solid #aaa;
@@ -34,7 +34,7 @@
 
   .icon {
     @include font-size(14);
-    #{$margin-right}: ($baseline/4);
+    @include margin-right($baseline/4);
   }
 }
 
@@ -43,7 +43,7 @@
 }
 
 .forum-nav-browse-drop-arrow {
-  #{$margin-left}: ($baseline/4);
+  @include margin-left($baseline/4);
 }
 
 .forum-nav-search {
@@ -60,7 +60,7 @@
   position: absolute;
   margin-top: -6px;
   top: 50%;
-  #{$right}: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
+  @include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
 }
 
 .forum-nav-search-input {
@@ -115,7 +115,7 @@
 }
 
 .forum-nav-browse-title .icon {
-  #{$margin-right}: ($baseline/2);
+  @include margin-right($baseline/2);
 }
 
 // -------------------
@@ -135,14 +135,14 @@
   @include box-sizing(border-box);
   display: inline-block;
   width: 50%;
-  text-align: $left;
+  @include text-align(left);
 }
 
 .forum-nav-filter-cohort, .forum-nav-sort {
   @include box-sizing(border-box);
   display: inline-block;
   width: 50%;
-  text-align: $right;
+  @include text-align(right);
 }
 
 %forum-nav-select {
@@ -202,7 +202,10 @@
     @include font-size(14);
 
     &:before {
-      @include transform(scale(flip(1, -1), 1)); // RTL for font awesome question mark
+
+      @include rtl {
+        @include transform(scale(-1, 1)); // RTL for font awesome question mark
+      }
     }
   }
 
@@ -227,7 +230,7 @@
 .forum-nav-thread-wrapper-2 {
   @extend %forum-nav-thread-wrapper;
   width: 13%;
-  text-align: $right;
+  @include text-align(right);
 }
 
 .forum-nav-thread-title {
@@ -255,7 +258,7 @@
   @extend %forum-nav-thread-wrapper-2-content;
   @extend %t-weight4;
   position: relative;
-  #{$margin-left}: ($baseline/4);
+  @include margin-left($baseline/4);
   margin-bottom: ($baseline/4); // Because tail is position: absolute
   border-radius: 2px;
   padding: ($baseline/10) ($baseline/5);
@@ -268,13 +271,12 @@
     display: block;
     position: absolute;
     bottom: (-$baseline/4);
-    #{$right}: ($baseline/4);
+    @include right($baseline/4);
     width: 0;
     height: 0;
     border-style: solid;
-
-    border-width: flip(0 ($baseline/4) ($baseline/4) 0, ($baseline/4) ($baseline/4) 0 0);
-    border-color: flip(transparent $gray-l3 transparent transparent, $gray-l3 transparent transparent transparent);
+    @include border-width(0, ($baseline/4), ($baseline/4), 0);
+    @include border-color(transparent, $gray-l3, transparent, transparent);
   }
 
   &.is-unread {
diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss
index 3cd9cf009e..ee0f0071d3 100644
--- a/lms/static/sass/discussion/views/_thread.scss
+++ b/lms/static/sass/discussion/views/_thread.scss
@@ -17,7 +17,7 @@ body.discussion, .discussion-module {
 
     .post-header-actions {
       display: inline-block;
-      float: $right;
+      @include float(right);
       vertical-align: middle;
       width: flex-grid(3,12);
     }
@@ -44,7 +44,7 @@ body.discussion, .discussion-module {
 
     .response-header-actions {
       width: flex-grid(3,12);
-      float: $right;
+      @include float(right);
     }
   }
 
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 6ce02ffcd4..0c4243dce7 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -123,16 +123,16 @@
       // CASE: normal typographical headings
       h1 {
         @extend %heading-2;
+        @include text-align(left);
         margin-bottom: $baseline;
         padding-bottom: $baseline;
-        text-align: flip(left, right);
       }
 
       // CASE: marketing/imageery-based headings
       .title {
         position: absolute;
         top: ($baseline*2.5);
-        #{$left}:($baseline*1.5);
+        @include left($baseline*1.5);
 
         .title-super, .title-sub {
           @extend %t-weight1;
@@ -149,7 +149,7 @@
 
         .title-sub {
           @include font-size(20);
-          #{$margin-left}: ($baseline*2);
+          @include margin-left($baseline*2);
           text-transform: lowercase;
           color: $header-graphic-sub-color;
         }
@@ -197,14 +197,14 @@
   }
 
   .content {
-    #{$margin-right}: ($baseline*2);
+    @include float(left);
+    @include margin-right($baseline*2);
     width: 600px;
-    float: flip(left, right);
   }
 
   aside {
+    @include float(left);
     width: 280px;
-    float: flip(left, right);
 
     p, ol, ul {
       font-size: 14px !important;
@@ -273,11 +273,10 @@
       margin: 0 0 $baseline 0;
 
       .field {
+        @include float(left);
+        @include margin(0, ($baseline*1.5), 0, 0);
         display: block;
-        float: flip(left, right);
         border-bottom: none;
-        margin: 0;
-        #{$margin-right}: ($baseline*1.5);
         padding-bottom: 0;
 
         input, textarea {
@@ -337,7 +336,7 @@
         .tip {
           position: absolute;
           top: 0;
-          #{$right}: 0;
+          @include right(0);
         }
       }
 
@@ -379,7 +378,7 @@
         input[type="checkbox"] {
           display: inline-block;
           width: auto;
-          #{$margin-right}: ($baseline/4);
+          @include margin-right($baseline/4);
         }
 
         label {
@@ -703,7 +702,7 @@
 
       h2 {
         @extend %heading-2;
-        text-align: flip(left, right);
+        @include text-align(left);
       }
     }
 
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index e7446be9be..ecd7426ba4 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -295,7 +295,7 @@
   }
 
   .details {
-    float: flip(left, right);
+    @include float(left);
     margin-right: flex-gutter();
     width: flex-grid(8);
     font: normal 1em/1.6em $serif;
@@ -384,7 +384,7 @@
 
   .course-sidebar {
     @include box-sizing(border-box);
-    float: flip(left, right);
+    @include float(left);
     width: flex-grid(4);
 
     > section {
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index be433464c3..092fab4c20 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -42,10 +42,10 @@
 
         .logo {
           display: inline-block;
-          #{$border-right}: 1px solid $light-gray;
+          @include border-right(1px solid $light-gray);
           height: 80px;
-          #{$margin-right}: 30px;
-          #{$padding-right}: 30px;
+          @include margin-right(30px);
+          @include padding-right(30px);
           position: relative;
           vertical-align: middle;
 
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 9438440050..fb9f15368e 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -7,8 +7,8 @@
 
   .profile-sidebar {
     background: transparent;
-    float: flip(left, right);
-    #{$margin-right}: flex-gutter();
+    @include float(left);
+    @include margin-right(flex-gutter());
     width: flex-grid(3);
     background: transparent;
     box-shadow: 0 0 1px $shadow-l1;
@@ -279,7 +279,7 @@
 
   // course listings
   .my-courses {
-    float: flip(left, right);
+    @include float(left);
     margin: 0px;
     width: flex-grid(9);
 
@@ -356,7 +356,7 @@
         @include transition(all 0.15s linear 0s);
         overflow: hidden;
         position: relative;
-        float: flip(left, right);
+        @include float(left);
         height: 100%;
         max-height: 100%;
         width: 200px;
@@ -375,7 +375,7 @@
 
       .info {
         @include clearfix;
-        padding: flip(0 10px 0 230px, 0 230px 0 10px);
+        @include padding(0, 10px, 0, 230px);
 
         > hgroup {
           padding: 0;
@@ -394,7 +394,7 @@
           .date-block {
             position: absolute;
             top: 0;
-            #{$right}: 0;
+            @include right(0);
             font-family: $sans-serif;
             font-size: 13px;
             font-style: italic;
diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss
index a860be8eac..1854ff8103 100644
--- a/lms/static/sass/multicourse/_error-pages.scss
+++ b/lms/static/sass/multicourse/_error-pages.scss
@@ -1,13 +1,13 @@
 section.outside-app {
   @extend .container;
-  text-align: flip(left, right);
+  @include text-align(left);
   padding: 80px 0;
 
   h1 {
     @extend h2;
     margin-bottom: 40px;
   }
-  
+
   p {
     max-width: 600px;
     margin: 0 auto;
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index edaa3d6ac6..ddda7b9d2f 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -5,11 +5,11 @@
 
     .university-column {
       width: flex-grid(4);
-      #{$margin-right}t: flex-gutter();
+      @include margin-right(flex-gutter());
       float: left;
 
       &:nth-child(3n+3) {
-        #{$margin-right}: 0;
+        @include margin-right(0);
       }
     }
 
@@ -21,11 +21,11 @@
 
       .courses-listing-item {
         width: flex-grid(4);
-        #{$margin-right}: flex-gutter();
-        float: flip(left, right);
+        @include margin-right(flex-gutter());
+        @include float(left);
 
         &:nth-child(3n+3) {
-          #{$margin-right}: 0;
+          @include margin-right(0);
         }
       }
     }
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 66297d1648..5580ff06e4 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -17,8 +17,8 @@ header.global {
   }
 
   h1.logo {
-    float: flip(left, right);
-    margin: flip(-2px 39px 0 0, -2px 0 0 39px);
+    @include float(left);
+    @include margin(-2px, 39px, 0, 0);
     position: relative;
 
     a {
@@ -27,11 +27,11 @@ header.global {
   }
 
   .left {
-    float: flip(left, right);
+    @include float(left);
   }
 
   .guest {
-    float: flip(right, left);
+    @include float(right);
   }
 
   > li {
@@ -104,7 +104,7 @@ header.global {
   }
 
   .user {
-    float: flip(right,left);
+    @include float(right);
     margin-top: 4px;
 
     > .primary {
@@ -194,7 +194,7 @@ header.global {
         height: 0px;
         position: absolute;
         @include transform(rotate(-45deg));
-        #{$right}: 12px;
+        @include right(12px);
         top: -6px;
         width: 0px;
       }
@@ -236,7 +236,7 @@ header.global {
   .nav-global {
     margin-top: ($baseline/2);
     list-style: none;
-    float: left;
+    @include float(left);
 
     li,
     div {
@@ -279,7 +279,7 @@ header.global {
   }
 
   .nav-courseware {
-    float: $right;
+    @include float(right);
     margin-top: ($baseline/4);
     list-style: none;
 
diff --git a/lms/static/sass/vendor/bi-app/_bi-app-ltr.scss b/lms/static/sass/vendor/bi-app/_bi-app-ltr.scss
new file mode 100755
index 0000000000..6278a31380
--- /dev/null
+++ b/lms/static/sass/vendor/bi-app/_bi-app-ltr.scss
@@ -0,0 +1,11 @@
+// ------------------------------------------
+// left to right module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-ltr';
+@import 'mixins';
\ No newline at end of file
diff --git a/lms/static/sass/vendor/bi-app/_bi-app-rtl.scss b/lms/static/sass/vendor/bi-app/_bi-app-rtl.scss
new file mode 100755
index 0000000000..17b7f2e90f
--- /dev/null
+++ b/lms/static/sass/vendor/bi-app/_bi-app-rtl.scss
@@ -0,0 +1,11 @@
+// ------------------------------------------
+// right to left module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-rtl';
+@import 'mixins';
\ No newline at end of file
diff --git a/lms/static/sass/vendor/bi-app/_mixins.scss b/lms/static/sass/vendor/bi-app/_mixins.scss
new file mode 100755
index 0000000000..353999671d
--- /dev/null
+++ b/lms/static/sass/vendor/bi-app/_mixins.scss
@@ -0,0 +1,294 @@
+// ------------------------------------------
+// bi app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// ------------------------------------------
+// Table of contents
+// ------------------------------------------
+// padding
+// margin
+// float
+// text align
+// clear
+// left / right
+// border
+//  - width
+//  - style
+//  - color
+//  - generic
+//  - radius
+// ltr / rtl contents
+// ------------------------------------------
+
+// generic mixin for properties with values
+// (top right bottom left)
+// ------------------------------------------
+@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
+  @if $bi-app-direction == ltr {
+    #{$property}: $top $right $bottom $left;
+  } @else {
+    #{$property}: $top $left $bottom $right;
+  }
+}
+
+// padding
+// ------------------------------------------
+@mixin padding-left($distance) {
+  padding-#{$bi-app-left}: $distance;
+}
+
+@mixin padding-right($distance) {
+  padding-#{$bi-app-right}: $distance;
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+  @include bi-app-compact(padding, $top, $right, $bottom, $left);
+}
+
+// margin
+// ------------------------------------------
+@mixin margin-left($distance) {
+  margin-#{$bi-app-left}: $distance;
+}
+
+@mixin margin-right($distance) {
+  margin-#{$bi-app-right}: $distance;
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+  @include bi-app-compact(margin, $top, $right, $bottom, $left);
+}
+
+// float
+// ------------------------------------------
+@mixin bi-app-float-left {
+  float: $bi-app-left;
+}
+
+@mixin bi-app-float-right {
+  float: $bi-app-right;
+}
+
+@mixin float($direction) {
+  @if $direction == left {
+    @include bi-app-float-left;
+  } @else if $direction == right {
+    @include bi-app-float-right;
+  } @else {
+    float: $direction;
+  }
+}
+
+// text align
+// ------------------------------------------
+@mixin bi-app-text-align-left {
+  text-align: $bi-app-left;
+}
+
+@mixin bi-app-text-align-right {
+  text-align: $bi-app-right;
+}
+
+@mixin text-align($direction) {
+  @if $direction == left {
+    @include bi-app-text-align-left;
+  } @else if $direction == right {
+    @include bi-app-text-align-right;
+  } @else {
+    text-align: $direction;
+  }
+}
+
+// clear
+// ------------------------------------------
+@mixin bi-app-clear-left {
+  clear: $bi-app-left;
+}
+
+@mixin bi-app-clear-right {
+  clear: $bi-app-right;
+}
+
+@mixin clear($direction) {
+  @if $direction == left {
+    @include bi-app-clear-left;
+  } @else if $direction == right {
+    @include bi-app-clear-right;
+  } @else {
+    clear: $direction;
+  }
+}
+
+// left / right
+// ------------------------------------------
+@mixin left($distance) {
+  @if $bi-app-direction == ltr {
+    left: $distance;
+  } @else if $bi-app-direction == rtl {
+    right: $distance;
+  }
+}
+
+@mixin right($distance) {
+  @if $bi-app-direction == ltr {
+    right: $distance;
+  } @else if $bi-app-direction == rtl {
+    left: $distance;
+  }
+}
+
+// border
+// ------------------------------------------
+
+// width
+@mixin border-left-width($width) {
+  border-#{$bi-app-left}-width: $width;
+}
+
+@mixin border-right-width($width) {
+  border-#{$bi-app-right}-width: $width;
+}
+
+@mixin border-width($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-width, $top, $right, $bottom, $left);
+}
+
+// style
+@mixin border-left-style($style) {
+  border-#{$bi-app-left}-style: $style;
+}
+
+@mixin border-right-style($style) {
+  border-#{$bi-app-right}-style: $style;
+}
+
+@mixin border-style($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-style, $top, $right, $bottom, $left);
+}
+
+// color
+@mixin border-left-color($color) {
+  border-#{$bi-app-left}-color: $color;
+}
+
+@mixin border-right-color($color) {
+  border-#{$bi-app-right}-color: $color;
+}
+
+@mixin border-color($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-color, $top, $right, $bottom, $left);
+}
+
+// generic
+@mixin border-left($border-style) {
+  border-#{$bi-app-left}: $border-style;
+}
+
+@mixin border-right($border-style) {
+  border-#{$bi-app-right}: $border-style;
+}
+
+// radius
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-#{$bi-app-left}-radius: $radius;
+     -moz-border-top#{$bi-app-left}-radius: $radius;
+          border-top-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-#{$bi-app-right}-radius: $radius;
+     -moz-border-top#{$bi-app-right}-radius: $radius;
+          border-top-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-left}-radius: $radius;
+     -moz-border-bottom#{$bi-app-left}-radius: $radius;
+          border-bottom-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-right}-radius: $radius;
+     -moz-border-bottom#{$bi-app-right}-radius: $radius;
+          border-bottom-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+@mixin border-top-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-top-right-radius($radius);
+}
+
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-left-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
+  @if $topRight != null {
+    @include border-top-left-radius($topLeft);
+    @include border-top-right-radius($topRight);
+    @include border-bottom-right-radius($bottomRight);
+    @include border-bottom-left-radius($bottomLeft);
+  } @else {
+    -webkit-border-radius: $topLeft;
+       -moz-border-radius: $topLeft;
+        -ms-border-radius: $topLeft;
+         -o-border-radius: $topLeft;
+            border-radius: $topLeft;
+  }
+}
+
+// Returns "en" or "ar", useful for image suffixes.
+// Usage: background-image: url(/img/header-#{lang()}.png);
+@function lang() {
+  @if $bi-app-direction == ltr {
+    @return 'en';
+  } @else {
+    @return 'ar';
+  }
+}
+
+// Support for "direction" declaration (renders ltr/rtl).
+// Useful for form elements as they swap the text-indent property and align the text accordingly.
+@mixin direction {
+  direction: $bi-app-direction;
+}
+
+// Inverts a percentage value. Example: 97% becames 3%.
+// Useful for background-position.
+@function bi-app-invert-percentage($percentage) {
+  @if $bi-app-direction == rtl {
+    @return 100% - $percentage;
+  } @else {
+    @return $percentage;
+  }
+}
+
+// ltr / rtl contents
+// ------------------------------------------
+@mixin ltr {
+  @if $bi-app-direction == ltr {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if $bi-app-direction == rtl {
+    @content;
+  }
+}
diff --git a/lms/static/sass/vendor/bi-app/_variables-ltr.scss b/lms/static/sass/vendor/bi-app/_variables-ltr.scss
new file mode 100755
index 0000000000..36d5a7b06e
--- /dev/null
+++ b/lms/static/sass/vendor/bi-app/_variables-ltr.scss
@@ -0,0 +1,15 @@
+// ------------------------------------------
+// left to right variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : left;
+$bi-app-right 				  : right;
+$bi-app-direction 			: ltr;
+$bi-app-invert-direction: rtl;
\ No newline at end of file
diff --git a/lms/static/sass/vendor/bi-app/_variables-rtl.scss b/lms/static/sass/vendor/bi-app/_variables-rtl.scss
new file mode 100755
index 0000000000..7300f17863
--- /dev/null
+++ b/lms/static/sass/vendor/bi-app/_variables-rtl.scss
@@ -0,0 +1,15 @@
+// ------------------------------------------
+// right to left variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : right;
+$bi-app-right           : left;
+$bi-app-direction 			: rtl;
+$bi-app-invert-direction: ltr;
\ No newline at end of file
diff --git a/lms/templates/main.html b/lms/templates/main.html
index adbae61990..a51987090c 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -59,10 +59,17 @@
 
   <link rel="icon" type="image/x-icon" href="${static.url(microsite.get_value('favicon_path', settings.FAVICON_PATH))}" />
 
-  <%static:css group='style-vendor'/>
-  <%static:css group='style-app'/>
-  <%static:css group='style-app-extend1'/>
-  <%static:css group='style-app-extend2'/>
+  % if get_language_bidi():
+    <%static:css group='style-vendor'/>
+    <%static:css group='style-app-rtl'/>
+    <%static:css group='style-app-extend1-rtl'/>
+    <%static:css group='style-app-extend2-rtl'/>
+  % else:
+    <%static:css group='style-vendor'/>
+    <%static:css group='style-app'/>
+    <%static:css group='style-app-extend1'/>
+    <%static:css group='style-app-extend2'/>
+  % endif
 
   % if disable_courseware_js:
     <%static:js group='base_vendor'/>