#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 themeable components

#With applyTheme

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

Hello world

#With styled

Hello world

#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 © 2020 Jake Moxey