Simple emotion based responsive system on top of styled-system.

Responsive props include

display,
flexWrap,
flexDirection,
alignItems,
justifyContent,
width,
minWidth,
maxWidth,
space,
fontSize,
color,
flex,
order,

Row

Flex component that's display: "flex" and 100% width by default.

Col

The Col is the Row component with 3 special props. It sets flexBasis and maxWidth to the width, and has a shrink option.

flexBasis={props.flexBasis || props.width}
maxWidth={props.maxWidth || props.width}
flex={props => (shrink ? "1 1 auto" : "1 0 auto")}