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:
| Token | Breakpoint | Range | Usage |
|---|
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.
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