
<div
  style={{
    borderBottom: "1px solid var(--rs-color-border-critical)",
    width: 320,
    textAlign: "center",
    position: "relative",
    top: "var(--rs-unit-x3)",
  }}
>
  <div
    style={{
      width: 1,
      height: "var(--rs-unit-x4)",
      background: "var(--rs-color-border-critical)",
      position: "absolute",
      left: 0,
      bottom: "calc(var(--rs-unit-x2) * -1)",
    }}
  />
  rs-viewport-s
  <div
    style={{
      width: 1,
      height: "var(--rs-unit-x4)",
      background: "var(--rs-color-border-critical)",
      position: "absolute",
      right: 0,
      bottom: "calc(var(--rs-unit-x2) * -1)",
    }}
  />
</div>

Reshaped follows a mobile-first approach. This means we treat the smallest viewport size as the default. Other viewports are used to override the mobile styles.

There is no native support for custom media queries in CSS. We expose them using the PostCSS custom media plugin.

--rs-viewport-m
--rs-viewport-l
--rs-viewport-xl

/* Usage */
.element {
  background: var(--rs-color-background-neutral);
}

@media (--rs-viewport-m) {
  .element {
    background: var(--rs-color-background-primary);
  }
}

If you need to make an exception for the mobile viewport, we still expose the small screen media query.

--rs-viewport-s

If you're changing the default viewport values in your theme, make sure to use getConfig function in your postcss.config.js file instead of the default config and pass the location of your theme CSS file.

const path = require("path");
const { getConfig } = require("reshaped/config/postcss");

module.exports = getConfig({
  themeMediaCSSPath: path.resolve(__dirname, "src/themes/my-theme/media.css"),
});

React installation

Some components support responsive properties syntax in JSX code. For example, you can check the View utility with multiple responsive properties supported.

Responsive properties