Revised ltr/rtl config and settings to not rely on Sass @import + @if

* Since Sass doesn't support @import statements inside of @if syntax
* rolled back to using specific bi-app-sass imports for LTR/RTL cases
* moved if/else -direction variable use to be within _grid.scss

CHANGELOG.md

@@ -3,6 +3,13 @@
 ## unreleased
 Nothing yet
 
+- - -
+
+## 0.8.6 (2016-01-22)
+* Revised ltr/rtl config and settings to not rely on Sass @import + @if
+
+- - -
+
 ## 0.8.5 (2016-01-13)
 * Added a new element, Lists - for use in content and simple navigation
 

README.md

@@ -240,27 +240,32 @@ You can also use the edX UX Pattern Library as part of your CSS's Sass compilati
 just import all utilities (see the ``utilities`` directory) and what components  (see the ``components`` directory)  you want. 
 
 ##### Default Reference/Import
-All components and utilities can be imported by default by importing the ``_edx-pattern-library.scss`` partial. See the example below taken from [``main-ltr.scss``]() and the [``_build.scss``](https://github.com/edx/ux-pattern-library/blob/master/_src/pldoc/static/sass/_build.scss) compilation of the edX Pattern Library's Documentation Site:
+All components and utilities can be imported by default by importing the ``_edx-pattern-library.scss`` partial. See the expanded/simplified example below taken from [``main-ltr.scss``](https://github.com/edx/ux-pattern-library/blob/master/_src/pldoc/static/sass/_main-ltr.scss) and the [``_build.scss``](https://github.com/edx/ux-pattern-library/blob/master/_src/pldoc/static/sass/_build.scss) compilation of the edX Pattern Library's Documentation Site:
 
 ```scss
 // ------------------------------
 // edX Pattern Library Site: Main Style Compile - LTR
 
-// About: Sass compile for the edX Pattern Library Site. This does not contain styles for other edX products/experiences (e.g. account/onboarding). Any styles defined in the partials contained here should be prefixed with ".pldoc-" to avoid cascade/run-off into the element stylings.
+// About: Sass compile for the edX Pattern Library Site. This does not contain styles for other edX products/experiences (e.g. account/onboarding).
+
+
+// ------------------------------
+// #CONFIG - layout direction
+// ------------------------------
+@import 'ltr';                                                       // LTR-specifc settings and utilities
 
 
 // ------------------------------
 // #CONFIG
 // ------------------------------
-$layout-direction: ltr;
 @import 'config';
 
 
 // ------------------------------
 // #LIB
 // ------------------------------
-@import 'lib';
-@import '{path to edx-pattern-library package}/pattern-library/sass/edx-pattern-library';
+@import 'lib';                                                      // third party libraries
+@import '../../../pattern-library/sass/edx-pattern-library';        // UXPL
 
 
 // ------------------------------
@@ -271,11 +276,12 @@ $layout-direction: ltr;
 @import 'layouts';
 @import 'views';
 @import 'overrides';
-
 ```
 
 **NOTE**: Since both libSass and RubySass lack a way to pass in variables/configuration into their ``@import {file}`` method, each app is responsible for 1) storing any npm-based dependencies, including the edx-pattern-library, in the best directory structure for that app's set up and 2) creating a ``_lib.scss`` partial to import all third party library dependencies from that structure for the Pattern Library to use (see above example).
 
+**NOTE**: We support right-to-left and left-to-right-based layouts. View more details on what [configuration and utilities are needed alongside the UXPL](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS#right-to-left-rtl-support)
+
 See [the UX Pattern Library Files + Application Files guidelines](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS#ux-pattern-library-files--application-files) and [example style compile](https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS#main-style-compile) for more examples, details on how to use partials, and general background.
 
 ##### Custom Reference/Import
@@ -288,18 +294,22 @@ If you'd like to customize what to import, you can manually import specific elem
 // About: **Customized** Sass compile for the edX Pattern Library Site. This does not contain styles for other edX products/experiences (e.g. account/onboarding). Any styles defined in the partials contained here should be prefixed with ".pldoc-" to avoid cascade/run-off into the element stylings.
 
 
+// ------------------------------
+// #CONFIG - layout direction
+// ------------------------------
+@import 'ltr';                                                       // LTR-specifc settings and utilities
+
+
 // ------------------------------
 // #CONFIG
 // ------------------------------
-$layout-direction: ltr;
 @import 'config';
 
 
 // ------------------------------
 // #LIB
 // ------------------------------
-@import 'lib';
-@import '{path to edx-pattern-library package}/pattern-library/sass/global/core';
+@import 'lib';                                                      // third party libraries
 
 // use UXPL's buttons, headings, copy, grid, and layouts
 @import '{path to edx-pattern-library package}/pattern-library/sass/patterns/buttons';

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "edx-pattern-library",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "authors": [
     "edX UX Team <ux@edx.org>"
   ],

demo/static/sass/_lib.scss

@@ -6,10 +6,3 @@
 @import '../../../node_modules/bourbon/app/assets/stylesheets/bourbon';
 @import '../../../node_modules/susy/sass/susy';
 @import '../../../node_modules/breakpoint-sass/stylesheets/breakpoint';
-
-// reference RTL/LTR specific libs
-@if $layout-direction == rtl {
-    @import '../../../node_modules/bi-app-sass/bi-app/bi-app-rtl';
-} @else {
-    @import '../../../node_modules/bi-app-sass/bi-app/bi-app-ltr';
-}

demo/static/sass/demo-ltr.scss

@@ -9,6 +9,11 @@
 // ------------------------------
 $layout-direction: ltr;
 
+// ------------------------------
+// #LIB
+// ------------------------------
+@import '../../../node_modules/bi-app-sass/bi-app/bi-app-ltr';
+
 
 // ------------------------------
 // #BUILD

demo/static/sass/demo-rtl.scss

@@ -8,6 +8,13 @@
 // ------------------------------
 $layout-direction: rtl;
 
+
+// ------------------------------
+// #LIB
+// ------------------------------
+@import '../../../node_modules/bi-app-sass/bi-app/bi-app-rtl';
+
+
 // ------------------------------
 // #BUILD
 // ------------------------------

package.json

@@ -1,6 +1,6 @@
 {
   "name": "edx-pattern-library",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "author": "edX UX Team <ux@edx.org>",
   "license": "Apache-2.0",
   "description": "The (working) Visual, UI, and Front End Styleguide for edX Apps",

pattern-library/sass/edx-pattern-library-ltr.scss

@@ -3,20 +3,16 @@
 
 // About: Sass compile for the edX Pattern Library's static CSS, for use in left-to-right styling.
 
-
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-$layout-direction: ltr;
-
-
 // ------------------------------
 // #LIB
 // ------------------------------
-@import '../../pldoc/static/sass/lib';
+@import '../../node_modules/bourbon/app/assets/stylesheets/bourbon';
+@import '../../node_modules/susy/sass/susy';
+@import '../../node_modules/breakpoint-sass/stylesheets/breakpoint';
 
 
 // ------------------------------
 // #BUILD
 // ------------------------------
-@import 'edx-pattern-library';                   // shared compile/build order for both LTR and RTL UI
+@import 'global/ltr';                                      // LTR-specifc settings and utilities
+@import 'edx-pattern-library';                      // shared compile/build order for both LTR and RTL UI

pattern-library/sass/edx-pattern-library-rtl.scss

@@ -4,19 +4,16 @@
 // About: Sass compile for the edX Pattern Library's static CSS, for use in right-to-left styling.
 
 
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-$layout-direction: rtl;
-
-
 // ------------------------------
 // #LIB
 // ------------------------------
-@import '../../pldoc/static/sass/lib';
+@import '../../node_modules/bourbon/app/assets/stylesheets/bourbon';
+@import '../../node_modules/susy/sass/susy';
+@import '../../node_modules/breakpoint-sass/stylesheets/breakpoint';
 
 
 // ------------------------------
 // #BUILD
 // ------------------------------
+@import 'global/rtl';                                      // LTR-specifc settings and utilities
 @import 'edx-pattern-library';                   // shared compile/build order for both LTR and RTL UI

pattern-library/sass/global/_core.scss

@@ -3,17 +3,8 @@
 
 // About: Collection of global settings and utilities.
 
-
 @import 'functions';
 @import 'settings';
-
-// set RTL/LTR specific variables
-@if $layout-direction == rtl {
-    @import 'settings-rtl';
-} @else {
-    @import 'settings-ltr';
-}
-
 @import 'mixins';
 @import 'helpers';
 @import '../normalize';

pattern-library/sass/global/_ltr.scss

@@ -0,0 +1,19 @@
+// ------------------------------
+// edX Pattern Library: LTR directional settings & support
+
+// About: Sass partial for defining settings and utilities for LTR-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: ltr;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../../node_modules/bi-app-sass/bi-app/bi-app-ltr';

pattern-library/sass/global/_rtl.scss

@@ -0,0 +1,19 @@
+// ------------------------------
+// edX Pattern Library: RTL directional settings & support
+
+// About: Sass partial for defining settings and utilities for RTL-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: rtl;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../../node_modules/bi-app-sass/bi-app/bi-app-rtl';

pattern-library/sass/patterns/_grid.scss

@@ -18,6 +18,17 @@
 // ----------------------------
 // #SETTINGS
 // ----------------------------
+// grid - configuration (susy-based)
+
+// set RTL/LTR specific variables
+@if $layout-direction == rtl {
+    $grid-direction-default: rtl;
+    $grid-direction-reversed: ltr;
+} @else {
+    $grid-direction-default: ltr;
+    $grid-direction-reversed: rtl;
+}
+
 // susy-based configuration (see http://susydocs.oddbird.net/en/latest/settings/)
 $susy: (
     use-custom: (

pldoc/static/sass/_lib.scss

@@ -6,10 +6,3 @@
 @import '../../../node_modules/bourbon/app/assets/stylesheets/bourbon';
 @import '../../../node_modules/susy/sass/susy';
 @import '../../../node_modules/breakpoint-sass/stylesheets/breakpoint';
-
-// reference RTL/LTR specific libs
-@if $layout-direction == rtl {
-    @import '../../../node_modules/bi-app-sass/bi-app/bi-app-rtl';
-} @else {
-    @import '../../../node_modules/bi-app-sass/bi-app/bi-app-ltr';
-}

pldoc/static/sass/_ltr.scss

@@ -0,0 +1,19 @@
+// ------------------------------
+// edX Pattern Library Site: LTR directional settings & support
+
+// About: Sass partial for defining settings and utilities for LTR-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: ltr;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../../../node_modules/bi-app-sass/bi-app/bi-app-ltr';

pldoc/static/sass/_rtl.scss

@@ -0,0 +1,19 @@
+// ------------------------------
+// edX Pattern Library Site: RTL directional settings & support
+
+// About: Sass partial for defining settings and utilities for RTL-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: rtl;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../../../node_modules/bi-app-sass/bi-app/bi-app-rtl';

pldoc/static/sass/main-ltr.scss

@@ -7,8 +7,7 @@
 // ------------------------------
 // #CONFIG - layout direction
 // ------------------------------
-$layout-direction: ltr;
-
+@import 'ltr';                        // LTR-specifc settings and utilities
 
 // ------------------------------
 // #BUILD

pldoc/static/sass/main-rtl.scss

@@ -3,10 +3,12 @@
 
 // About: Sass compile for the edX Pattern Library Site. This does not contain styles for other edX products/experiences (e.g. account/onboarding). Any styles defined in the partials contained here should be prefixed with ".pldoc-" to avoid cascade/run-off into the element stylings.
 
+
 // ------------------------------
 // #CONFIG - layout direction
 // ------------------------------
-$layout-direction: rtl;
+@import 'rtl';                        // RTL-specifc settings and utilities
+
 
 // ------------------------------
 // #BUILD