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