diff --git a/app/views/how-tos/index.html b/app/views/how-tos/index.html index cff4f11c..f079f1cd 100755 --- a/app/views/how-tos/index.html +++ b/app/views/how-tos/index.html @@ -48,6 +48,12 @@

Updating the kit

  • Updating the kit
  • +

    Advanced usage

    + + + {{ backLink({ "href": "/", "text": "Back to Home", diff --git a/app/views/how-tos/switching-from-govuk-prototype-kit.html b/app/views/how-tos/switching-from-govuk-prototype-kit.html new file mode 100644 index 00000000..6e723659 --- /dev/null +++ b/app/views/how-tos/switching-from-govuk-prototype-kit.html @@ -0,0 +1,120 @@ +{% extends 'layout.html' %} + +{% block pageTitle %} + Switching from the GOV.UK prototype kit - NHS.UK prototype kit +{% endblock %} + +{% block beforeContent %} + {% include "how-tos/includes/breadcrumb.html" %} +{% endblock %} + +{% block content %} +
    + +
    + +

    + Switching from the GOV.UK prototype kit +

    + + +

    + If you have learned how to use the GOV.UK Prototype Kit, you will be able to use the NHS.UK prototype kit. This is because the two prototype kits are built in the same way. However, you must do some things differently. +

    +

    Installing and running the NHS.UK prototype kit

    + +

    +When you are installing and running your prototype: + +{{ list({ + title: "Do", + type: "tick", + items: [ + { + item: 'download the kit using the zip file or Github' + }, + { + item: 'check when you install your prototype that you are using the right version of Node.js - you may need to install and use a different version. If you need to make prototypes for both NHS.UK and GOV.UK you can switch versions of node with a node version manager' + }, + { + item: 'start your local server by entering in the terminal:

    npm run watch
    ' + } + ] +}) }} + +{{ list({ + title: "Don’t", + type: "cross", + items: [ + { + item: 'try to install the prototype kit using the terminal as it will not work' + }, + { + item: 'start your local server the same way as in the GOV.UK Prototype Kit as it will not work' + } + ] +}) }} + + + +

    Making pages

    + +

    + When you are making pages: +

    + +{{ list({ + title: "Do", + type: "tick", + items: [ + { + item: 'use the NHS.UK design system for styles, components and patterns - you can also copy template pages in the NHS prototype kit' + }, + { + item: 'use NHS.UK macro naming conventions which do not have a prefix, for example {{ radios }} instead of {{ govukRadios }}' + }, + { + item: 'use NHS.UK typography classes on headings and other text, for example
    ' + '

    nhsuk-body

    ' | escape + '
    ' + }, + { + item: 'know that the NHS.UK prototype kit does not have some functionality that is in the GOV.UK one, for example the interface to create pages from templates' + }, + { + item: 'know that plugins designed for the GOV.UK Prototype Kit may not work or may need to be installed differently - for example, if you want to use the GOV.UK Prototype Kit Filters plugin you must use instructions for earlier versions of the kit and make changes in filters.js.' + } + ] +}) }} + +{{ list({ + title: "Don’t", + type: "cross", + items: [ + { + item: 'copy pages from the GOV.UK design system or GOV.UK prototype kit and expect them to work - you may need to copy over extra code like CSS to make them work properly' + }, + { + item: 'use GOV.UK macro naming conventions as they will not work' + }, + { + item: 'use GOV.UK typography classes as they will not work' + } + ] +}) }} +

    Using routing and session data

    + +

    You can define routes to do branching logic or other custom behaviour in the same way as the GOV.UK Prototype Kit.

    + +

    You can also add default session data in data/session-data-defaults.js

    + +

    Unlike the GOV.UK Prototype Kit, if you save any changes the the routes file, the app will restart and any session data will revert to the default.

    + +

    Help and support

    + +

    If you have any problems, ask a developer on your team (if you have one), email us or get in touch on the NHS digital service manual #prototype-kit Slack channel.

    + + {% include "how-tos/includes/back-button.html" %} + +
    + +
    +{% endblock %}