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.

<ScreenClass render={screen => <span>Current screen is {screen}</span>} />

Visible

Show an element only in a specific breakpoint.

Try to resize your window to see the change.

<Visible md xl>
  <span>Visible only in MD and XL</span>
</Visible>

Hidden

Hide an element only in a specific breakpoint.

Try to resize your window to see the change.

<Hidden md>
  <span>Hide only in MD</span>
</Hidden>

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 />;