Get StartedReleasesContributingChangelog

Breakpoints

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

BreakpointIndexAliasPurpose
(default)0-Mobile (portrait)
30rem (480px)1smallMobile (landscape)
48rem (768px)2mediumTablet (portrait)
62rem (992px)3largeTablet (landscape)
75rem (1200px)4xlargeLaptops (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

Sample text