Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FIX - Revise LTR/RTL configuration to not use import + if statements #263

Merged
merged 1 commit into from
Jan 25, 2016
Merged

FIX - Revise LTR/RTL configuration to not use import + if statements #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
28 changes: 19 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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


// ------------------------------
Expand All @@ -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
Expand All @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "edx-pattern-library",
"version": "0.8.5",
"version": "0.8.6",
"authors": [
"edX UX Team <ux@edx.org>"
],
Expand Down
7 changes: 0 additions & 7 deletions demo/static/sass/_lib.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
5 changes: 5 additions & 0 deletions demo/static/sass/demo-ltr.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
// ------------------------------
$layout-direction: ltr;

// ------------------------------
// #LIB
// ------------------------------
@import '../../../node_modules/bi-app-sass/bi-app/bi-app-ltr';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I'm wondering if we should add partials for _ltr.scss and _rtl.scss. I'm not super comfortable with every client of the pattern library having to know that we're using bi-app, and it would make it harder to change that dependency. I'm also wondering if we might eventually have some additional actions that we'd perform in these partials, so having them broken out now would make that easier.

Does that make sense? Am I missing something as to why this is a bad idea?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In fact, that partial could set the $layout-direction too so that wouldn't have to be repeated.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @andy-armstrong! That's damn good feedback and simplifying this more makes sense.

I've gone ahead and done that with this fixup! commit (a4dc34d). The README file compilation examples have also bee updated. How does this sound?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great. Thanks!



// ------------------------------
// #BUILD
Expand Down
7 changes: 7 additions & 0 deletions demo/static/sass/demo-rtl.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@
// ------------------------------
$layout-direction: rtl;


// ------------------------------
// #LIB
// ------------------------------
@import '../../../node_modules/bi-app-sass/bi-app/bi-app-rtl';


// ------------------------------
// #BUILD
// ------------------------------
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
14 changes: 5 additions & 9 deletions pattern-library/sass/edx-pattern-library-ltr.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
11 changes: 4 additions & 7 deletions pattern-library/sass/edx-pattern-library-rtl.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
9 changes: 0 additions & 9 deletions pattern-library/sass/global/_core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
19 changes: 19 additions & 0 deletions pattern-library/sass/global/_ltr.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
19 changes: 19 additions & 0 deletions pattern-library/sass/global/_rtl.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
6 changes: 0 additions & 6 deletions pattern-library/sass/global/_settings-ltr.scss
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions pattern-library/sass/global/_settings-rtl.scss
View file
Open in desktop

This file was deleted.

11 changes: 11 additions & 0 deletions pattern-library/sass/patterns/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand Down
7 changes: 0 additions & 7 deletions pldoc/static/sass/_lib.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
19 changes: 19 additions & 0 deletions pldoc/static/sass/_ltr.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
19 changes: 19 additions & 0 deletions pldoc/static/sass/_rtl.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
3 changes: 1 addition & 2 deletions pldoc/static/sass/main-ltr.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
// ------------------------------
// #CONFIG - layout direction
// ------------------------------
$layout-direction: ltr;

@import 'ltr'; // LTR-specifc settings and utilities

// ------------------------------
// #BUILD
Expand Down
4 changes: 3 additions & 1 deletion pldoc/static/sass/main-rtl.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down