Update column widths to be a <dl> and add more detail about device sizes

nationalarchives · Aug 1, 2024 · 852f964 · 852f964
1 parent 01b8a42
commit 852f964
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/styles/layout/index.md b/src/styles/layout/index.md
@@ -13,10 +13,18 @@ group: styles
 
 ## Column widths
 
-- Large devices have a 12 column grid
-- Medium devices have a 6 column grid
-- Small devices have a 4 column grid
-- Tiny devices have a 2 column grid
+[Different sized devices](../media/#device-sizes) have a different number of columns in their grid:
+
+<dl class="tna-dl tna-dl--plain">
+  <dt>Large devices</dt>
+  <dd>12 column grid</dd>
+  <dt>Medium devices</dt>
+  <dd>6 column grid</dd>
+  <dt>Small devices</dt>
+  <dd>4 column grid</dd>
+  <dt>Tiny devices</dt>
+  <dd>2 column grid</dd>
+</dl>
 
 Based on the number of columns set for each size, (i.e. `$column-count`), there are size classes for all column widths up to that number. These numbers will **only be available in their simplest form**. This means that there is no `tna-column--width-8-12` class; only a `tna-column--width-2-3`.
 

diff --git a/src/styles/media/index.md b/src/styles/media/index.md
@@ -5,23 +5,25 @@ description: Provide services for a variety of screen sizes as well as print med
 group: styles
 ---
 
+## Device sizes
+
 Responsive breakpoints are referred to in relative size terms rather than specific devices such as "desktop", "tablet" and "mobile".
 
 [TNA Frontend](https://github.com/nationalarchives/tna-frontend) has definitions for four different device sizes:
 
-- large
-- medium
-- small
-- tiny
+- large (desktop-like devices)
+- medium (medium and small tablets)
+- small (landscape mobile phones)
+- tiny (portrait mobile phones)
 
-Device sizes can vary but the [default breakpoints](https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/variables/_media.scss) are:
+The [default device breakpoints](https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/variables/_media.scss) for these sizes are:
 
-- 1025px and above for large devices
-- 769px&ndash;1024px for medium devices
-- 481px&ndash;768px for small devices
-- 480px and below for tiny devices
+- `1025px` and above for large devices
+- `769px`&ndash;`1024px` for medium devices
+- `481px`&ndash;`768px` for small devices
+- `480px` and below for tiny devices
 
-## Media queries
+### Media queries
 
 Use the provided media tools from TNA Frontend to help you with media queries.