document new border/position utility mixins

docs/source/documentation/sass/_utility-mixins.md

@@ -24,12 +24,14 @@ If the mixin accepts arguments, pass them into the parenthesis:
 | --------------------------------------------- | ------------------------------ |
 | [`appearance`](#appearance)                   | `$value`                       |
 | [`animation`](#animation)                     | `$animations...`               |
+| [`border-*`](#border)                         | `$style`                       |
 | [`box-sizing`](#box-sizing)                   | `$box`                         |
 | [`box-shadow`](#box-shadow)                   | `$shadow`                      |
 | [`calc`](#calc)                               | `$property, $value`            |
 | [`clearfix`](#clearfix)                       | none                           |
 | [`keyframes`](#keyframes)                     | `$name`                        |
-| [`placeholder`](#placeholder)                       |`$property`,  `$attr` |
+| [`placeholder`](#placeholder)                 | `$property`,  `$attr`          |
+| [`position-*`](#position)                     | `$value`                       |
 | [`prefixer`](#prefixer)                       | `$property, $value, $prefixes` |
 | [`respond-to`](#respond-to)                   | `$max, $mi, $type`             |
 | [`transform`](#transform)                     | `$property`                    |
@@ -45,7 +47,7 @@ If the mixin accepts arguments, pass them into the parenthesis:
 | [`invisible`](#visibility)                    | none                           |
 | [`hide`](#visibility)                         | none                           |
 
-#### Animation
+<h4 id="animation">Animation</h4>
 
 The animation mixin allows you to declare cross-browser animations. The mixin accepts
 
@@ -66,15 +68,29 @@ box:hover {
 }
 ```
 
-#### Appearance
+<h4 id="appearance">Appearance</h4>
 
 The `appearance` CSS property is used to display an element using a platform-native styling based on the operating system's theme. For example, to remove browser specific styling for a ui element, use:
 
 ```scss
 @include appearance(none);
 ```
 
-#### Box-Sizing
+<h4 id="border">Border</h4>
+
+For adding borders that flip in right to left languages, use the `border-` mixins:
+
+```scss
+// set all in one argument
+@include border-right(1px solid $blue);
+@include border-left(none);
+
+// set just the color
+@include border-color-right($blue);
+@include border-color-left($off-white);
+```
+
+<h4 id="box-sizing">Box-Sizing</h4>
 
 Set the `box-sizing` property for all browsers (with browser prefixes):
 
@@ -84,31 +100,31 @@ Set the `box-sizing` property for all browsers (with browser prefixes):
 
 Valid values are `content-box`, `border-box`, and `inherit`.
 
-#### Box-Shadow
+<h4 id="box-shadow">Box-Shadow</h4>
 
 Set the `box-shadow` property for all browsers (with browser prefixes):
 
 ```scss
 @include box-shadow(border-box);
 ```
 
-#### Calc
+<h4 id="calc">Calc</h4>
 
 Shorthand for setting a property to use a `calc` value. Pass the property you'd like to set, then the value you'd like to use:
 
 ```scss
 @include calc(width, '100px - 10%');
 ```
 
-#### Clearfix
+<h4 id="clearfix">Clearfix</h4>
 
 Applies the framework-standard clear for floated elements:
 
 ```scss
 @include clearfix();
 ```
 
-#### Keyframes
+<h4 id="keyframes">Keyframes</h4>
 
 For creating animations, you can use the `keyframes` mixin. This mixin accepts an animation name. Then inside the mixin, write your animation as a content block:
 
@@ -128,15 +144,24 @@ Now you can use the [animation mixin](#animation) as a named animation like this
 ```
 
 
-#### Placeholder
+<h4 id="placeholder">Placeholder</h4>
 
 Wraps the wide array of input placeholder selectors across browsers.
 
-```
+```scss
 @include placeholder('color', $dark-blue);
 ```
 
-#### Prefixer
+<h4 id="position">Position</h4>
+
+Set `right` and `left` properties (automatically flips in right-to-left languages).
+
+```scss
+@include position-right(4px);
+@include position-left(0);
+```
+
+<h4 id="prefixer">Prefixer</h4>
 
 This is one of the most flexible mixins in the library. Use it to add browser prefixes to a property:
 
@@ -146,7 +171,7 @@ This is one of the most flexible mixins in the library. Use it to add browser pr
 
 In this way you can prefix any property. Adding the `spec` as the last argument will also output the property *without* a prefix.
 
-#### Respond To
+<h4 id="respond-to">Respond To</h4>
 
 The `respond-to` mixin adds media queries for use in responsive design. The mixin accepts three arguments: maximum size, minimum size, and type (screen, print, etc). You can pass just the first out of convenience. This mixin works well with the [breakpoint variables](../sass#breakpoints):
 
@@ -176,7 +201,7 @@ You can assemble more complicated media queries by using both min and max:
 
 This will add styles that only appear *between* the `$medium` and `$large` screen sizes.
 
-#### Transform
+<h4 id="transform">Transform</h4>
 
 The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set. `transform`, `transform-origin`, and `transform-style` all add the necessary browser prefixes for interacting with their respective transform properties.
 
@@ -187,7 +212,7 @@ The CSS transform property lets you modify the coordinate space of the CSS visua
 @include transform-style(preserve-3d);
 ```
 
-#### Transition
+<h4 id="transition">Transition</h4>
 
 This mixin provides a shorthand syntax and supports multiple transitions.
 
@@ -205,7 +230,7 @@ Or you can use the individual transition properties:
 @include transition-delay(0.5s);
 ```
 
-#### Transition Prefixed
+<h4 id="transition-prefixed">Transition Prefixed</h4>
 
 To transition vendor-prefixed properties, e.g. `-webkit-transform` and `-moz-transform`, there is an additional convinience `transition-prefixed()` mixin:
 
@@ -215,7 +240,7 @@ To transition vendor-prefixed properties, e.g. `-webkit-transform` and `-moz-tra
 
 This will generate vendor prefixed properties *and* values.
 
-#### Visibility
+<h4 id="visibility">Visibility</h4>
 
 The visibility mixins change the `visibility` property. This is useful for removing and adding elements at certain breakpoints or with certain class names. No arguments are passed. Invisible sets `visibility: hidden` on the object, leaving in the in document flow, but removing it from view. `hide()` will completely remove the item with `display:none`.