Responsive Styles

Prismane exports a set of helper functions and hooks that can help you achieve the desired responsiveness.

The fr function can be imported from the root entry of the package, meaning @prismane/core. What the fr function achieves is a fractional styling, similar to the way TailwindCSS does their sizing, meaning a 4x fraction. When passing a size to the fr function, it will return a size in rem, which will then output a value based on the font-size:

import { Flex, fr } from "@prismane/core";

const Page = () => {
  return (
    <Flex
      w={fr(5)} // If font-size is 16px, this will output 20px in final size
      h={fr(10)} // If font-size is 16px, this will output 40px in final size
    >
      Hello, world
    </Flex>
  );
};

export default Page;

The useMediaQuery hook can be imported from the hooks entry of the package, meaning @prismane/core/hooks. What the useMediaQuery hook does is check if a given media-query is true or false. It returns a state, which is updated on window resize, achieving inline media-query styling.

import { Flex } from "@prismane/core";
import { useMediaQuery } from "@prismane/core/hooks";

const Page = () => {
  const isTable = useMediaQuery("(min-width: 768px)");

  return <Flex w={isTablet ? 20 : 40}>Hello, world</Flex>;
};

export default Page;

The sx prop was already covered and as you know, you can use it to write media-queries in inline style.

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      sx={{
        "@media (min-width:320px)": {
          width: "50%",
        },
      }}
    >
      Hello, world
    </Box>
  );
};

export default Page;