Responsive.
Atomize design system supports responsiveness for most of the props by just passing an array. Examples for a particular prop will be given in its detail.
Array given to the end prop is like -
{xs: { 'value for mobile devices & larger' },sm: { 'value for larger mobile & larger' },md: { 'value for tablets & larger' },lg: { 'value for small desktop & larger' },xl: { 'value for large desktop' }}
Examples -
// Paddingp={{ xs: '1rem', md: '4rem' }}// Padding Topp={{ t: {xs: '1rem', md: '4rem' }}}// borderborder={{ xs: '1px solid', lg: '2px dashed' }}// Border Top & Bottomborder={t: { xs: '1px solid', lg: '2px dashed' }b: { xs: '1px solid', lg: '2px dashed' }}