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
This commit is contained in:
Joe Vilches
2024-03-13 10:19:30 -07:00
committed by Facebook GitHub Bot
parent f4facf8990
commit 1db7a3ff61
13 changed files with 78 additions and 70 deletions

View File

@@ -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>`} />