Ushahidi Platform Pattern Library
Read Direction
Ushahidi's user interface displays LTR (left-to-right) by default, but Ushahidi also supports RTL (right-to-left), so if the user's preferred language is a RTL language, the UI will display accordingly.
When building this feature, it was important to maintain one code base that supported both LTR and RTL read direction. In order to accomplish this we decided to use a library of Sass mixins and functions to automatically flip the CSS styles for RTL (right-to-left) read direction when needed. We decided to go with RTL-Sass open-source library, which supports the following properties:
- background
- background-position
- border
- border-radius
- clear
- cursor
- direction
- float
- left/right
- margin
- padding
- text-align
- text-indent
Stylesheet
Ushahidi loads style.css by default, but if a user selects an RTL language when creating a deployment, the app will load rtl-style.css. Both stylesheets are compiled into the css folder via gulpfile.js.
Conflicts
The Ushahidi UI uses the lightweight semantic grid Bourbon Neat and this Neat span-columns mixin:
@include span-columns(12);
compiles to:
float: left;
display: block;
width: 100%;
but in order to correctly display the float in both LTR and RTL, you have to manually override the float: left; like so:
@include span-columns(12);
@include float(left;)
which compiles to:
float: left; // would be overridden
display: block;
width: 100%;
float: left; // would be left or right depending on language
Supported Properties
Example:
@include border-left(3px solid #000);
would compile to:
border-left: 3px solid #000 // default LTR
border-right: 3px solid #000 // RTL
Background & Background Position
#background-position {
@include background-position(8px 100px);
}
#background-position-left {
@include background-position(left 100px);
}
#background-position-right {
@include background-position(right 100px);
}
#background-position-center {
@include background-position(center 100px);
}
#background-1 {
@include background(url(../img/ushahidi-logo-black.svg) no-repeat 20px center);
}
#background-1-left {
@include background(url(../img/ushahidi-logo-black.svg) no-repeat left center);
}
#background-1-right {
@include background(url(../img/ushahidi-logo-black.svg) no-repeat right center);
}
#background-1-center {
@include background(url(../img/ushahidi-logo-black.svg) no-repeat center center);
}
#background-2 {
@include background(#999 url(../img/ushahidi-logo.svg) no-repeat 8px center);
}
#background-2-left {
@include background(#999 url(../img/ushahidi-logo.svg) no-repeat left center);
}
#background-2-right {
@include background(#999 url(../img/ushahidi-logo.svg) no-repeat right center);
}
#background-2-center {
@include background(#999 url(../img/ushahidi-logo.svg) no-repeat center center);
}
Border
#border-left {
@include border-left(3px solid #000);
}
#border-right {
@include border-right(3px solid #000);
}
Border Radius
#border-top-left-radius {
@include border-top-left-radius(10px);
}
#border-top-right-radius {
@include border-top-right-radius(10px);
}
#border-bottom-left-radius {
@include border-bottom-left-radius(10px);
}
#border-bottom-right-radius {
@include border-bottom-right-radius(10px);
}
Clear
#clear-origin-left {
@include float(left);
@include clear(left);
}
#clear-origin-right {
@include float(right);
@include clear(right);
}
Cursor
#cursor-e {
@include cursor(e-resize);
}
#cursor-ne {
@include cursor(ne-resize);
}
#cursor-se {
@include cursor(se-resize);
}
#cursor-w {
@include cursor(w-resize);
}
#cursor-nw {
@include cursor(nw-resize);
}
#cursor-sw {
@include cursor(sw-resize);
}
Direction
#direction {
@include direction;
}
Float
#float-origin-left {
@include float(left);
}
#float-origin-right {
@include float(right);
}
Left/Right
#left {
@include left(20px);
}
#right {
@include right(20px);
}
Margin
#margin-0-8px-16px-24px {
@include margin(0 8px 16px 24px);
}
#margin-left {
@include margin-left(20px);
}
#margin-right {
@include margin-right(20px);
}
Padding
#padding-0-8px-16px-24px {
@include lrswap(padding, 0 8px 16px 24px);
}
#padding-left {
@include padding-left(20px);
}
#padding-right {
@include padding-right(20px);
}
Text Alignment & Indent
#text-align-left {
@include text-align(left);
}
#text-align-right {
@include text-align(right);
}
#text-indent {
@include text-indent(20px);
text-align: left;
}