Skip to content

Latest commit

 

History

History
68 lines (49 loc) · 1.64 KB

Breakpoints.mdx

File metadata and controls

68 lines (49 loc) · 1.64 KB

import { Meta } from '@storybook/addon-docs';

import { Alert } from '../../components'; import { Header } from '../shared' import { StyledDivExample } from './styles' import EvaluationForm from '../../stories/shared/EvaluationForm'

Breakpoints - Quantum provides a breakpoints object to use with styled components.
You can create different styled rules following Quantum breakpoints.

How to use

Firstly, import BREAKPOINTS from shared. Second import query function from Grid shared.

import BREAKPOINTS from '@catho/quantum/shared/breakpoints';
import { query } from '@catho/quantum/Grid/sub-components/shared';

Create a constant variable calling query with BREAKPOINTS as parameter. Then, create a styled component and introduce the variable. In this example, we will use a div.

The variable provides min-widths media queries with the following sizes:

  • small: 600px
  • medium: 1024px
  • large: 1440px

In each resolution we will change the div background color:

  • Blue color for small resolution.
  • Green color for medium resolution.
  • Black color for large resolution.
const mediaQueries = query(BREAKPOINTS);
const StyledDiv = styled.div`
  padding: 15px 20px;
  color: white;
  background-color: red;

  ${mediaQueries.small`
    background-color: blue;
  `}

  ${mediaQueries.medium`
    background-color: green;
  `}

  ${mediaQueries.large`
    background-color: black;
  `}
`;

Test the div in different sizes:

Test me in different sizes =)