🛠 Hackney prototype kit

Use this kit to quickly create HTML prototypes of Hackney services.

It's been built to work with the new Hackney Design System and to need minimal knowledge of coding to get started.

If you're looking for an even simpler way to get started, you could experiment with this CodePen instead.

If you need help using this kit, post in the #hackit-design-system channel on Slack.

👩‍💻 Get started

There are two ways to use the prototyping kit, depending on whether you want to download and install it on your computer.

1. Use CodeSandbox

Run it in CodeSandbox now

Recommended for beginners.

You can play with the prototyping kit through your web browser with CodeSandbox. It will take a few minutes to start up for the first time. If you have issues, try refreshing your browser tab.

CodeSandbox will ask you to "fork" the project to make changes. You can create a free account if you want to save your prototypes.

2. Install it locally

Recommended for developers and technical people.

You'll need Node.js installed to use the kit locally.

1. Download this repository to your machine by Clicking the green "Code" button at the top right of the screen and choose "Download ZIP".
2. Extract the zip file.
3. In your terminal, navigate to the folder you've extracted the kit to and run npm install.
4. Once installation has finished, run npm start.

You'll be able to access your prototypes in your browser at http://localhost:8080.

If you need help installing Node.js and using the terminal, you can follow this guide for the GOV.UK prototype kit.

🎨 Making a prototype

1. Open pages/index.html in a text editor of your choice. We recommend VS Code.
2. Replace title: My first page with the title of your page.
3. Find each component you want to include in the design system docs.
4. Copy the component HTML and paste into index.html, making any changes necessary.
5. Add any headings and body text that your page needs, using the design system's typography reference.
6. To create other pages, copy and paste index.html as a new file in the pages folder and save it under a new name.

It will automatically refresh as you make changes.

If you want to change the page layout, look in _includes/layout.html, where you will find placeholder comments for different components such as: header and breadcrumbs.

🌍 Publishing a prototype to the web

You might want to publish a prototype to the web to share it with colleagues or user research participants.

The easiest way to publish your prototype is with Netlify.

If you've used CodeSandbox to make your prototype, you can deploy it to Netlify or Vercel straight from there.

If you've made your prototype locally, drag your folder onto Netlify here.

Publishing it somewhere else

This kit is made on the static site generator Eleventy, so it will work anywhere you can deploy static websites, including Vercel, Github Pages and Amazon S3. Eleventy has examples here.

🧱 How it works

Under the hood, this is an Eleventy site that uses Parcel to compile JavaScript. If this doesn't mean anything to you, you don't need to worry about it.