Move yoga docs into docs folder on master branch

Summary: Move yoga docs into master branch so that pull requests are able to include doc updates as part of other changes.

Reviewed By: JoelMarcey

Differential Revision: D4365700

fbshipit-source-id: 2f46a88974104c454c00bcdf1257abb5c4075a68

docs/_docs/yoga/aspect-ratio.md

@@ -0,0 +1,47 @@
+---
+docid: aspect-ratio
+title: Aspect ratio
+layout: docs
+permalink: /docs/aspect-ratio/
+---
+
+`AspectRatio` is a property introduced by Yoga. `AspectRatio` solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to videos, images, and other media types. `AspectRatio` accepts any floating point value > 0, the default is undefined. `AspectRatio` can apply to either the width or the height of an item, it depends on which dimension is fixed. `AspectRatio` Also respects the `Min` and `Max` dimensions of an item.
+
+- If an item has a `Width` set then `AspectRatio` controls the item's height.
+- If an item has a `Height` set then `AspectRatio` controls the item's width.
+- If an item has a `FlexBasis` set then `AspectRatio` controls the item's cross axis dimension.
+- If an item's alignment is `Stretch` and its main axis is undefined then `AspectRatio` controls the item's main axis dimension.
+- If an item has `FlexGrow` or `FlexShrink` set then `AspectRatio` controls the item's cross axis dimension if it is undefined.
+- If both dimensions of an item are fixed then `AspectRatio` is ignored.
+
+#### Width = 100; AspectRatio = 2;
+
+<div class="yoga" style="align-items: flex-start;">
+  <div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
+    <div class="yoga" style="background-color: #303846; width: 100px; height: 200px;"></div>
+  </div>
+</div>
+
+#### Width = 100; AspectRatio = 0.5;
+
+<div class="yoga" style="align-items: flex-start;">
+  <div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
+    <div class="yoga" style="background-color: #303846; width: 100px; height: 50px;"></div>
+  </div>
+</div>
+
+#### FlexDirection = Row; FlexGrow = 1; AspectRatio = 0.5;
+
+<div class="yoga" style="align-items: flex-start;">
+  <div class="yoga sample" style="background-color: white; width: 300px; height: 300px; flex-direction: row;">
+    <div class="yoga" style="background-color: #303846; flex-grow: 1; height: 150px;"></div>
+  </div>
+</div>
+
+#### FlexDirection = Row; AlignItems = Stretch; AspectRatio = 0.5;
+
+<div class="yoga" style="align-items: flex-start;">
+  <div class="yoga sample" style="background-color: white; width: 300px; height: 300px; flex-direction: row;">
+    <div class="yoga" style="background-color: #303846; width: 150px;"></div>
+  </div>
+</div>

docs/_docs/yoga/rtl.md

@@ -0,0 +1,15 @@
+---
+docid: rtl
+title: RTL
+layout: docs
+permalink: /docs/rtl/
+---
+
+The web has limited support for Right-to-Left (RTL) layouts. It does a pretty good job when it comes to text alignment and text rendering, but lacks the features needed to build fully RTL compatible UIs. Therefore, Yoga has adopted `Start` and `End` values for `Margin`, `Padding`, `Border`, and `Position` properties.
+
+
+## Direction
+
+With `Start` and `End`, you can specify these properties in your UI without having to think about whether your item will show up on the left or the right side of the screen (depending on the person's language setting). Yoga automatically handles this for you.
+
+The `Direction` property controls this behavior. `Direction` defaults to `Inherit` on all nodes except the root which defaults to `LTR`. It is up to you to detect the user's preferred direction (most platforms have a standard way of doing this) and setting this direction on the root of your layout tree.