#Breakpoints
Bumbag comes with 5 defined breakpoints & their ranges:
Breakpoint | Width |
---|---|
mobile | 480px |
tablet | 768px |
desktop | 1024px |
widescreen | 1200px |
fullHD | 1440px |
min-mobile | 0px and above |
max-mobile | 479px and below |
min-tablet | 480px and above |
max-tablet | 767px and below |
min-desktop | 768px and above |
max-desktop | 1023px and below |
min-widescreen | 1024px and above |
max-widescreen | 1199px and below |
min-fullHD | 1200px and above |
max-fullHD | 1440px 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}}