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(breakpoints.md)}{
min breakpoint
}
${mediaQuery.down(breakpoints.sm)}{
max breakpoint
}
${mediaQuery.between(breakpoints.sm, breakpoints.xs)}{
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>
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>
*Components that can accept mediaQuery
- Box
- Grid
- Cell
- Radio
- Typography
- IconButton
- Icon
- Button
useMediaQuery
You can use this hook to show the current breakpoint
value
const Wrapper = () => {
const media = useMediaQuery();
console.log(media);
return <YourComponent showBreakpoints={true}>...</YourComponent>;
};
This will return a breakpoint
value
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>
);
};