Breakpoints

Right now we have the following Breakpoints for you use when passing down your styles:

• xs - for extra small devices (mobile phones)
• sm - for small (mobile phones and tablets)
• md - for medium devices (tablets, desktops and notebooks)
• lg - for large desktops
• xl - for extra large desktops

{
  "breakpoints": {
    "Breakpoints.xs": 0,
    "Breakpoints.sm": 480,
    "Breakpoints.md": 768,
    "Breakpoints.lg": 992,
    "Breakpoints.xl": 1200
  }
}

Flutter Example

• Inside your component, just pass a prop styleSheet with a Map with Breakpoints.xs or any other valid breakpoint to apply an style to that resolution

It's mandatory fill the xs key with a valid value, otherwise it will not work

Box(
  styleSheet: StyleSheet(
    width: {Breakpoints.xs: '550'},
    height: {Breakpoints.xs: '550'},
    backgroundColor: {Breakpoints.xs: '#ff6a00', Breakpoints.sm: '#006a00'},
  ),
),

JavaScript Example

• Inside your component, just pass a prop styleSheet with a Map with xs (Breakpoints prefix is optional) or any other valid breakpoint to apply an style to that resolution

It's mandatory fill the xs key with a valid value, otherwise it will not work, you can pass the value directly also as in plain HTML

<Box
  styleSheet={{
    width: {xs: '550px'},
    height: {xs: '550px'},
    backgroundColor: {xs: '#ff6a00', sm: '#006a00'},
    border: '1px solid red',
  }}
/>