Breakpoints define shared viewport widths for adapting layouts across screen sizes.
Use breakpoint tokens in media queries to keep responsive layout changes consistent. Choose when to adapt a layout based on its content, rather than assuming a particular device.
Tokens
| Token | Value |
|---|---|
breakpointMobile | 320px |
breakpointTablet | 768px |
breakpointDesktop | 1024px |
Usage
import styled from 'styled-components'
import {tokens} from '@pleo-io/telescope'
const Layout = styled.div`
display: grid;
grid-template-columns: 1fr;
@media (min-width: ${tokens.breakpointTablet}) {
grid-template-columns: repeat(2, 1fr);
}
`Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page