Prototype guidance

docs/get-started/install-nhsapp-frontend.md

@@ -0,0 +1,119 @@
+---
+layout: layouts/get-started.njk
+title: How to add the NHS App frontend to a prototype
+---
+
+This guide explains how to add the NHS App frontend to the [NHS prototype kit](https://prototype-kit.service-manual.nhs.uk/).
+
+You must follow the [NHS prototype kit setup guide](https://prototype-kit.service-manual.nhs.uk/install) first.
+
+## Step 1
+
+Using GitBash or Terminal, navigate to where your prototype is. For example
+
+```sh
+cd ~/Documents/projects/project-prototype
+```
+
+If your prototype is already running, to stop it use
+
+```sh
+Ctrl + C
+```
+
+## Step 2
+
+Enter
+
+```sh
+npm install --save nhsapp-frontend
+```
+
+## Step 3
+
+In your HTML editor, open
+
+```sh
+/app/assets/sass/application.scss
+```
+
+After
+
+```sh
+// Import NHS.UK frontend library
+@import 'node_modules/nhsuk-frontend/packages/nhsuk';
+```
+
+Paste
+
+```sh
+// Import all styles from the NHS App frontend library
+@import 'node_modules/nhsapp-frontend/dist/nhsapp/all';
+```
+
+## Step 4
+
+In your root folder, open
+
+```sh
+/app.js
+```
+
+and find
+
+```sh
+appViews
+```
+
+After
+
+```sh
+path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
+```
+
+Add
+
+```sh
+path.join(__dirname, 'node_modules/nhsapp-frontend/dist'),
+```
+
+So it looks like this
+
+```sh
+const appViews = [
+  path.join(__dirname, 'app/views/'),
+  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
+  path.join(__dirname, 'node_modules/nhsapp-frontend/dist'),
+  path.join(__dirname, 'docs/views/'),
+];
+```
+
+## Step 5
+
+In your root folder, open
+
+```sh
+/app.js
+```
+
+and find
+
+```sh
+app.use('/nhsuk-frontend', express.static(path.join(__dirname, 'node_modules/nhsuk-frontend/dist')));
+```
+
+and on the next line paste
+
+```sh
+app.use('/nhsapp-frontend', express.static(path.join(__dirname, 'node_modules/nhsapp-frontend/dist/nhsapp')));
+```
+
+Once you have installed NHS App frontend, all NHS App components should work in your prototype.
+
+You will now have the latest version installed, later you can easily update to the latest NHS App frontend
+
+To use the components, you should:
+
+- find the component in NHS App design components
+- copy the code from the example
+- paste the code into the page in your prototype

docs/get-started/prototyping.md

@@ -5,117 +5,28 @@ tags:
   - getStarted
 ---
 
-This guide explains how to create prototypes using the NHS App design system with the [NHS prototype kit](https://prototype-kit.service-manual.nhs.uk/).
+This guide explains how to create prototypes using the NHS App design system and NHS App prototype, so you can make interactive prototypes that will look like pages on the NHS App.
 
-You must follow the [NHS prototype kit setup guide](https://prototype-kit.service-manual.nhs.uk/install) first.
-
-## Step 1
-
-Using GitBash or Terminal, navigate to where your prototype is. For example
-
-```sh
-cd ~/Documents/projects/project-prototype
-```
-
-If your prototype is already running, to stop it use
-
-```sh
-Ctrl + C
-```
-
-## Step 2
-
-Enter
-
-```sh
-npm install --save nhsapp-frontend
-```
-
-## Step 3
-
-In your HTML editor, open
-
-```sh
-/app/assets/sass/application.scss
-```
-
-After
-
-```sh
-// Import NHS.UK frontend library
-@import 'node_modules/nhsuk-frontend/packages/nhsuk';
-```
+## Before you start
 
-Paste
+The NHS App prototype is a copy of the NHS prototype kit, with added NHS App code and templates.
 
-```sh
-// Import all styles from the NHS App frontend library
-@import 'node_modules/nhsapp-frontend/dist/nhsapp/all';
-```
-
-## Step 4
-
-In your root folder, open
-
-```sh
-/app.js
-```
-
-and find
-
-```sh
-appViews
-```
-
-After
-
-```sh
-path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
-```
-
-Add
-
-```sh
-path.join(__dirname, 'node_modules/nhsapp-frontend/dist'),
-```
-
-So it looks like this
-
-```sh
-const appViews = [
-  path.join(__dirname, 'app/views/'),
-  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
-  path.join(__dirname, 'node_modules/nhsapp-frontend/dist'),
-  path.join(__dirname, 'docs/views/'),
-];
-```
-
-## Step 5
-
-In your root folder, open
+You must follow the [NHS prototype kit setup guide](https://prototype-kit.service-manual.nhs.uk/install) first.
 
-```sh
-/app.js
-```
+## Download
 
-and find
+Download or clone a copy of the [NHS App prototype on GitHub](https://github.com/nhsuk/nhsapp-prototype).
 
-```sh
-app.use('/nhsuk-frontend', express.static(path.join(__dirname, 'node_modules/nhsuk-frontend/dist')));
-```
+## Guides
 
-and on the next line paste
+[NHS prototype kit guides](https://prototype-kit.service-manual.nhs.uk/how-tos) will show you how to use the prototype kit, from creating a simple page to building complex user journeys.
 
-```sh
-app.use('/nhsapp-frontend', express.static(path.join(__dirname, 'node_modules/nhsapp-frontend/dist/nhsapp')));
-```
+## Using components
 
-Once you have installed NHS App frontend, all NHS App components should work in your prototype.
+You can use [NHS design system components](https://service-manual.nhs.uk/design-system) and [NHS App specific components](/components/).
 
-You will now have the latest version installed, later you can easily update to the latest NHS App frontend
+There are 2 ways to use components. You can either use HTML or a Nunjucks macro.
 
-To use the components, you should:
+You can copy the code from the HTML or Nunjucks tabs below any examples:
 
-- find the component in NHS App design components
-- copy the code from the example
-- paste the code into the page in your prototype
+{% example "buttons/button-primary.njk" %}