Responsivity

As we're obviously not only building pages and components that are used on one specific screen size, it's important to be able to define behaviours for different viewports.

One way to do so would be to write our media queries into components the stitches way like so:

const StyledBox = styled(Box, {
  marginBottom: 15,
  "@md": {
    marginBottom: 30,
  },
});

While this works quite well for components that need one defined behaviour in all use-cases, this may become quite a hassle to change on a per use-case basis. Therefore, NeUI exposes a different way to do so on all of it's layout primitives (or any component that is based on NeUIs Box component).

Say we want a responsive marginBottom value our container:

<Box marginBottom={{ base: 15, md: 30 }}>{/* Box content */}</Box>

We can of course also use the prop for one non-responsive base value if we don't need it to be responsive:

<Box marginBottom={30}>{/* Box content */}</Box>

Since this approach uses the stitches implementation of viewports, these styles are also baked into the zero-runtime style-sheet, meaning there is no performance detriment.

Find a list of all the basic box props here