chore: add getting started documentation (#2478)

* chore: add getting started documentation

* add link to react context, fix spelling and example syntax

* add working with jss blurb and example

docs/en/getting-started/design-system.md

@@ -0,0 +1,31 @@
+---
+id: design-system
+title: Design system
+sidebar_label: Design system
+---
+
+# Design System
+
+## Working with the design system provider
+The `DesignSystemProvider` is a React component that provides, via [React context](https://reactjs.org/docs/context.html), the *design-system* object to descendent context consumers.
+
+It accepts a `designSystem` property:
+```jsx
+<DesignSystemProvider designSystem={{backgroundColor: "#FFF"}}>
+    /* children */
+</DesignSystemProvider>
+```
+
+The `DesignSystemProvider` is designed to apply scoped changes to the *design-system* object, so it will merge the applied *design-system* with any upstream *design-system* object:
+
+```jsx
+<DesignSystemProvider designSystem={{backgroundColor: "#FFF", density: 3}}>
+    /* Stylesheet generated with {backgroundColor: "#FFF", density: 3} */
+    <StyledButton>I'm a styled button</StyledButton>
+    
+    <DesignSystemProvider designSystem={{backgroundColor: "#AAA"}>
+        /* Stylesheet generated with {backgroundColor: "#AAA", density: 3} */
+        <StyledButton>I'm another styled button</StyledButton>
+    </DesignSystemProvider>
+</DesignSystemProvider>
+```

docs/en/getting-started/jss.md

@@ -0,0 +1,20 @@
+---
+id: jss
+title: JSS (JavaScript Style Sheets)
+sidebar_label: JSS (JavaScript Style Sheets)
+---
+
+# Working with JSS
+For info on how to write JSS stylesheets, visit [https://cssinjs.org/jss-syntax?v=v10.0.0](https://cssinjs.org/jss-syntax?v=v10.0.0)
+
+## Accessing the design system in JSS
+The `JSSManager` allows us to access the current contextual design system by assigning a function value to a JSS rule. The only argument to this callback will be the current design system. For more information on the providing a design system object to the styles, see the documentation for [fast-jss-manager-react](https://www.fast.design/docs/en/packages/fast-jss-manager-react/).
+
+```js
+// This code assumes a property `backgroundProperty` exists on the design system
+const styles = {
+    button: {
+        backgroundColor: (designSystem) => designSystem.backgroundColor
+    }
+}
+```

docs/en/getting-started/modifying-components.md

@@ -0,0 +1,67 @@
+---
+id: modifying-components
+title: Modifying components
+sidebar_label: Modifying components
+---
+
+# Modifying components
+
+## Using Props
+<!-- Basic details about what props are and our principle on delivering stateless components. Consider linking off to React documentation here. -->
+Each component will have its own set of [props](https://reactjs.org/docs/components-and-props.html#rendering-a-component) corresponding to the functionality needed for that component.
+
+```jsx
+<AccentButton disabled={true}>
+    Hello World
+</AccentButton>
+```
+## Unhandled props
+FAST components implement a model of props know as *handled* and *unhandled* props. *Handled* props can be thought of as first-class props explicitly used or expected by the component. *Unhandled* props are all other props. In general, all *unhandled* props will be passed along to the root element of the component, and are generally used to address instance accessibility requirements, custom event listeners, and add telemetry meta-data.
+
+```jsx
+/*
+ * aria-label is an unhandled prop, so it gets
+ * applied to the root of the Button component
+ */
+<AccentButton aria-label={"Custom accessible label"}>
+    Hello world
+</AccentButton>
+```
+
+## Changing style
+
+### Using classes
+```jsx
+<AccentButton
+    className={"my-custom-class"}
+>
+    Hello World
+</AccentButton>
+```
+
+### Using props
+Instance style overrides can be applied using the `jssStyleSheet` property and targetting properties of the [class-name contract](#class-name-contracts).
+
+```jsx
+let styles = {
+    button: {
+        margin: "0 auto"
+    }
+};
+
+<AccentButton
+    jssStyleSheet={styles}
+>
+    Hello World
+</AccentButton>
+```
+
+### Using inline-styles
+Additionally, you can always use inline-styles. This will be treated as a *unhandled* prop and 
+applied to the root element of the component.
+
+```jsx
+<AccentButton style={{margin: "0 auto"}}>
+    Hello World
+</AccentButton>
+```

docs/en/getting-started/the-basics.md

@@ -0,0 +1,68 @@
+---
+id: the-basics
+title: The basics
+sidebar_label: The basics
+---
+
+# The basics
+
+This document assumes a basic understanding of React. If you're unfamiliar, please read [React's getting started](https://reactjs.org/docs/getting-started.html) documentation first.
+
+## Add a component to your page
+<!-- Cross-link to package specific documentation regarding installation instructions?-->
+
+An easy way to get started with FAST styled components is the `@microsoft/fast-components-react-msft` package which conforms to Microsoft style guidance.
+
+To use a styled component, simply import it from the package:
+
+```jsx
+import { AccentButton } from "@microsoft/fast-components-react-msft";
+```
+And add the component to your markup:
+```jsx
+function render() {
+    return <AccentButton>Hello world</AccentButton>
+}
+```
+
+A full list of these components and their documentation can be found [here](https://explore.fast.design/).
+
+---
+
+## Core concepts
+
+### Base components
+At the heart of the FAST component system are *base* components. *Base* components are general purpose, unstyled React components designed to meet semantic and accessability requirements for common UI patterns. In general, *base* components implement [*roles*](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) from the ARIA specification.
+
+### Styled components
+Styled components are implementations of the base components coupled with CSS styles to achieve visual design requirements. These can either be a simple styling layer over the *base* component, or components that extend *base* components with additional functionality or convenience features. These components tend to be more opinionated due the the nature of design implementation.
+
+### Class name contracts
+Each base component implements a *class-name contract* - an enumeration and implementation of all classes used by the component. Simple components such as `Hyperlink` may only expose a single class name in the *class-name contract*. More complicated components such as `Breadcrumb` will have multiple class names and will apply them to the appropriate elements. For instance, the `Breadcrumb` component implements the following *class-name contract*:
+
+```typescript
+interface BreadcrumbClassNameContract {
+    breadcrumb: string;                 // Applied to the root of the component
+    breadcrumb_item: string;            // Applied to each breadcrumb item
+    breadcrumb_item__current: string;   // Applied to the item representing the location in the breadcrumb
+    breadcrumb_itemsContainer: string;  // Applied to the container of all the breadcrumb items
+    breadcrumb_separator: string;       // Applied to the element representing the separator of the breadcrumb items
+}
+```
+
+When the base component renders, it will apply classes to elements from the *class-name contract* properties of the `managedClasses` prop:
+
+```jsx
+// Inside the Breadcrumb render function
+<div className={props.managedClasses.breadcrumb}>
+    <div className={props.managedClasses.breadcrum_itemsContainer}>
+        /* ...etc */
+    </div>
+</div>
+```
+
+#### How are components styled?
+Base components are styled using [JSS](https://cssinjs.org/?v=v10.0.0) - a tool for generating stylesheets from JavaScript objects. Each JSS stylesheet conforms the the class-name contract defined by the component. [@microsoft/fast-jss-manager-react](https://github.com/microsoft/fast-dna/tree/master/packages/fast-jss-manager-react) is used to compose a component stylesheet with a base component, and will manage CSS creation, update, and removal processes during the component lifecycle.
+
+#### What is the design system?
+The *design-system* is all of the design data - it captures design thinking into a configuration object that informs components how to render. This can include information about color, font-weights, UI density, motion, and more. In practice, this object is provided to JSS stylesheets so that the resulting CSS is a product of the *design-system*.

docs/en/getting-started/utilities.md

@@ -0,0 +1,10 @@
+---
+id: utilities
+title: Utilities
+sidebar_label: Utilities
+---
+
+# Utilities
+FAST has two utility libraries for common operations:
+1. [https://github.com/microsoft/fast-dna/tree/master/packages/fast-web-utilities](@microsoft/fast-web-utilities) contains general-purpose JavaScript utilities
+2. [https://github.com/microsoft/fast-dna/tree/master/packages/fast-jss-utilities](@microsoft/fast-jss-utilities) are utilities intended to be used in JSS stylesheets

website/sidebars.json

@@ -1,5 +1,12 @@
 {
   "docs": {
+    "Getting started": [
+      "en/getting-started/the-basics",
+      "en/getting-started/modifying-components",
+      "en/getting-started/design-system",
+      "en/getting-started/jss",
+      "en/getting-started/utilities"
+    ],
     "Contributing": [
       "en/contributing/install",
       "en/contributing/working",