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.
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.
For help in using the toolkit please see the Documentation
For more information, support etc. contact firstname.lastname@example.org
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
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
- 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:
- images - holds images for 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.
- 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.
- 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
- 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