diff --git a/docs/assets/images/docs/backwards-compatibility-atom.png b/docs/assets/images/docs/backwards-compatibility-atom.png deleted file mode 100755 index a59bdb3fa..000000000 Binary files a/docs/assets/images/docs/backwards-compatibility-atom.png and /dev/null differ diff --git a/docs/assets/images/docs/mac-home-folder-projects.png b/docs/assets/images/docs/mac-home-folder-projects.png deleted file mode 100755 index 7e5b84dd4..000000000 Binary files a/docs/assets/images/docs/mac-home-folder-projects.png and /dev/null differ diff --git a/docs/assets/images/docs/prototype-kit-homepage.png b/docs/assets/images/docs/prototype-kit-homepage.png deleted file mode 100755 index 9046514fc..000000000 Binary files a/docs/assets/images/docs/prototype-kit-homepage.png and /dev/null differ diff --git a/docs/assets/images/docs/prototype-kit-tutorial-question-1.png b/docs/assets/images/docs/prototype-kit-tutorial-question-1.png deleted file mode 100755 index 986ca542c..000000000 Binary files a/docs/assets/images/docs/prototype-kit-tutorial-question-1.png and /dev/null differ diff --git a/docs/assets/images/docs/prototype-kit-tutorial-question-2.png b/docs/assets/images/docs/prototype-kit-tutorial-question-2.png deleted file mode 100755 index d648a79eb..000000000 Binary files a/docs/assets/images/docs/prototype-kit-tutorial-question-2.png and /dev/null differ diff --git a/docs/assets/javascripts/docs.js b/docs/assets/javascripts/docs.js deleted file mode 100755 index c09abd4d4..000000000 --- a/docs/assets/javascripts/docs.js +++ /dev/null @@ -1,14 +0,0 @@ -/* global $ */ - -// Warn about using the kit in production -if ( - window.sessionStorage && window.sessionStorage.getItem('prototypeWarning') !== 'false' && - window.console && window.console.info -) { - window.console.info('GOV.UK Prototype Kit - do not use for production') - window.sessionStorage.setItem('prototypeWarning', true) -} - -$(document).ready(function () { - window.GOVUKFrontend.initAll() -}) diff --git a/docs/assets/sass/docs.scss b/docs/assets/sass/docs.scss deleted file mode 100755 index 3e73db109..000000000 --- a/docs/assets/sass/docs.scss +++ /dev/null @@ -1,119 +0,0 @@ -// We can't mount GOV.UK Frontend's assets at root as it's done automatically by the extensions framework. -$govuk-assets-path: '/govuk/assets/'; - -@import "node_modules/govuk-frontend/govuk/all"; - -img{ - max-width: 100%; -} - -// adjust code block font-size to 19px -.hljs { - font-size: 19px; - line-height: 25px; -} - -.app-table--fixed { - table-layout: fixed; -} - -.app-\!-db { - display: block !important; -} - -.app-table--fixed { - table-layout: fixed; -} - -.app-\!-db { - display: block !important; -} - -.app-code { - font-size: 16px; - position: relative; - margin: 0; - padding: govuk-spacing(3); - overflow: auto; - border: 1px solid $govuk-border-colour; - background-color: govuk-colour("light-grey", $legacy: "grey-4"); - max-width: 38em; - @include govuk-responsive-margin(5, "bottom"); -} - -.app-prose-scope { - - h1 { - @extend %govuk-heading-xl; - } - - h2 { - @extend %govuk-heading-l; - } - - h3 { - @extend %govuk-heading-m; - } - - h4 { - @extend %govuk-heading-s; - } - - p { - @extend %govuk-body-m; - } - - strong, - b { - @include govuk-typography-weight-bold; - } - - ul, - ol { - @extend %govuk-list; - } - - ol { - @extend %govuk-list--number; - } - - ul { - @extend %govuk-list--bullet; - } - - a { - @extend %govuk-link; - } - - hr { - @extend %govuk-section-break; - @extend %govuk-section-break--visible; - @extend %govuk-section-break--xl; - } - - pre { - @extend .app-code; - } - - p code, - li code { - color: #d13118; - background-color: govuk-colour("light-grey", $legacy: "grey-4"); - padding: 0 govuk-spacing(1); - } - - // TODO: Blockquotes are likely the most semantic element to be using, update to use the inset component directly. - blockquote { - margin-left: 0; - @extend .govuk-inset-text; - } -} - -.app-prose-scope ul + h2, -.app-prose-scope ul + h3, -.app-prose-scope ul + h4, -.app-prose-scope pre + h2, -.app-prose-scope pre + h3, -.app-prose-scope pre + h4 { - @include govuk-responsive-margin(4, "top"); -} diff --git a/docs/documentation/adding-css-javascript-and-images.md b/docs/documentation/adding-css-javascript-and-images.md deleted file mode 100755 index 394b40c41..000000000 --- a/docs/documentation/adding-css-javascript-and-images.md +++ /dev/null @@ -1,84 +0,0 @@ -# Adding CSS, JavaScript and Images - -The Prototype Kit comes with standard GOV.UK Frontend styles and components for you to use in your prototypes. However if you need to add your own CSS (Cascading Style Sheets), JavaScript or images, use the `/app/assets` folder. - -The Prototype Kit processes all the files in the `/app/assets` folder, and puts the processed files in `/public`. - -Do not change files in the `/public` folder because it’s deleted and rebuilt every time you make a change to your prototype. - -## CSS - -CSS lets you change how web pages look, for example text sizes, colours or spacing. - -To add styles use: - -``` -/app/assets/sass/application.scss -``` - -Do not edit the file `/public/styles/application.css` because it’s deleted and rebuilt every time you make a change to your prototype. - -The Prototype Kit uses [Sass](https://sass-lang.com/guide), which adds extra features to CSS. - -### Using import - -If you have a very long application.scss file, you can split it up into multiple files and import those into `application.scss`. Use an underscore (_) at the start of the import file filenames, for example: - -``` -/app/assets/sass/_admin.scss -``` - -Import this file into your `application.scss` file without the underscore: - -``` -@import "admin"; -``` - -## JavaScript - -You can use JavaScript to make changes to a web page without loading a new one. For example a user could enter some numbers, then JavaScript displays the results of a calculation without loading a new page. - -To add JavaScript use: - -``` -/app/assets/javascripts/application.js -``` - -Do not edit the file `/public/javascript/application.js` because it’s deleted and rebuilt every time you make a change to your prototype. - -## Images - -If you add images to `/app/assets/images` the Prototype Kit will copy them to `/public`. - -For example if you add an image: - -``` -/app/assets/images/user.png -``` - -Use it in your page like this: - -``` -User icon -``` - -Use ‘alt’ text to describe the image for screen readers. - -Do not put files directly in `/public` because it’s deleted and rebuilt every time you make a change to your prototype. - -## Other files - -If you need to use other files in your prototype, you can add them to `/app/assets` and the Prototype Kit will copy them to `/public`. You can use sub-folders in the assets folder. - -For example if you add a PDF: - -``` -/app/assets/downloads/report.pdf -``` - -Link to it like this: - -``` -Download the report -``` -Do not put files directly in `/public` because it’s deleted and rebuilt every time you make a change to your prototype. diff --git a/docs/documentation/backwards-compatibility.md b/docs/documentation/backwards-compatibility.md deleted file mode 100755 index 282b474b6..000000000 --- a/docs/documentation/backwards-compatibility.md +++ /dev/null @@ -1,61 +0,0 @@ -# Using backwards compatibility - -Version 7 of the Prototype Kit uses the new GOV.UK Design System. It is not compatible with prototypes built with older versions by default. - -Backwards compatibility lets you import a large old prototype into version 7, without having to rewrite it. You can update old pages one by one as you need to, and add new pages. - -You will end up with 2 'apps' in your prototype: - -**/app** using version 7 - -**/app/v6** using version 6 - -If any pages or routes exist in both apps, the one in version 7 will win. - -## Instructions - -1. Make a note of your Prototype Kit version in **VERSION.txt** in your prototype folder. - -1. Make sure you have a backup of your prototype folder, for example by copying it to another folder or by uploading to GitHub. - -1. Delete everything in your prototype folder except for the **app** and **.git** folders. (.git may be hidden). - -1. Rename your **app** folder to **v6** - -1. Find and replace all instances of **/public/** to **/public/v6/** in your code. -In Atom, press **cmd shift F**. It looks like this: -![Screenshot of Atom find and replace](/public/images/docs/backwards-compatibility-atom.png) - -1. [Download the latest Prototype Kit](/docs/download) and unzip it. - -1. Copy everything from the new Prototype Kit folder into your prototype folder. - -1. Move your **v6** folder into the new **app** folder. - -1. Update **app/config.js** to your settings, in particular the **serviceName**. You can then safely remove **app/v6/config.js**. - -1. On the command line, in your prototype folder, run **npm install**, then **npm start**. - -1. If your previous Prototype Kit version was older than 6.3.0, follow the guidance below about updating from older versions. - -## Updating pages to use version 7 - -You can now create new pages using version 7 by working in the app/views folder. - -You can update old pages by moving them from app/v6/views to app/views. You will then need to update the code on these pages to work with version 7. See the [updating your code guide in the GOV.UK Design System](https://design-system.service.gov.uk/get-started/updating-your-code/). - -## Updating from versions older than 6.3.0 - -The instructions above are for updating from version 6.3.0 of the Prototype Kit. If you had an older version, follow the normal instructions then run the commands below: - -### 6.2.0 - -``` -npm install govuk-elements-sass@3.0.1 govuk_frontend_toolkit@5.1.2 govuk_template_jinja@0.22.1 -``` - -### 6.1.0 or 6.0.0 - -``` -npm install govuk-elements-sass@3.0.1 govuk_frontend_toolkit@5.1.2 govuk_template_jinja@0.19.2 -``` diff --git a/docs/documentation/creating-routes.md b/docs/documentation/creating-routes.md deleted file mode 100755 index 414a02fa3..000000000 --- a/docs/documentation/creating-routes.md +++ /dev/null @@ -1,47 +0,0 @@ -# Creating routes - -You may want to make prototypes that are more complex than simple HTML files. For example, you may want to respond to input from a form, and show different pages based on answers given by the user. - -To do this you will need to create 'routes' - rules for the server to respond to certain URLs. - -For example, with a route of `/sample` the URL is: - - http://localhost:3000/sample - -All routes for the application are kept in the `routes.js` file. They follow this format: - - verb(route, callback(request, response) { - response.render(template, data); - }); - -Let's break this down into bits: - -* **verb** : the type of request ('get' or 'post') -* **route** : the route section of the URL as explained above -* **callback** : a function that contains the code executed when that route is requested -* **request** : the 1st parameter sent to the callback, an object representing the HTTP request made -* **response** : the 2nd parameter sent to the callback, an object representing the HTTP response that will be sent -* **response.render** : method of the response object used to create a page to send back to the browser that made the request -* **template** : the 1st parameter sent to response.render, the name of the template file used to render the page, minus its `.html` extension -* **data** : [optional] the 2nd parameter sent to response.render, an object containing variables to send into the template - -So as an example, a request for the URL `http://localhost:3000/examples/template-data` has this route: - - router.get('/examples/template-data', function(req, res) { - res.render('examples/template-data', { 'name' : 'Foo' }); - }); - -We are saying that for a `get` request for the `/template-data` route we should run the code: - - res.render('examples/template-data', { 'name' : 'Foo' }); - -This is the `render` method of the `res` parameter being run with two parameters: - -- the template called `template-data` -- the data object `{ 'name' : 'Foo' }` - -Template files are found this way: `/views/` + `template` parameter + `.html`. The `sample` template therefore points to the `/views/examples/template-data.html` file. - -In the same way, the template `/examples/hello_world` would point to the `/examples/hello_world.html` file. - -[Read the Express documentation for routes](http://expressjs.com/4x/api.html#app.VERB) \ No newline at end of file diff --git a/docs/documentation/extension-system.md b/docs/documentation/extension-system.md deleted file mode 100755 index c979d8821..000000000 --- a/docs/documentation/extension-system.md +++ /dev/null @@ -1,3 +0,0 @@ -# Extension system - -The extension system information should go here before it's adopted into GOVUK. diff --git a/docs/documentation/install/developer-install-instructions.md b/docs/documentation/install/developer-install-instructions.md deleted file mode 100755 index f926d3361..000000000 --- a/docs/documentation/install/developer-install-instructions.md +++ /dev/null @@ -1,22 +0,0 @@ -# Instructions for developers - -It's built on the [Express](http://expressjs.com/) framework, and uses [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend). - -If you already installed a previous version of the Prototype Kit, you can [update the kit](/docs/updating-the-kit) instead. - -## Requirements - -node.js - version 12.x.x - -## Install dependencies - -``` -npm install -``` - -## Run the kit -``` -npm start -``` - -Go to [localhost:3000](http://localhost:3000) in your browser. diff --git a/docs/documentation/install/install-the-kit.md b/docs/documentation/install/install-the-kit.md deleted file mode 100755 index 6f6d8badb..000000000 --- a/docs/documentation/install/install-the-kit.md +++ /dev/null @@ -1,68 +0,0 @@ -# Install the kit - -## Download the kit as a zip - -The simplest way to get the kit is to download it as a zip. You'll use a new copy of the kit for each new prototype you make. That way your prototypes don’t interfere with each other. - -### Decide where you want to keep your prototypes - -We recommend keeping all your prototypes in one folder called `projects`. - -#### Mac users - -Create a folder called `projects` in your home folder. You can open your home folder by opening a new finder window, and selecting `go > home` from the top menu. - -![Screenshot of a 'projects' folder in the mac home folder](/public/images/docs/mac-home-folder-projects.png) - -#### Windows users - -Create a folder called `projects` in your `Documents` folder. - -### Unzip the kit and move it - -Unzip the kit you downloaded - you should end up with a folder called `govuk-prototype-kit` followed by the version number. - -Rename the folder to something descriptive for your prototype. For this guide, we’ll use `juggling-licence-prototype`. - -Move the folder into your `projects` folder. - -## Terminal basics - -The terminal (on Mac and Linux, git bash on Windows) lets you type in commands and run programs on your computer. You can also use it to browse your file system, for example to open folders. - -You can follow a [tutorial on basic terminal commands](https://tutorials.codebar.io/command-line/introduction/tutorial.html) on the codebar website. - -### Navigating to your prototype - -You need to navigate to your prototype in the terminal. Most commands for the kit need to be run in the prototype folder. - -If you're using a Mac, enter: - -``` -cd ~/projects/juggling-licence-prototype -``` - -If you're using Windows, enter: - -``` -cd ~/Documents/projects/juggling-licence-prototype -``` - -If any of your folder names contain spaces, you must add quotation marks around everything after `~/`. For example: - -``` -cd ~/"a folder name with spaces/Documents/projects/juggling-licence-prototype" -``` - -## Install the kit - -### Install modules - -You need to download extra code used by the kit before it can run. You can get this by running: -``` -npm install -``` -The install may take up to a minute. Whilst installing it may `WARN` about some items - this is ok. As long as there are no `ERROR`s you can continue. - - -Next (run the kit) diff --git a/docs/documentation/install/introduction.md b/docs/documentation/install/introduction.md deleted file mode 100755 index b2a90e2fa..000000000 --- a/docs/documentation/install/introduction.md +++ /dev/null @@ -1,21 +0,0 @@ -# Installation guide for new users - -This guide will walk you through installing and getting started with the kit. You don’t need any technical knowledge to follow along. If you get stuck, contact us using the [#prototype-kit Slack channel](https://ukgovernmentdigital.slack.com/messages/C0647LW4R/), or if you have a developer on your team, they should be able to help. - -Installation takes up to 30 minutes depending on how much you need to install. - -If you already installed a previous version of the Prototype Kit, you can [update the kit](/docs/updating-the-kit) instead. - -If you’re comfortable using git and the terminal, you may prefer the [developer friendly instructions](developer-install-instructions). - -> This guide is a work in progress. Please help [contribute](https://github.com/alphagov/govuk-prototype-kit/blob/master/CONTRIBUTING.md) to make it even better. - -## Introduction - -The GOV.UK Prototype Kit provides a simple way to make interactive prototypes that look and feel like pages on GOV.UK. These prototypes can be used to design and lay out pages, and to use in user research. - - - -You’ll use a copy of the kit for each different prototype you want to make - they’re self contained. Once installed, the kit uses about 100mb. - -Next (requirements) diff --git a/docs/documentation/install/requirements.md b/docs/documentation/install/requirements.md deleted file mode 100755 index 9cca9d249..000000000 --- a/docs/documentation/install/requirements.md +++ /dev/null @@ -1,94 +0,0 @@ -# Requirements - -The kit runs on Mac, Windows and Linux. At a minimum you’ll need `node.js` (install instructions below) and a web browser. - -This guide recommends additional software which will be used in later guides. - -## Software you need - -You'll usually need admin access to your machine to install the software. - -If you do not have admin access, ask your IT team to install the software for you. - -GDS staff can install the software themselves with Managed Software Centre (MSC). - -You'll need: - -* Node.js 12.x.x -* Atom (text editor) -* Git bash (Windows) - -## Terminal - -You'll need a terminal application to install, start and stop the kit. Using a terminal is sometimes called ‘using the command line’. - -### Mac users - -Macs come with `Terminal.app`. It’s located in the `Utilities` folder in the `Applications` folder. You can also find it using spotlight (magnifying glass icon in the top right) and typing 'terminal'. - -### Windows users - -This guide will use `Git Bash` as a terminal instead of the existing `CMD` application. Git Bash is more fully featured and uses the same commands as Mac and Linux, so instructions in this guide work for all. - -Installing `git bash` installs two things for you: a terminal (for entering commands), and git (used later to share your work with others). - -#### Installing git bash - -Download [Git bash (direct download)](https://git-scm.com/download/win). - -Install with all default options. - -### Entering commands in the terminal - -Commands to be entered in to the terminal will be inset like this: -``` -command to be typed in to terminal -``` -Once you’ve typed the command, press enter to send it. - - -## Node.js version 12 LTS - -The kit is designed to work with Node.js version 12 LTS. The kit works with any 12.x.x version. - -### Check if you have Node.js - -In terminal (git bash in Windows): -``` -node --version -``` -If it says `command not found` or `Error 0x2 starting node.exe --version` you don’t have node and will need to download and install it. - -If the version number starts with 12 you have the correct version installed. - -If it says another number such as `0.12` or `5.x.x`, you need to download and install version 12. - -### Download and install Node.js - -#### Mac / Windows users - -Download version 12 from [nodejs.org](https://nodejs.org/en/). - -Run the installer with all default options. - -#### Linux users - -Follow the instructions on the [Node.js](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions -) site. Make sure you get version 12. - -### Once Node is installed - -You’ll need to quit and restart the terminal to be able to use Node for the first time. - -To check it is installed correctly you can again run: -``` -node --version -``` - -If it’s installed correctly it should show a number starting with 12. - -## Atom (text editor) - -You’ll need a text editor to edit and make changes to your prototype. We recommend [Atom](https://atom.io/) - which is free and has lots of useful features. - -Next (install the kit) diff --git a/docs/documentation/install/run-the-kit.md b/docs/documentation/install/run-the-kit.md deleted file mode 100755 index 644ef0442..000000000 --- a/docs/documentation/install/run-the-kit.md +++ /dev/null @@ -1,41 +0,0 @@ -# Run the kit - -You’ll use the terminal to start and stop the kit. - -## Open the prototype folder in terminal - -In terminal, navigate to your prototype folder. - -## Running the kit - -In terminal: -``` -npm start -``` - -After the kit has started, you should see a message telling you that the kit is running: -``` -Listening on port 3000 url: http://localhost:3000 -``` - -## Check it works - -In your web browser, visit http://localhost:3000 (opens in a new tab) - -You should see the prototype welcome page. - -![Screenshot of the Prototype Kit homepage](/public/images/docs/prototype-kit-homepage.png) - -## Quitting the kit - -It’s fine to leave the kit running for days or while your computer is asleep. - -### To quit the kit - -In terminal press the `ctrl` and `c` keys together. - -## Installation complete - -The kit is now installed. Congratulations! - - diff --git a/docs/documentation/make-first-prototype/add-questions.md b/docs/documentation/make-first-prototype/add-questions.md deleted file mode 100755 index 14ac06260..000000000 --- a/docs/documentation/make-first-prototype/add-questions.md +++ /dev/null @@ -1,52 +0,0 @@ -# Add questions to your question pages - -Copy the code from the [GOV.UK Design System](https://design-system.service.gov.uk/) to add page elements like radios and text inputs. - -## Add radios to question 1 - -1. Go to the [stacked radios section of the Design System](https://design-system.service.gov.uk/components/radios/#stacked-radios). -2. Select **HTML**, then select **Copy code**. -3. Open `juggling-balls.html` in your `app/views` folder. -4. Replace the 2 example `

...

` paragraphs with the HTML code you copied. -5. Remove the fourth radio option `
...
` block, because we only need 3 radio options. -6. Select the `

` line you edited when you [created the page](create-pages#question-pages), then cut and paste it so it replaces the `

` line in the copied code. - -Replace the text in the 3 `