Emotion grid
Edit page
Getting StartedAPIUsageUtilitiesMediaScreen ClassVisibleHiddenDebuggerTable of props

Utilities

For faster mobile-friendly and responsive development, the Emotion grid includes some utilities for styling, showing, hiding, and debugging.

Media

Media query helper, this ensure you use the same grid breakpoints from config, we use em on media query, and you can check here the why.

import { css } from '@emotion/react';
import { media } from '@mverissimoo/emotion-grid';
const baseStyles = ({ theme }) => css`
${media('lg')} {
// your code below
}
`;

Output

@media only screen and (min-width: 64em) {
// your code below
}

Screen Class

Return a component with the current breakpoint.

Try to resize your window to see the change.

Current screen is xs

Visible

Show an element only in a specific breakpoint.

Try to resize your window to see the change.

Hidden

Hide an element only in a specific breakpoint.

Try to resize your window to see the change.

Hide only in MD

Debugger

Provide a way to visualize all grid columns without passing debug direct to the component and show the current breakpoint.

Try clicking on the button in the footer on the right

process.env.NODE_ENV === 'development' && <Debugger />;