Skip to main content Skip to list of styles
Beta

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

Styles

Devices

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". This is because of the huge variation of devices available.

TNA Frontend has definitions for four different device sizes:

Device size Description Pixel width
large desktop-like devices 1025px and above
medium landscape handheld devices 769px to 1024px
small portrait tablets 481px to 768px
tiny portrait mobile phones 480px and below

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 for the device sizes 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