Responsive Styles

Reflexjs includes a shorthand syntax for writing mobile-first responsive styles.

Every style props accept responsive styles that can be applied conditionally at different breakpoints.

To write responsive styles, use a | pipe.

<div p="4|6|8" />
 
Copy

This shortcut is an alternative to writing media queries out by hand.

Given the following:

<div bg="red|blue|green" />
// or
// Array values are also supported.
<div bg={["red", "blue", "green"]} />
 
Copy

Reflexjs will generate the following CSS:

.css-HASH {
  background-color: "red";
}
@media screen and (min-width: 640px) {
  .css-HASH {
    background-color: "blue";
  }
}
@media screen and (min-width: 768px) {
  .css-HASH {
    background-color: "green";
  }
}
 
Copy

Skipping Breakpoints#

If you want to skip a breakpoint, you can use the value null or leave it blank.

<div bg="red|null|green" />
// or
<div bg="red||green" />
 
Copy