Clean up certain style choices on website's example documentation (#1616)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1616

This is based on a few comments earlier in the stack and my own discretion on what should change. But I went through all of the examples and changed the following:

* Only add code tick marks in a few cases where it would make sense. Things like `start` and `end`, `undefined` as a value, etc. There ends up not being that many after this. Previously, any property or value was tick marked even if it was more of a concept than actual code. **I replaced those cases with a link to their respective documentation as I feel like this keeps the indication that this is a keyword without labeling it as code**.
* Any reference to "element" was changed to "node"
* Capitalize words that follow a colon
* Run code examples through prettier for consistent style

Reviewed By: yungsters

Differential Revision: D54816609

fbshipit-source-id: 20ee925cf46bd1c519cc88bab9327321e926ac56

website-next/docs/styling/align-content.mdx

@@ -7,13 +7,13 @@ import Playground from '@site/src/components/Playground';
 # Align Content
 
 Align content defines the distribution of lines along the cross-axis. This only
-has effect when items are wrapped to multiple lines using [`flex wrap`](/docs/styling/flex-wrap).
+has effect when items are wrapped to multiple lines using [flex wrap](/docs/styling/flex-wrap).
 
 **Flex start (default)**: Align wrapped lines to the start of the container's cross axis.
 
 **Flex end**: Align wrapped lines to the end of the container's cross axis.
 
-**Stretch**: Stretch wrapped lines to match the `height` of the container's cross axis.
+**Stretch**: Stretch wrapped lines to match the [height](/docs/styling/width-height) of the container's cross axis.
 
 **Center**: Align wrapped lines in the center of the container's cross axis.
 
@@ -21,18 +21,18 @@ has effect when items are wrapped to multiple lines using [`flex wrap`](/docs/st
 remaining space between the lines.
 
 **Space around**: Evenly space wrapped lines across the container's main axis, distributing
-remaining space around the lines. Compared to `space between` using
+remaining space around the lines. Compared to space between using
-`space around` will result in space being distributed to the begining of
+space around will result in space being distributed to the begining of
 the first lines and end of the last line.
 
 <Playground code={`<Layout config={{useWebDefaults: false}}>
   <Node
     style={{
-      width: 250,
+      width: 200,
       height: 250,
       padding: 10,
       alignContent: 'flex-start',
-      flexWrap: 'wrap'
+      flexWrap: 'wrap',
     }}>
     <Node style={{margin: 5, height: 50, width: 50}} />
     <Node style={{margin: 5, height: 50, width: 50}} />

website-next/docs/styling/align-items-self.mdx

@@ -7,10 +7,10 @@ import Playground from '@site/src/components/Playground';
 # Align Items
 
 Align items describes how to align children along the cross axis of their container.
-Align items is very similar to [`justify content`](/docs/styling/justify-content) but instead of
+Align items is very similar to [justify content](/docs/styling/justify-content) but instead of
-applying to the main axis, `align items` applies to the cross axis.
+applying to the main axis, align items applies to the cross axis.
 
-**Stretch (default)**: Stretch children of a container to match the `height` of the container's cross axis.
+**Stretch (default)**: Stretch children of a container to match the [height](/docs/styling/width-height) of the container's cross axis.
 
 **Flex start**: Align children of a container to the start of the container's cross axis.
 
@@ -22,26 +22,27 @@ applying to the main axis, `align items` applies to the cross axis.
 
 # Align Self
 
-Align self has the same options and effect as `align items` but instead of
+Align self has the same options and effect as align items but instead of
 affecting the children within a container, you can apply this property to
-a single child to change its alignment within its parent. `align self`
+a single child to change its alignment within its parent. Align self
-overrides any option set by the parent with `align items`.
+overrides any option set by the parent with align items.
 
 <Playground code={`<Layout config={{useWebDefaults: false}}>
   <Node
     style={{
-      width: 250,
+      width: 200,
       height: 250,
       padding: 10,
-      alignItems: 'flex-start'
+      alignItems: 'flex-start',
     }}>
     <Node
       style={{
         margin: 5,
         height: 50,
         width: 50,
-        alignSelf: 'center'
+        alignSelf: 'center',
-      }}/>
+      }}
+    />
     <Node style={{margin: 5, height: 50, width: 50}} />
   </Node>
 </Layout>`} />

website-next/docs/styling/aspect-ratio.mdx

@@ -6,13 +6,13 @@ import Playground from '@site/src/components/Playground';
 
 # Aspect Ratio
 
-The `aspect ratio` property in Yoga has the following properties:
+The aspect ratio property in Yoga has the following properties:
 
 - Accepts any floating point value > 0, the default is undefined.
-- Defined as the ratio between the `width` and the `height` of a node e.g. if a node has an aspect ratio of 2 then its `width` is twice the size of its `height`.
+- Defined as the ratio between the [width](/docs/styling/width-height) and the [height](/docs/styling/width-height) of a node e.g. if a node has an aspect ratio of 2 then its [width](/docs/styling/width-height) is twice the size of its [height](/docs/styling/width-height).
-- Respects the `min` and `max` dimensions of an item.
+- Respects the [min](/docs/styling/min-max-width-height) and [max](/docs/styling/min-max-width-height) dimensions of an item.
-- Has higher priority than `flex grow`
+- Has higher priority than [flex grow](/docs/styling/flex-basis-grow-shrink)
-- If `aspect ratio`, `width`, and `height` are set then the cross axis dimension is overridden.
+- If aspect ratio, [width](/docs/styling/width-height), and [height](/docs/styling/width-height) are set then the cross axis dimension is overridden.
 
 <Playground code={`<Layout config={{useWebDefaults: false}}>
   <Node

website-next/docs/styling/display.mdx

@@ -19,7 +19,7 @@ Display controls which layout specification to follow.
       height: 200,
       padding: 10,
     }}>
-    <Node style={{margin: 5, height: 50, display: 'flex'}} />
     <Node style={{margin: 5, height: 50, display: 'none'}} />
+    <Node style={{margin: 5, height: 50, display: 'flex'}} />
   </Node>
 </Layout>`} />

website-next/docs/styling/flex-basis-grow-shrink.mdx

@@ -6,10 +6,10 @@ import Playground from '@site/src/components/Playground';
 
 # Flex Basis, Grow, and Shrink
 
-**Flex basis**: is an axis-independent way of providing the default size of an item
+**Flex basis**: Is an axis-independent way of providing the default size of an item
-along the main axis. Setting the flex basis of a child is similar to setting the `width` of that
+along the main axis. Setting the flex basis of a child is similar to setting the [width](/docs/styling/width-height) of that
-child if its parent is a container with `flex direction: row` or setting the `height` of a child
+child if its parent is a container with a row [flex direction](/docs/styling/flex-direction) or setting the [height](/docs/styling/width-height) of a child
-if its parent is a container with `flex direction: column`. The flex basis of an item is the
+if its parent is a container with a column [flex direction](/docs/styling/flex-direction). The flex basis of an item is the
 default size of that item, the size of the item before any flex grow and flex shrink
 calculations are performed.
 
@@ -24,7 +24,7 @@ calculations are performed.
   </Node>
 </Layout>`} />
 
-**Flex grow**: describes how any space within a container should be distributed
+**Flex grow**: Describes how any space within a container should be distributed
 among its children along the main axis. After laying out its children, a container will
 distribute any remaining space according to the flex grow values specified by its children.
 
@@ -43,7 +43,7 @@ A container will distribute any remaining space among its children weighted by t
   </Node>
 </Layout>`} />
 
-**Flex shrink**: describes how to shrink children along the main axis in the
+**Flex shrink**: Describes how to shrink children along the main axis in the
 case that the total size of the children overflow the size of the container on the main axis.
 flex shrink is very similar to flex grow and can be thought of in the same way if
 any overflowing size is considered to be negative remaining space.

website-next/docs/styling/flex-direction.mdx

@@ -29,7 +29,7 @@ the next line will start to the left first item on the bottom of the container.
       width: 200,
       height: 200,
       padding: 10,
-      flexDirection: 'column'
+      flexDirection: 'column',
     }}>
     <Node style={{margin: 5, height: 50, width: 50}} />
     <Node style={{margin: 5, height: 50, width: 50}} />

website-next/docs/styling/flex-wrap.mdx

@@ -6,24 +6,24 @@ import Playground from '@site/src/components/Playground';
 
 # Flex Wrap
 
-The `flex wrap` property is set on containers and controls what happens when
+The flex wrap property is set on containers and controls what happens when
 children overflow the size of the container along the main axis. By default
-children are forced into a single line (which can shrink nodes). When wrapping lines [`align content`](/docs/styling/align-content) can be used to specify how the
+children are forced into a single line (which can shrink nodes). When wrapping lines [align content](/docs/styling/align-content) can be used to specify how the
 lines are placed in the container.
 
 **No wrap (default)**: No wrapping and children might shrink as a result.
 
 **Wrap**: Nodes are wrapped into multiple lines along the main axis if needed.
 
-**Wrap reverse**: Behaves the same as `wrap` but the order of the lines is reversed.
+**Wrap reverse**: Behaves the same as wrap but the order of the lines is reversed.
 
 <Playground code={`<Layout config={{useWebDefaults: false}}>
   <Node
     style={{
-      width: 250,
+      width: 200,
       height: 250,
       padding: 10,
-      flexWrap: 'wrap'
+      flexWrap: 'wrap',
     }}>
     <Node style={{margin: 5, height: 50, width: 50}} />
     <Node style={{margin: 5, height: 50, width: 50}} />

website-next/docs/styling/justify-content.mdx

@@ -8,8 +8,8 @@ import Playground from '@site/src/components/Playground';
 
 Justify content describes how to align children within the main axis of their container.
 For example, you can use this property to center a child horizontally within a container
-with `flex direction` set to `row` or vertically within a container with `flex direction`
+with [flex direction](/docs/styling/flex-direction) set to row or vertically within a container with [flex direction](/docs/styling/flex-direction)
-set to `column`.
+set to column.
 
 **Flex start (default)**: Align children of a container to the start of the container's main axis.
 
@@ -21,8 +21,8 @@ set to `column`.
 remaining space between the children.
 
 **Space around**: Evenly space of children across the container's main axis, distributing
-remaining space around the children. Compared to `space between` using
+remaining space around the children. Compared to space between using
-`space around` will result in space being distributed to the beginning of
+space around will result in space being distributed to the beginning of
 the first child and end of the last child.
 
 **Space evenly**: Evenly distributed within the alignment container along the main axis.
@@ -35,7 +35,7 @@ and the main-end edge and the last item, are all exactly the same.
       width: 200,
       height: 200,
       padding: 10,
-      justifyContent: 'flex-start'
+      justifyContent: 'flex-start',
     }}>
     <Node style={{margin: 5, height: 50, width: 50}} />
     <Node style={{margin: 5, height: 50, width: 50}} />

website-next/docs/styling/layout-direction.mdx

@@ -8,11 +8,11 @@ import Playground from '@site/src/components/Playground';
 
 Layout direction specifies the direction in which children and text
 in a hierarchy should be laid out. Layout direction also effects what
-edge `start` and `end` refer to. By default Yoga lays out with `LTR`
+edge `start` and `end` refer to. By default Yoga lays out with left-to-right (LTR)
 layout direction. In this mode `start` refers to `left` and `end`
-refers to `right`. When localizing your apps for markets with RTL languages
+refers to `right`. When localizing your apps for markets with right-to-left (RTL) languages
 you should customize this by either by passing a direction
-to the `CalculateLayout` call or by setting the direction on the root node.
+to the [CalculateLayout](/docs/getting-started/laying-out-a-tree) call or by setting the direction on the root node.
 
 **LTR (default)**: Text and children and laid out from left to right. Styles applied
 the start of an element are applied on the left side.
@@ -26,7 +26,7 @@ start of an element are applied on the right side.
       width: 200,
       height: 200,
       padding: 10,
-      direction: 'ltr'
+      direction: 'ltr',
     }}>
     <Node style={{margin: 5, height: 50, width: 50}} />
     <Node style={{margin: 5, height: 50, width: 50}} />

website-next/docs/styling/margin-padding-border.mdx

@@ -6,12 +6,12 @@ import Playground from '@site/src/components/Playground';
 
 # Margin, Padding, and Border
 
-**Margin**: affects the spacing around the outside of a node. A node with margin
+**Margin**: Affects the spacing around the outside of a node. A node with margin
 will offset itself from the bounds of its parent but also offset the
 location of any siblings. The margin of a node contributes to the total size
 of its parent if the parent is auto sized.
 
-**Padding**: affects the size of the node it is applied to. Padding in Yoga acts as if
+**Padding**: Affects the size of the node it is applied to. Padding in Yoga acts as if
 `box-sizing: border-box;` was set. That is padding will not add to the total size
 of an element if it has an explicit size set. For auto sized nodes padding will increase
 the size of the node as well as offset the location of any children.
@@ -33,8 +33,9 @@ acts exactly like padding.
         margin: 5,
         padding: 20,
         borderWidth: 20,
-        height: 50
+        height: 50,
-      }}/>
+      }}
+    />
     <Node style={{height: 50}} />
   </Node>
 </Layout>`} />

website-next/docs/styling/min-max-width-height.mdx

@@ -6,43 +6,47 @@ import Playground from '@site/src/components/Playground';
 
 # Min/Max Width and Height
 
-These properties set the maximum and minimum size constraints of an element.
+These properties set the maximum and minimum size constraints of a node.
 They have higher priority than all other properties and will always be respected.
 Constraints can be specified as either absolute pixel values or as percentages of their
-parent's size. By default all these constraints are `undefined`.
+[containing block's](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) size. By default all these constraints are `undefined`.
 
 <Playground code={`<Layout config={{useWebDefaults: false}}>
   <Node
     style={{
-      width: 250,
+      width: 200,
       height: 250,
-      padding: 10
+      padding: 10,
     }}>
     <Node style={{margin: 5, height: 25}} />
     <Node
       style={{
         margin: 5,
         height: 100,
-        maxHeight: 25
+        maxHeight: 25,
-      }}/>
+      }}
+    />
     <Node
       style={{
         margin: 5,
         height: 25,
-        minHeight: 50
+        minHeight: 50,
-      }}/>
+      }}
+    />
     <Node
       style={{
         margin: 5,
         height: 25,
-        maxWidth: 25
+        maxWidth: 25,
-      }}/>
+      }}
+    />
     <Node
       style={{
         margin: 5,
         height: 25,
         width: 25,
-        minWidth: 50
+        minWidth: 50,
-      }}/>
+      }}
+    />
   </Node>
 </Layout>`} />

website-next/docs/styling/position.mdx

@@ -7,7 +7,7 @@ import Playground from '@site/src/components/Playground';
 # Position
 
 **Relative (default)**: This node is laid out according to the specified flow of the flex container it is apart of.
-That is, it particpates in the flexbox algorithm and will take up space within the container, unlike `absolute`.
+That is, it particpates in the flexbox algorithm and will take up space within the container, unlike absolute.
 Insets (`left`, `right`, `top`, `bottom`, etc) will offset the node from its normal position within its container.
 This node will always form a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
 
@@ -15,8 +15,7 @@ This node will always form a [containing block](https://developer.mozilla.org/en
 Absolute nodes do not take up space in its flex container and will not affect the position of
 its siblings. Insets will offset the node from its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
 
-
+**Static**: This node behaves like relative except it will ignore insets and will not
-**Static**: This node behaves like `relative` except it will ignore insets and will not
 form a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
 
 <Playground code={`<Layout config={{useWebDefaults: false}}>
@@ -24,13 +23,15 @@ form a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Conta
     style={{
       width: 200,
       height: 200,
-      padding: 10
+      padding: 10,
     }}>
     <Node
       style={{
         margin: 5,
         height: 50,
-        position: 'relative'
+        top: 20,
-      }}/>
+        position: 'relative',
+      }}
+    />
   </Node>
 </Layout>`} />

website-next/docs/styling/width-height.mdx

@@ -6,10 +6,10 @@ import Playground from '@site/src/components/Playground';
 
 # Width and Height
 
-The `width` property specifies the width of the node's border box (the collective size of the node's content, padding, and border).
+The width property specifies the width of the node's border box (the collective size of the node's content, padding, and border).
-Similarly `height` property specifies the height of the node's border box.
+Similarly height property specifies the height of the node's border box.
 
-Both `width` and `height` can take following values:
+Both width and height can take following values:
 
 **Auto**: The default Value, Yoga calculates the width/height for the node based
 on its content, whether that is other children, text, or an image.
@@ -24,13 +24,14 @@ the Yoga node this may or may not be the final dimension of the node.
     style={{
       width: 200,
       height: 200,
-      padding: 10
+      padding: 10,
     }}>
     <Node
       style={{
         margin: 5,
         height: 50,
         width: 50,
-      }}/>
+      }}
+    />
   </Node>
 </Layout>`} />