Breakpoints#

Bumbag comes with 5 defined breakpoints & their ranges:

BreakpointWidth
mobile480px
tablet768px
desktop1024px
widescreen1200px
fullHD1440px
min-mobile0px and above
max-mobile479px and below
min-tablet480px and above
max-tablet767px and below
min-desktop768px and above
max-desktop1023px and below
min-widescreen1024px and above
max-widescreen1199px and below
min-fullHD1200px and above
max-fullHD1440px and below

Adding breakpoints to the theme#

You are able to add your own breakpoints to the global theme:

import { Provider } from 'bumbag';
const theme = {
breakpoints: {
custom: 1000
}
}
<Provider theme={theme}>Hello world!</Provider>

Using breakpoints#

With style props#

Hello world
Editable example

With applyTheme#

You can set attribute values for certain breakpoints by specifying an object of breakpoint/value pairs:

Hello world
Editable example

With styled#

Hello world
Editable example

Theming#

Schema#

const theme = {
breakpoints: {
mobile: string,
tablet: string,
desktop: string,
widescreen: string,
fullHD: string,
// Plus your own definitions...
[key: string]: string,
// e.g. custom: 1000
}
}
Copyright © 2021 Jake Moxey