improve docs

Author: oliviertassinari

docs/src/pages/system/sizing/sizing.md

@@ -4,13 +4,21 @@
 
 ## Supported values
 
-The sizing style functions support different property input types:
+The sizing properties: `width`, `height`, `minHeight`, `maxHeight`, `minWidth` and `maxWidth` are using the following custom transform function for the value:
+
+```js
+function transform(value) {
+  return value <= 1 ? `${value * 100}%` : value;
+}
+```
+
+If the value is between [0, 1], it's converted to percent.
+Otherwise, it is directly set on the CSS property.
 
 {{"demo": "pages/system/sizing/Values.js", "defaultCodeOpen": false}}
 
 ```jsx
-// Numbers in [0,1] are multiplied by 100 and converted to % values.
-<Box sx={{ width: 1/4 }}>
+<Box sx={{ width: 1/4 }}> // Equivalent to width: '25%'
 <Box sx={{ width: 300 }}> // Numbers are converted to pixel values.
 <Box sx={{ width: '75%' }}> // String values are used as raw CSS.
 <Box sx={{ width: 1 }}> // 100%
@@ -28,6 +36,15 @@ The sizing style functions support different property input types:
 <Box sx={{ width: 'auto' }}>…
 ```
 
+### Max-width
+
+The max-width property allows setting a constraint on your breakpoints.
+In this example, the value resolves to [`theme.breakpoints.values.md`](/customization/default-theme/?expand-path=$.breakpoints.values).
+
+```jsx
+<Box sx={{ maxWidth: 'md' }}>…
+```
+
 ## Height
 
 {{"demo": "pages/system/sizing/Height.js", "defaultCodeOpen": false}}
@@ -45,12 +62,12 @@ The sizing style functions support different property input types:
 import { sizing } from '@material-ui/system';
 ```
 
-| Import name | Prop        | CSS property | Theme key |
-| :---------- | :---------- | :----------- | :-------- |
-| `width`     | `width`     | `width`      | none      |
-| `maxWidth`  | `maxWidth`  | `max-width`  | none      |
-| `minWidth`  | `minWidth`  | `min-width`  | none      |
-| `height`    | `height`    | `height`     | none      |
-| `maxHeight` | `maxHeight` | `max-height` | none      |
-| `minHeight` | `minHeight` | `min-height` | none      |
-| `boxSizing` | `boxSizing` | `box-sizing` | none      |
+| Import name | Prop        | CSS property | Theme key                                                                                    |
+| :---------- | :---------- | :----------- | :------------------------------------------------------------------------------------------- |
+| `width`     | `width`     | `width`      | none                                                                                         |
+| `maxWidth`  | `maxWidth`  | `max-width`  | [`theme.breakpoints.values`](/customization/default-theme/?expand-path=$.breakpoints.values) |
+| `minWidth`  | `minWidth`  | `min-width`  | none                                                                                         |
+| `height`    | `height`    | `height`     | none                                                                                         |
+| `maxHeight` | `maxHeight` | `max-height` | none                                                                                         |
+| `minHeight` | `minHeight` | `min-height` | none                                                                                         |
+| `boxSizing` | `boxSizing` | `box-sizing` | none                                                                                         |

docs/src/pages/system/the-sx-prop/the-sx-prop.md

@@ -111,10 +111,11 @@ function transform(value) {
 }
 ```
 
-Basically, if the value is between [0, 1] it is converted to percent, otherwise it is directly set on the CSS property.
+If the value is between [0, 1], it's converted to percent.
+Otherwise, it is directly set on the CSS property.
 
 ```jsx
-<Box sx={{ width: 0.5 }} /> // equivalent to width: '50%'
+<Box sx={{ width: 1/2 }} /> // equivalent to width: '50%'
 <Box sx={{ width: 20 }} /> // equivalent to width: '20px'
 ```