Responsive

Handling responsive is very easy with @xstyled/system either using props or utilities.

Tweak a component for responsive

Using style props, you can tweak a component right from props. Each one of them accepts an object to define responsive values for each prop.

import { Box } from '@xstyled/styled-components'
/* The box will be displayed only in mobile! */
const OnlyMobileBox = () => <Box display={{ sm: 'block', md: 'none' }} />

See style using props to know how to use system props in your components.

Grid system

Grid system are bootstrap like grids. It gives you powerful responsive grids using flexboxes.

// A row containing three cols (same size)
<Box row>
<Box col />
<Box col />
<Box col />
</Box>
// By default, cols measure 100%, start from "md" breakpoint: they measure "1/3" of the size
<Box row>
<Box col={{ xs: 1, md: 1 / 3 }} />
<Box col={{ xs: 1, md: 1 / 3 }} />
<Box col={{ xs: 1, md: 1 / 3 }} />
</Box>
// First col use the size of content, others share the space
<Box row>
<Box col="auto" />
<Box col />
<Box col />
</Box>
// Apply a gutter of 2 on each cols, remove gutter on the ends
<Box row mx={-2}>
<Box col px={2} />
<Box col px={2} />
<Box col px={2} />
</Box>

See a complete guide about Grid system.

Create a responsive component

breakpoints is a utility to create mobile first responsive components.

import { breakpoints } from '@xstyled/system'
const Container = styled.div(
breakpoints({
xs: css`
/* All devices */
`,
md: css`
/* From md breakpoint */
`,
lg: css`
/* From lg breakpoint */
`,
}),
)

Default good breakpoints are available. They can also be specified under the key breakpoints in your theme:

You can also use up, down and between:

import styled, { css, up, down } from '@xstyled/styled-components'
const Box = styled.div`
width: 200px;
height: 200px;
/* This style applies only after "md" breakpoint */
${up(
'md',
css`
height: 300px;
`,
)}
/* This style applies only before "md" breakpoint */
${down(
'md',
css`
height: 100px;
`,
)}
`

See all system utilities available.

Default breakpoints

// theme.js
export default {
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
},
}

The above breakpoints are the default values provided by xstyled.