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 style props#

Hello world

Editable example

<Box fontSize={{ default: '16px', 'max-tablet': '14px' }}>
  Hello world
</Box>

<Box fontSize={{ default: '16px', 'max-tablet': '14px' }}>
  Hello world
</Box>

With `applyTheme`#

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

Hello world

Editable example

const FancyBox = applyTheme(Box, {
  styles: {
    base: {
      color: 'red',
      fontSize: { default: '16px', 'max-tablet': '14px' }
    }
  }
})

function Example() {
  return (
    <FancyBox>Hello world</FancyBox>
  );
}

render(Example)

const FancyBox = applyTheme(Box, {
  styles: {
    base: {
      color: 'red',
      fontSize: { default: '16px', 'max-tablet': '14px' }
    }
  }
})

function Example() {
  return (
    <FancyBox>Hello world</FancyBox>
  );
}

render(Example)

With `styled`#

Hello world

Editable example

const FancyBox = styled(Box)`
  color: red;
  font-size: 16px;

  ${breakpoint('max-tablet', css`
    font-size: 14px;
  `)}
`;

function Example() {
  return (
    <FancyBox>Hello world</FancyBox>
  );
}

render(Example)

const FancyBox = styled(Box)`
  color: red;
  font-size: 16px;

  ${breakpoint('max-tablet', css`
    font-size: 14px;
  `)}
`;

function Example() {
  return (
    <FancyBox>Hello world</FancyBox>
  );
}

render(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
  }
}

On this page

Breakpoints#

Adding breakpoints to the theme#

Using breakpoints#

With style props#

With applyTheme#

With styled#

Theming#

Schema#

With `applyTheme`#

With `styled`#