Breakpoints

We use the following breakpoints ranges. Breakpoints values represent lowest point of the range and should be used only with min-width property.

Breakpoint	Index	Alias	Purpose
(default)	0	-	Mobile (portrait)
30rem (480px)	1	small	Mobile (landscape)
48rem (768px)	2	medium	Tablet (portrait)
62rem (992px)	3	large	Tablet (landscape)
75rem (1200px)	4	xlarge	Laptops (and Desktops)

For example, using a margin=[1, 2, 3] creates styles with multiple mobile-first min-width media queries.

<Text m={[1, 2, 3]}>Sample text</Text>

.Text-hash {
    margin: 0.5rem;
}

@media screen and (min-width: 30rem) {
    .Text-hash {
        margin: 1rem;
    }
}

@media screen and (min-width: 48rem) {
    .Text-hash {
        margin: 1.5rem;
    }
}

Media Queries

For convenience and for use with other styling approaches, you can import the media queries derived from the breakpoints scale.

const MediaQueries = {
    small: `@media screen and (min-width: ${Breakpoints[0]})`,
    medium: `@media screen and (min-width: ${Breakpoints[1]})`,
    large: `@media screen and (min-width: ${Breakpoints[2]})`,
    xlarge: `@media screen and (min-width: ${Breakpoints[3]})`
};

import { MediaQueries } from '@freenow/wave';

const Container = styled.div`
    ${MediaQueries.small} {
        width: 2rem;
    }
`;

Examples

<Text fontSize={[1, 2, 3, 4, 5]}>Sample text</Text>

<Text fontSize={[1, 2, 3, 4, 5]}>Sample text</Text>