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#
Complicated demo:
SyntaxError: Unexpected token (1:8)
1 : return ()
^The Postfix syntax#
Use --{postfix} like --sm, --md, --lg to set responsive style.
Simple demo:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Complicated demo:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Breakpoints#
By default, there are five breakpoint in Fower: sm, md, lg, xl, 2xl.
| Breakpoint postfix | Minimum width | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
You can customize breakpoints by setTheme:
setTheme({ breakpoints: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px', '3xl': '1780px', },})