Web
Breakpoints
Backpack breakpoints on Web are available in the BpkBreakpoint component or as Sass mixins.
For example mobile can be set like this
import React from 'react';
import BpkBreakpoint, { BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';
export default () => (
<BpkBreakpoint query={BREAKPOINTS.MOBILE}>
{isActive =>
(isActive ? <span>Mobile viewport is active</span> : <span>Mobile viewport is inactive</span>)}
</BpkBreakpoint>
)
Breakpoints are also defined as Sass mixins in the format bpk-breakpoint-{device}. To use these, install the bpk-mixins NPM package.
Margins
Layout grid margins are meant to be used as the empty space to the left-and-right of the screen. They are defined as Sass variables in the format of bpk-breakpoint-{device}-margin. For example to use small tablet, use bpk-breakpoint-small-tablet-margin.
To use our margins Sass variables, install the bpk-mixins NPM package.
Breakpoint and Margins
|
Name |
Scale |
Margins |
|---|---|---|
|
Small Mobile |
320-359px |
16px |
|
Mobile |
360-512px |
24px |
|
Small Tablet |
513-768px |
24px |
|
Tablet |
769-1024px |
32px |
|
Desktop |
1025-1280px |
48px |
|
Desktop Large |
1281px + |
48px |