Reflexjs
DocumentationBlocks LibraryGuidesGitHub
v1.0.1

Responsive Styles

Write mobile-first 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" />

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"]} />

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";
}
}

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" />
BreakpointsVariants

© 2021 Reflexjs

DocumentationBlocks LibraryGuidesGitHub