Skip to main content Skip to list of styles
Beta

This is a new service – give us your feedback to help improve it.

Styles

Media

Provide services for a variety of screen sizes as well as print media.

Contents

  1. Device sizes
  2. Print
  3. High contrast

Device sizes

Responsive breakpoints are referred to in relative size terms rather than specific devices such as "desktop", "tablet" and "mobile".

TNA Frontend has definitions for four different device sizes:

The default device breakpoints for these sizes are:

Media queries

Use the provided media tools from TNA Frontend to help you with media queries. 

@use "@nationalarchives/frontend/nationalarchives/tools/media";

.my-div {
  display: flex;

  @include media.on-tiny {
    flex-direction: column;
  }
}

The available mixins are:

Query Tiny Small Medium Large
on-tiny Yes No No No
on-small No Yes No No
on-medium No No Yes No
on-large No No No Yes
on-mobile Yes Yes No No
on-smaller-than-large Yes Yes Yes No
on-larger-than-tiny No Yes Yes Yes
on-larger-than-mobile No No Yes Yes

Print

TNA Frontend includes a separate print.css stylesheet.

The stylesheet will hide some page elements when printing such as the header and footer components.

Other elements can be hidden with the class tna-!--hide-on-print.

High contrast

TNA Frontend has support for additional styles in high contrast mode.

See colours - high contrast themes on how to impliment these.

Back to top