Newskit Logo
About

Foundations

Breakpoints

Breakpoints set a visual point on a screen to adapt the design of content (responsive design), ensuring a consistent, optimised experience across different screen widths.

Overview

There are five breakpoints available and the breakpoint range, margins and gutters can be customised.

The default values are outlined below:

TokenBreakpointRangeUsage

Default breakpoints can be overriden in the theme.

1import {createTheme} from 'newskit'; 
2
3const theme = createTheme({ 
4  name: 'theme-with-custom-breakpoints', 
5  overrides: { 
6      breakpoints: { 
7          xs: 0, // 0-359 
8          sm: 360, 
9          md: 540, 
10          lg: 720, 
11          xl: 1080, 
12      } 
13  }, 
14});

All breakpoints are fluid until the maximum grid width of 1920px (default), at this point the grid becomes fixed.

Fluid

Fluid layouts are calculated to their relative size, and stretch as the viewport is resized. For example, if you set the width of your layout to 100% width, each column will only be calculated to its relative size., and will stretch as the browser is resized.

Fixed

Fixed layouts do not respond to the size of the screen (viewport) but remain at a fixed width at a specific numerical value e.g. 1920px.

Fluid

Fluid layouts are calculated to their relative size, and stretch as the viewport is resized. For example, if you set the width of your layout to 100% width, each column will only be calculated to its relative size., and will stretch as the browser is resized.

Fixed

Fixed layouts do not respond to the size of the screen (viewport) but remain at a fixed width at a specific numerical value e.g. 1920px.

Max-width defaults can be overidden in the Grid & Cell component.

Using breakpoints

NewsKit enables the appearance and behaviour of UI elements to change at different breakpoints.

In the codebase, changing the appearance and behaviour of UI elements can be achieved by utilising the component defaults and overrides system to override design tokens at specific breakpoints. For example, setting different typography presets at different breakpoints, can make the text larger on bigger devices than on smaller devices.

Properties that support this are specified in the Props sections of the component documentation as using the generic MQ type, i.e. MQ<string>.

This is done by passing a single string token to be used across all breakpoints, or an object for a combination of multiple breakpoints - comprising of breakpoint keys and token values.

Code example

This example below shows different typography presets being used at different breakpoint.

1
2  typographyPreset: {
3      xs: 'editorialHeadline010',
4      md: 'editorialHeadline020',
5      lg: 'editorialHeadline030',
6    }
7  

Colours

Colour is key to expressing brand and identity, but it also plays a vital role in conveying specific meaning to a user.

Colours

Colour is key to expressing brand and identity, but it also plays a vital role in conveying specific meaning to a user.