partially revert 3a984f2

Author: Larocceau

docs/v4-recipes/client-server/fable-remoting.md

@@ -7,7 +7,7 @@
 Add [Fable.Remoting.Giraffe](https://www.nuget.org/packages/Fable.Remoting.Giraffe/) to the Server and [Fable.Remoting.Client](https://www.nuget.org/packages/Fable.Remoting.Client/) to the Client.
 
 > See [How Do I Add a NuGet Package to the Server](../../v4-recipes/package-management/add-nuget-package-to-server.md)
-> and [How Do I Add a NuGet Package to the Client](../../recipes/package-management/add-nuget-package-to-client.md).
+> and [How Do I Add a NuGet Package to the Client](../../v4-recipes/package-management/add-nuget-package-to-client.md).
 
 #### 2. Create the API protocol
 You now need to create the protocol, or contract, of the API we’ll be creating. Insert the following below the `Route` module in `Shared.fs`:

docs/v4-recipes/javascript/third-party-react-package.md

@@ -1,7 +1,7 @@
 To use a third-party React library in a SAFE application, you need to write an F# wrapper around it. There are two ways for doing this - using [Fable.React](https://www.nuget.org/packages/Fable.React/) or using [Feliz](https://zaid-ajaj.github.io/Feliz/).
 ## Prerequisites
 
-This recipe uses the [react-d3-speedometer NPM package](https://www.npmjs.com/package/react-d3-speedometer) for demonstration purposes. [Add it to your Client](../../recipes/package-management/add-npm-package-to-client.md) before continuing.
+This recipe uses the [react-d3-speedometer NPM package](https://www.npmjs.com/package/react-d3-speedometer) for demonstration purposes. [Add it to your Client](../package-management/add-npm-package-to-client.md) before continuing.
 
 ## Fable.React - Setup
 

docs/v4-recipes/package-management/add-npm-package-to-client.md

@@ -0,0 +1,18 @@
+# How do I add an NPM package to the Client?
+
+When you want to call a JavaScript library from your Client, it is easy to import and reference it using [NPM](https://docs.npmjs.com/cli/npm).
+
+Run the following command:
+```bash
+npm install name-of-package
+```
+
+This will download the package into the solution's **node_modules** folder. 
+
+You will also see a reference to the package in the Client's **package.json** file: 
+```json
+"dependencies": {
+    "name-of-package": "^1.0.0"
+}
+``` 
+

docs/v4-recipes/package-management/add-nuget-package-to-client.md

@@ -0,0 +1,11 @@
+# How do I add a NuGet package to the Client?
+Adding packages to the Client project is a very [similar process to the Server](add-nuget-package-to-server.md), with a few key differences:
+
+- Any references to the `Server` directory should be `Client`
+
+- Client code written in F# is converted into JavaScript using [Fable](https://fable.io/docs/index.html). Because of this, we must be careful to only reference libraries which are [Fable compatible](https://fable.io/docs/your-fable-project/use-a-fable-library.html).
+
+- If the NuGet package uses any JS libraries you must install them.  
+  For simplicity, [use Femto to sync](./sync-nuget-and-npm-packages.md) - if the NuGet package is compatible - or [install via NPM](./add-npm-package-to-client.md) manually, if not.
+
+There are [lots of great libraries](../../awesome-safe-components.md) available to choose from.

docs/v4-recipes/ui/add-bulma.md

@@ -8,7 +8,7 @@
 By adding either of these to your SAFE project alongside the [Bulma stylesheet or the Bulma NPM package](https://bulma.io/documentation/overview/start/), you can take full advantage of Bulma.
 
 ### Using Feliz.Bulma
-1. [Add the Feliz.Bulma NuGet package to the solution](../../recipes/package-management/add-nuget-package-to-client.md).
+1. [Add the Feliz.Bulma NuGet package to the solution](./../package-management/add-nuget-package-to-client.md).
 1. Start using Feliz.Bulma components in your F# files.
 ```fsharp
 open Feliz.Bulma
@@ -19,7 +19,7 @@ Bulma.button.button [
 ```
 
 ### Using Fulma
-1. [Add the Fulma NuGet package to the solution](../../recipes/package-management/add-nuget-package-to-client.md).
+1. [Add the Fulma NuGet package to the solution](./../package-management/add-nuget-package-to-client.md).
 1. Start using Fulma components in your F# files.
 ```fsharp
 open Fulma

docs/v4-recipes/ui/add-fontawesome.md

@@ -13,7 +13,7 @@ If you’re using the minimal template, there are a couple of things to do befor
 
 #### 1. The NuGet Package
 Add [Fable.FontAwesome.Free NuGet Package](https://www.nuget.org/packages/Fable.FontAwesome.Free/) to the Client project.
-> See [How do I add a NuGet package to the Client?](../../recipes/package-management/add-nuget-package-to-client.md).
+> See [How do I add a NuGet package to the Client?](../package-management/add-nuget-package-to-client.md).
 
 #### 2. The CDN Link
 Open the `index.html` file and add the following line to the `head` element:

docs/v4-recipes/ui/add-style.md

@@ -0,0 +1,45 @@
+# How Do I Use stylesheets with SAFE?
+If you wish to use your own CSS or SASS stylesheets with SAFE apps, you can embed either through webpack. The template already includes all required NPM packages you may need, so you will only need to configure webpack to reference your stylesheet and include in the outputs.
+
+## Adding the Stylesheet
+First, create a CSS file in the `src/Client` folder of your solution e.g `style.css`.
+
+> The same approach can be taken for `.scss` files.
+
+## Configuring WebPack
+
+### I'm using the Standard Template
+#### 1. Link to the stylesheet
+
+Inside the `webpack.config.js` file, add the following variable to the `CONFIG` object, which points to the style file you created previously.
+```javascript
+cssEntry: './src/Client/style.css',
+```
+
+#### 2. Embed CSS into outputs
+ Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following:
+```javascript
+entry: isProduction ? {
+    app: [resolve(CONFIG.fsharpEntry), resolve(CONFIG.cssEntry)]
+} : {
+    app: resolve(CONFIG.fsharpEntry),
+    style: resolve(CONFIG.cssEntry)
+},
+```
+
+This combines the css and F# outputs into a single bundle for production, and separately for dev.
+
+### I'm using the Minimal Template
+#### 1. Embed CSS into outputs
+Find the `entry` field in the `module.exports` object at the bottom of the file, and replace it with the following:
+```javascript
+entry: {
+    app: [
+        resolve('./src/Client/Client.fsproj'),
+        resolve('./src/Client/style.css')
+    ]
+},
+```
+
+## There you have it!
+You can now style your app by writing to the `style.css` file.

docs/v4-recipes/ui/add-tailwind.md

@@ -2,7 +2,7 @@
 
 [Tailwind](https://tailwindcss.com/) is a utility-first CSS framework packed that can be composed to build any design, directly in your markup.
 
-1. [Add a stylesheet](../../recipes/ui/add-style.md) to the project
+1. [Add a stylesheet](add-style.md) to the project
 
 2. Install the required npm packages
     ```shell

docs/v4-recipes/ui/cdn-to-npm.md

@@ -11,7 +11,7 @@ Find the following line in `src/Client/index.html` and delete it before moving o
 
 #### 2. Add the NPM Package
 Go ahead and add the [Bulma NPM package](https://www.npmjs.com/package/bulma) to your project.
-> See: [How do I add an NPM package to the client?](../../recipes/package-management/add-npm-package-to-client.md)
+> See: [How do I add an NPM package to the client?](../package-management/add-npm-package-to-client.md)
 
 #### 3. Load the Stylesheets
 There are two ways for loading the stylesheets:
@@ -27,7 +27,7 @@ importAll "bulma/bulma.sass"
 > You can use this approach for any NPM package.
 
 ##### b. Using Sass
-1. Add a Sass stylesheet to your project using [this recipe](../../recipes/ui/add-style.md).
+1. Add a Sass stylesheet to your project using [this recipe](add-style.md).
 2. Add the following line to your Sass file to bring in Bulma
 ```sass
 @import "~bulma/bulma.sass"