Responsive Styles

About Responsive#

Many CSS frameworks will claim to be Mobile-first and responsive. For example, two very famous CSS frameworks, Bootstrap and Bulma, describe themselves like this:

Bootstrap: Quickly design and customize responsive mobile-first sites with Bootstrap.

Bulma: Bulma is a mobile-first framework.

This is the responsive style of traditional CSS frameworks, most of which are only Grid System responsive styles. I think this is narrowly responsive. The truly responsive style should be responsive in every style, not just supporting Grid System responsiveness.

Each Atomic Props of Fower supports responsiveness, not just a container that supports responsiveness, which allows you to implement complex responsive interfaces more easily.

The Array syntax#

All atomic props accept arrays as values for mobile-first responsive styles.

// responsive flex direction<Box flexDirection={['column', 'row']} />
// responsive width<Box width={[1, 1/2, 1/4]} />
// responsive font size<Box fontSize={[ '14px', '18px', '24px', '32px' ]} />
// responsive margin<Box m={[ 4, 8, 16, 32 ]} />
// responsive padding<Box p={[ 4, 8, 16, 32 ]} />

What array value does? <Box width={[1, 1/2, 1/4]} /> will generate:

.Box-hash {  width: 100%;}
@media (min-width: 640px) {  .Box-hash {    width: 50%;  }}
@media (min-width: 768px) {  .Box-hash {    width: 25%;  }}

demo:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

The Postfix syntax#

Use --{postfix} like --sm, --md, --lg to set responsive style.

demo:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Breakpoints#

By default, there are five breakpoint in Fower: sm, md, lg, xl, 2xl.

Breakpoint postfixMinimum widthCSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

You can customize breakpoints by setTheme:

setTheme({  breakpoints: {    sm: '640px',    md: '768px',    lg: '1024px',    xl: '1280px',    '2xl': '1536px',    '3xl': '1780px',  },})