About TNA Frontend
TNA Frontend contains a library of code for all our styles, components, typography, grid system and more. It defines the look and feel of our new services. It was even used to style and lay out the page you are currently reading.
We have used an open source approach, which means anyone can access our source code, understand how we test it and see a complete timeline of the changes that have been made.
The open source approach comes from the guidance in the GOV.UK Service manual, which advises making source code open and reusable.
Public services are built with public money. So unless there’s a good reason not to do so, the code they’re based on should be made available for people to reuse and build on.
Open source code can be reused by developers working in government, avoiding duplication of work and reducing costs for government as a whole. And publishing source code under an open licence means that you’re less likely to get locked in to working with a single supplier.
The National Archives publish everything related to TNA Frontend on GitHub. This is a platform for developing, hosting and sharing code. It is used by organisations around the world including GOV.UK.
github.com
TNA Frontend
Explore TNA frontend on GitHub.
Version 1
We recently released v1.0.0 of TNA Frontend. This means the styles and components we have developed are ready to be used in production (live services).
Before its release, each component has been tested in at least one new live service and has passed an audit from our partners at the Digital Accessibility Centre (DAC). This organisation works with people who have accessibility needs to assess our components' compliance with the Web Content Accessibility Guidelines (WCAG).
Additionally, everything in TNA Frontend is tested with progressive enhancement in mind. This means that the same basic functionality should be available to everyone, regardless of what browser they are using. Due to this, while pages might look different on older browsers, users will be able to complete the same tasks as those using newer browsers.
Building a design system
The target audience for TNA Frontend is primarily developers and designers. It may be difficult to use for people without the necessary skills. To support a wider user-base, we also published a storybook of the styles and components. However, this does not explain how to put our building blocks of styles and components together.
Therefore, building on the storybook, The National Archives Design System acts as a showcase of our styles and components. It also provides advice on how styles and components work, where to use them and how they can be configured. This is designed for content designers, product owners and service designers by providing a more traditional website-based experience.
The system also contains components that are not ready to use. These have been labelled as 'to be reviewed'. Once they have gone through testing and have been used in a live service, they can move into 'Official' status.
The Design System uses a practice called 'eating your own dog food' or 'dogfooding'. This means that we use TNA Frontend for internal services in addition to external services as often as possible. By doing this, we can catch issues earlier and test with users more frequently.
The National Archives Design System homepage.
The National Archives Design System
Explore The National Archives Design System.
Inspiration
TNA Frontend and the Design System act as a single library of styles and relevant documentation for The National Archives.
Much of the inspiration for both TNA Frontend and The National Archives Design System has come from central government's GOV.UK Frontend and GOV.UK Design System. These are recognised globally for their dedication to open source code and approach to accessibility.
Next steps
TNA Frontend follows semantic versioning, which is a standard method for creating meaningful and useful version numbers. This means that:
- Any tiny patches and bug fixes will add
1to the last number, sov1.0.0would becomev1.0.1 - New features and functionality that does not break backwards compatibility (meaning the changes still work with older versions) will add
1to the middle number, sov1.0.0would becomev1.1.0 - Major versions that include breaking changes (where a developer would have to fix or rebuild part of a service to work with an update to the component) would change the first number, so
v1.0.0would becomev2.0.0
We have planned many improvements to TNA Frontend. As CSS continues to develop and be available to more people, we can look to simplify and optimise our codebase. We also plan to add new features and customisations, which will benefit all The National Archives' services that use it.
Get started with TNA Frontend
Explore documentation on The National Archives Design System to see how to get started with TNA Frontend.
