BATHNES Digital Toolkit

A digital toolkit for Bath and North East Somerset Council, created to enable internal and external developers to create high quality experiences more easily.

This toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts. It contains real working examples, code snippets, documentation, and style guidelines.

Usage

The toolkit is based around the following elements, in order of granularity:

  • Styles: The core parts of the design and brand; colour, logos, layouts, typography
  • Components: Groups of elements that can be used in a design
  • Patterns: Design solutions to common problems
  • Templates: Example page templates

To update or make changes run npm install in the root folder on your local machine will output changes from the src folder to the dist folder. The dist folder can then be pushed to a live server.

Help

For help in using the toolkit please see the Documentation

For more information, support etc. contact cis@bathnes.gov.uk

Why not just a link to CSS and JS files?

Because by providing a design system made up of styles, compononents and patterns we can create high quality web sites that to a standard. They will look similar, work the same and provide people using it with a familiar experience regardles of the touchpoint. It will also speed up development as you can copy HTML from this toolkit and drop it into your designs. It's been tested in multiple browsers, devices and for accessibility to AA level.

How is this used by https://style.bathnes.gov.uk/?

https://style.bathnes.gov.uk/ is the publicly available online reference site for this toolkit. It shows the contents of the dist folder.

Folder structure

Within the repo we have the following folder structure:

  • dist - holds the processed code for the public toolkit and should be uploaded to https://style.bathnes.gov.uk
  • govuk_elements - The GovUK Elements added as a GIT submodule
  • govuk_frontend_toolkit - The GovUK Frontend Toolkit added as a GIT submodule
  • node_modules - holds node files used to work the toolkit when editing it. Updated by running npm install
  • src - the working folder for the toolkit

To update or edit the toolkit you'll need to run npm install and work out of the src folder. Lets look at its contents:

  • assets
    • patterns
      • images - holds images for the toolkit
      • scripts - holds JavaScript used in the toolkit
        • app.js - file used for JS, also imports JS from the GovUK Elements and Frontend Toolkit repos. Outputs to the dist folder for inclusion in projects.
      • styles
        • components - SCSS files for components
        • core - core SCSS files for accessibility, colour, and forms that builds upon the GovUK assets
        • design-patterns - SCSS files for specific design patterns
      • screen.scss - files used to pull together all SCSS files including those from the GovUK Elements and Frontend Toolkit. Outputs to the dist folder for inclusion in projects.
    • ui - contains SCSS and JS for the toolkit framework including the navigation menu and style used to present and explain the styles, components and patterns within.
  • Data - holds .yml files to store data models in.
  • Docs - contains Markdown files to appear in the docs section of the toolkit.
  • Materials - contains all HTML for the toolkit, split into the following:
    • 01-styles - holds all HTML for styles including colours, layouts, logos and typography
    • 02-components - holds all HTML for components
    • 03-patterns - holds all HTML for patterns
  • Views - contains full HTML pages for the toolkit
    • layouts - holds page layouts for the toolkit (default.html) plus commercial and hero HTML pages
    • templates - holds HTML templates we've included from GovUK assets
    • 01-styles.html - page that shows all styles
    • 02-components.html - page that shows all components
    • 03-patterns.html - page that shows all patterns
    • docs.html - page that shows all docs
    • index.html - toolkit homepage (this page)
    • templates.html - page that shows all the standalone templates