Documentation

Getting Started

Downloading the repo

Download the repo from https://github.com/cis-bathnes/pattern-lib

If you clone a project with the toolkit submodules installed you will need to initialise the submodules with the following command in terminal:

git submodule init

This pulls down the files from the submodules.

To update the toolkit to the latest version's of the toolkit repository's submodules you can use:

git submodule update

Or, if you're using Sourcetree, you can double click on the submenus to update them and make sure the files have been pulled down.

Source: https://github.com/alphagov/govuk_frontend_toolkit#using-git-submodules

Starting the toolkit

To work on the toolkit or view it locally. Open terminal, in the root folder run:

npm start

Note - these instructions are from a Mac. We'll add instructions as to how to run this on PCs and VMs soon.

Including In Projects

Start by adding the following files to your page:

<link rel="stylesheet" href="http://bathnes-test.surge.sh/assets/patterns/styles/screen.css">

<script src="http://bathnes-test.surge.sh/assets/patterns/scripts/app.js"></script>

These will give you everything you need to include the styles, components and patterns in your website. You can simply build it using the HTML found in this toolkit.

Updating Submodules

Updating submodules

To update the toolkit to the latest version's of the submodules within the toolkit repository you can use:

$ git submodule update

You'll need to monitor the submodules we build on to see when they change, and what those changes will do.

As we're building on top of the Gov.uk Elements and Frontend Toolkit there's potential for regression when updating them so this should be tested.

The submodules are:

• Gov.uk Elements https://github.com/alphagov/govuk_elements
• Gov.uk Frontend Toolkit https://github.com/alphagov/govuk_frontend_toolkit

The 'git submodule update' command actually tells Git that you want your submodules to each check out the commit already specified in the index of the superproject. If you want to update your submodules to the latest commit available from their remote, you will need to do this directly in the submodules.

So in summary:

git submodule add ssh://bla submodule_dir

git submodule init

time passes, submodule upstream is updated and you now want to update

change to the submodule directory cd submodule_dir

checkout desired branch git checkout master

update git pull

get back to your project root cd ..

now the submodules are in the state you want, so git commit -am "Pulled down update to submodule_dir"

Working With The Toolkit

Adding new components

Styles

Style for new designs should be added to the appropriate folder in src/assets/patterns/styles/.

JavaScript

JS for new designs should be added to src/assets/patterns/scripts/app.js.

HTML

HTML for new designs should be added to the appropriate folder in src/assets/patterns/materials/.

When adding HTML the title of your new design element comes from the file title. So new-element.html will have a title of "New Element". You can also include notes about that element be presented in the toolkit as shown below:

---
notes: |
  - Add a note here
  - Each line should start with a Markdown bullet (either *, + or -).
---

<div class="new-element-wrapper">
    <h2 class="new-element-title">Title</h2>
    <p>This is a new element.</p>
</div>