Responsive Styling
Minerva components are built using styled system, and use the same approach for adding responsive styles using these default breakpoints:
const breakpoints = ['640px', '768px', '1024px', '1280px'];
breakpoints.base = '0px';
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];
This should resize with browser
<Box
bg="indigo.800"
color="white"
borderRadius="md"
p={4}
width={[
'100%',
'50%',
'33%',
'25%',
'20%',
]}
>
This should resize with browser
</Box>
Minerva also aliases those defaults to sm
, md
, lg
, and xl
This should resize with browser
<Box
bg="indigo.800"
color="white"
borderRadius="md"
p={4}
width={{
base: '100%',
sm: '50%',
md: '33%',
lg: '25%',
xl: '20%',
}}
>
This should resize with browser
</Box>
() => {
const items = [
{
id: 1,
title: 'Small',
cpu: '8gb/4CPUs',
ssd: '160 GB SSD disk',
cost: '$10',
},
{
id: 2,
title: 'Medium',
cpu: '8gb/4CPUs',
ssd: '160 GB SSD disk',
cost: '$20',
},
{
id: 3,
title: 'Large',
cpu: '8gb/4CPUs',
ssd: '160 GB SSD disk',
cost: '$30',
},
];
return (
<Box
display="grid"
gridTemplateColumns={{ base: '1fr', md: '1fr 1fr', xl: '1fr 1fr 1fr' }}
gridColumnGap={5}
gridRowGap={5}
>
{items.map(plan => (
<Flex
key={plan.id}
flexDirection="column"
borderRadius="md"
overflow="hidden"
alignItems="center"
borderWidth={1}
borderColor="#5850ec"
borderStyle="solid"
px={0}
py={0}
>
<Flex
minWidth="100%"
justifyContent="space-between"
alignItems="center"
backgroundColor="rgba(88, 80, 236, 0.2)"
py={4}
px={4}
borderBottomWidth={1}
borderBottomColor="#5850ec"
borderBottomStyle="solid"
>
<Text
fontWeight="bold"
fontSize={{ base: 'md', md: 'lg', lg: 'xl' }}
mb={1}
color="gray.700"
>
{plan.title}
</Text>
<Flex
width={{ base: 4, md: 5, lg: 6 }}
height={{ base: 4, md: 5, lg: 6 }}
backgroundColor="#5850ec"
borderRadius={100}
borderColor="#5850ec"
borderWidth={1}
borderStyle="solid"
justifyContent="center"
alignItems="center"
>
<Icon
name="check"
size={{ base: '10px', md: '12px', lg: '14px' }}
color="#fff"
/>
</Flex>
</Flex>
<Box
display="flex"
flexDirection={{ base: 'row', lg: 'column' }}
px={4}
py={5}
minWidth="100%"
justifyContent="space-between"
alignItems={{ base: 'center', lg: 'flex-start' }}
>
<Box>
<Text color="gray.400" fontSize={{ base: 'md', lg: 'xl' }} pt={1}>
{plan.cpu}
</Text>
<Text color="gray.400" fontSize={{ base: 'md', lg: 'xl' }} pt={1}>
{plan.ssd}
</Text>
</Box>
<Box>
<Text
fontSize={{ base: '2xl', lg: 'xl' }}
pt={{ base: 0, lg: 8 }}
>
{plan.cost}/mo
</Text>
</Box>
</Box>
</Flex>
))}
</Box>
);
};