Boss UltimateMedia Queries
CSS media queries is the idiomatic approach to make your UI responsive.. We provide some CSS-in-JS helpers to do so. In the following demo, we change the background color (red, blue & green) based on the screen width.
down(sm): red
up(md): blue
up(lg): green
With Width
Sometimes, using CSS isn't enough. You might want to change the React rendering tree based on the breakpoint value, in JavaScript. We provide a withWidth() higher-order component for this use case. In the following demo, we change the rendered DOM element (em, u, del & span) based on the screen width.
Current width: lg
Hidden
Hidden works with a range of breakpoints e.g. xsUp or mdDown, or one or more breakpoints e.g. only='sm' or only={['md', 'xl']}. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints.
| innerWidth | xs | sm | md | lg | xl |
|---|---|---|---|---|---|
| width | xs | sm | md | lg | xl |
| smUp | show | hide | |||
| mdDown | hide | show |
Breakpoint up
Using any breakpoint up property, the given children will be hidden at or above the breakpoint.
Breakpoint down
Using any breakpoint down property, the given children will be hidden at or below the breakpoint.
Breakpoint only
Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s).
Integration with Grid
It is quite common to alter Grid at different responsive breakpoints, and in many cases, you want to hide some of those elements.