The clever folks over at the Government Digital Service (GDS) have created a prototype kit which allows for the rapid development of prototypes for government websites. This project adds a slight extension to the original which allows users to create their prototypes using CCS stylings.
Apart from the additional CCS assets, this project is identical and kept up to date with GOV.UK Prototype Kit and all credit goes to them for making this project work. Because of this, you can use the documentation found on the GOV.UK Prototype Kit site when working with this project.
The Prototype Kit provides a simple way to make interactive prototypes that look like pages on GOV.UK and CCS. These prototypes can be used to show ideas to people you work with, and to do user research.
Read the project principles that GDS have in mind for this kit.
If you publish your prototypes online, they must be protected by a username and password. This is to prevent members of the public finding prototypes and thinking they are real services.
You must protect user privacy at all times, even when using prototypes. Prototypes made with the kit look like GOV.UK, but do not have the same security provisions. Always make sure you are handling user data appropriately.
To install this kit, you can follow the same instructions that are described in the GOV.UK documentation. The only difference is that you want to be installing from this GitHub repository instead of the GOV.UK one.
CCS has a repository which contains assets used on the CCS website called CCS-Frontend-Kit. These are the assets we are adding into the project to be used when creating a prototype.
We use a script which adds the CCS-Frontend-Kit into the node package and then adds all the relevant assets into the apps assets folder.
The purpose for doing this via a script was to make the process repeatable in case updates happen to CCS-Frontend-Kit or GOV.UK Prototype Kit which affect the build.
The script works by doing the following steps:
- Removing existing CCS assets (if they exists). This allows for a clean re-adding of the
CCS-Frontend-Kitin the situation where the assets have been updated/changed. - Install the
ccs-frontend-kitpackage usingnpm - Copy the following static CCS assets to the
app/assetsfolder:- Images
- Fonts
- SVGs
- Import
styles.scssinto the existingapplication.scss. As the assets are compiled into thepublic/folder in a single file, we do not need to copy all stylesheet files into the main application as the import will take care of this for us. - Import the JavaScript files and add them to the
app/views/includes/scripts.htmlfile so they are properly loaded in the application. Note, we do not importJQueryas it is already a part of the initial GOV.UK Prototype Kit project.
And that is all there is to this project. As previously stated, the hard work was done over at the Government Digital Service so any credit belongs to them.
This project only adds the CCS assets so that you can use them out of the box.
You can see an example of a page using the CCS assets here.
As this is an extension of the GOV.UK Prototype Kit, which is maintained by the Government Digital Service. If you’ve got a question or need support that is related to using the CCS assets, you can:
For any other issues related to using the prototype kit, please contacts GDS. If you are unsure where to send your question, then contact CCS and we can help redirect the request to GDS if necessary.
You can contribute to the original GOV.UK Prototype Kit, by viewing the information in this section of the project README.
As this project is for internal use within CCS we are not currently accepting code contributions. However, if you have an idea on how we can improve this project, feel free to create an issue.
If you have discovered a security vulnerability in this code, we appreciate your help in disclosing it to us in a responsible manner.
Please follow the CCS vulnerability reporting steps, giving details of any issue you find. Appropriate credit will be given to those reporting confirmed issues.