Responsive Design

Crono uses a responsive system that doesn't need further implementations, but despite this sometimes it may be necessary to force mediaQuery to handle containers like flex-box or grid.
For this purpose, utilities have been designed to define in each case what behavior the component should behave according to the screen.

Breakpoints

Default Breakpoints for Crono:

• xs: 0px
• sm: 600px
• md: 960px
• lg: 1280px
• xl: 1920px

import { breakpoints } from "@matchplat/crono";

const smallSize = breakpoints.sm;

REM System

Crono uses the REM unit for almost all of its components. Part of the fluidity of the app is therefore due to the font-size of the HTML root element.

Crono boost installs in the application a series of media-queries that automatically manage the font-size change at the root.

Default is true but you can disable It:

const Wrapper = () => {
  return (
    <CronoBoost isResponsive={false}>
      <MyApp />
    </CronoBoost>
  );
};

Media Queries

For some components* of Crono you can inject mediaQuery using custom utilities

caution

Always use the theme values

The mediaQuery must be written using a template string.
They can then be injected into the component using the mediaQuery prop

import { mediaQuery, breakpoints, Box, Typography } from "@matchplat/crono";

const responsiveStyle = `
    ${mediaQuery.down(breakpoints.md)}{
        flex-direction: column
    }
    ${mediaQuery.down(breakpoints.sm)}{
        flex-direction: row
    }
`;

function App() {
  return (
    <div className="App">
      <Box mediaQuery={responsiveStyle} justifyContent="space-around">
        <Typography>First Text</Typography>
        <Typography>Second Text</Typography>
        <Typography>Third Text</Typography>
      </Box>
    </div>
  );

In CSS this would have been

.mediaClass {
  @media (max-width: 960px) {
    flex-direction: column;
  }
  @media (max-width: 600px) {
    flex-direction: row;
  }
}

mediaQuery

Can accept four values:

• up
• down
• between
• height

    ${mediaQuery.up({ breakpoint: 'md' })}{
        min breakpoint
    }
    ${mediaQuery.down({ breakpoint: 'sm' })}{
        max breakpoint
    }
     ${mediaQuery.between({ breakpointMin: 'sm', breakpointMax: 'md' })}{
        min first breakpoint, max second breakpoint
    }

As last paramenter you can pass height (default is false)

@media (max-width: 600px, height = true) {
    flex-direction: row;
}

With height active, the mediaQuery will calculate the height of the page and not the width

Hidden Component

The hidden component is used to hide components based on breakpoints

<Hidden up size="md">
  ... will be shown up to md breakpoing
</Hidden>

See the Doc for more info

Grid System

Crono uses a 12 column grid system.
The system is not as complex as Bootstrap's, because in complex cases it is preferable to use Grid.

The system creates a grid (aligned to left or not) and allows you to enter the values to be taken into account for each breakpoint.
You must use the Box component to create a grid.
Childrens must have the className=col prop to work correctly.

The props are:
xl,lg,md,sm,xs [1,12]: for breakpoints
gap: to create an horizontal gap
gapV: to create a vertical gap (default is equal to gap)
alignGrid: to align the grid to the left or with space-between

<Box xl={6} md={3} gap={10} sm={2} lg={5}>
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
  <div
    style={{ height: 60, width: 60, backgroundColor: "red" }}
    className="col"
  />
</Box>

See the Doc for more info

*Components that can accept mediaQuery

• Box
• Card
• Grid
• Cell
• Radio
• Typography
• IconButton
• Icon
• Button

useMediaQuery

You can use this hook to show the current breakpoint value

const Wrapper = () => {
  const { currentMedia } = useMediaQuery();

  console.log(currentMedia);

  return <YourComponent showBreakpoints={true}>...</YourComponent>;
};

This will return a breakpoint value

You can also check the max and min value

const Wrapper = () => {
  const { mediaDownFrom, mediaUpFrom } = useMediaQuery();

  console.log(mediaUpFrom("md"));
};

This will return a boolean when the media is minimum md

Debug (show breakpoints)

You can display the current Crono breakpoint while working on reponsive design. You must use Crono boost and pass it the prop showBreakpoints.

Default is false but you can turn it on:

const Wrapper = () => {
  return (
    <CronoBoost showBreakpoints={true}>
      <MyApp />
    </CronoBoost>
  );
};