Move to using Rems for breakpoints

packages/utilities/gel-foundations/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 | Version | Description |
 |---------|-------------|
+| 0.3.0   | [PR#360](https://github.com/BBC/psammead/pull/360) Move to using rems for breakpoints |
 | 0.2.5   | [PR#349](https://github.com/BBC/psammead/pull/349) Add GEL Group A breakpoint |
 | 0.2.4   | [PR#323](https://github.com/BBC/psammead/pull/323) Update readme storybook badge |
 | 0.2.3   | [PR#264](https://github.com/BBC/psammead/pull/319) Resolving package-lock issues. |

packages/utilities/gel-foundations/README.md

@@ -41,7 +41,7 @@ const SomeStyledComponent = css`
 
 To allow the typography to be fully accessible and responsive, please note that you should apply a default font-size to the document root (e.g. `html { font-size: 100% }`).
 
-Our typography uses `em` for font-size and `rem` for line-height. `em` allows modularity of components: you can change the component font-size by changing the font-size of its container. `rem` is relative to the document root, so we use that for line-height and spacing for a consistent look-and-feel across the document. You can read our [detailed analysis of "REMs vs EMs for spacing"](https://github.com/bbc/simorgh/blob/latest/docs/Spacing-Units.md) for more information.
+Our breakpoints and typography font-size and line-heights use `rem` for sizing due to the reduced side effects in its usage. `rem` is relative to the document root, so we use that for line-height and spacing for a consistent look-and-feel across the document. You can read our [detailed analysis of "REMs vs EMs for spacing"](https://github.com/bbc/simorgh/blob/latest/docs/Spacing-Units.md) for more information.
 
 ## Contributing
 

packages/utilities/gel-foundations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/gel-foundations",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "A range of string constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.",
   "repository": {
     "type": "git",

packages/utilities/gel-foundations/src/breakpoints.js

@@ -13,26 +13,26 @@ export const GEL_GROUP_CD_MIN_WIDTH = 37.5; // 600px
     Link to relevant GEL docs: https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes
     The only exception is that we have split out group 1 into 0 and 1
 */
-export const GEL_GROUP_0_SCREEN_WIDTH_MIN = `0em`; // 0px
-export const GEL_GROUP_0_SCREEN_WIDTH_MAX = `14.9375em`; // 239px
+export const GEL_GROUP_0_SCREEN_WIDTH_MIN = `0rem`; // 0px
+export const GEL_GROUP_0_SCREEN_WIDTH_MAX = `14.9375rem`; // 239px
 
-export const GEL_GROUP_1_SCREEN_WIDTH_MIN = `15em`; // 240px
-export const GEL_GROUP_1_SCREEN_WIDTH_MAX = `24.9375em`; // 399px
+export const GEL_GROUP_1_SCREEN_WIDTH_MIN = `15rem`; // 240px
+export const GEL_GROUP_1_SCREEN_WIDTH_MAX = `24.9375rem`; // 399px
 
-export const GEL_GROUP_2_SCREEN_WIDTH_MIN = `25em`; // 400px
-export const GEL_GROUP_2_SCREEN_WIDTH_MAX = `37.4375em`; // 599px
+export const GEL_GROUP_2_SCREEN_WIDTH_MIN = `25rem`; // 400px
+export const GEL_GROUP_2_SCREEN_WIDTH_MAX = `37.4375rem`; // 599px
 
-export const GEL_GROUP_3_SCREEN_WIDTH_MIN = `37.5em`; // 600px
-export const GEL_GROUP_3_SCREEN_WIDTH_MAX = `62.9375em`; // 1007px
+export const GEL_GROUP_3_SCREEN_WIDTH_MIN = `37.5rem`; // 600px
+export const GEL_GROUP_3_SCREEN_WIDTH_MAX = `62.9375rem`; // 1007px
 
-export const GEL_GROUP_4_SCREEN_WIDTH_MIN = `63em`; // 1008px
-export const GEL_GROUP_4_SCREEN_WIDTH_MAX = `80em`; // 1279px
+export const GEL_GROUP_4_SCREEN_WIDTH_MIN = `63rem`; // 1008px
+export const GEL_GROUP_4_SCREEN_WIDTH_MAX = `80rem`; // 1279px
 
-export const GEL_GROUP_5_SCREEN_WIDTH_MIN = `80em`; // 1280px
+export const GEL_GROUP_5_SCREEN_WIDTH_MIN = `80rem`; // 1280px
 
 export const MEDIA_QUERY_TYPOGRAPHY = {
-  FEATURE_PHONE_ONLY: `@media (max-width: ${GEL_GROUP_A_MAX_WIDTH}em)`,
-  SMART_PHONE_ONLY: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}em) and (max-width: ${GEL_GROUP_B_MAX_WIDTH}em)`,
-  SMART_PHONE_AND_LARGER: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}em)`,
-  LAPTOP_AND_LARGER: `@media (min-width: ${GEL_GROUP_CD_MIN_WIDTH}em)`,
+  FEATURE_PHONE_ONLY: `@media (max-width: ${GEL_GROUP_A_MAX_WIDTH}rem)`,
+  SMART_PHONE_ONLY: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}rem) and (max-width: ${GEL_GROUP_B_MAX_WIDTH}rem)`,
+  SMART_PHONE_AND_LARGER: `@media (min-width: ${GEL_GROUP_B_MIN_WIDTH}rem)`,
+  LAPTOP_AND_LARGER: `@media (min-width: ${GEL_GROUP_CD_MIN_WIDTH}rem)`,
 };