design tokens
breakpoints
Layout grids são compostas por linhas e colunas que ajudam a estruturar a composição da página e criar interfaces responsivas.
índice
breakpoints
A mudança de breakpoint é automâtica feita por código. É importante criar
interfaces em diferentes breakpoints para o planejamento de telas dinâmicas. Nos
aplicativos mobile, é utilizado o tamanho $breakpoint-xsmall.
base tokens
Base tokens são usados somente para criação de novos temas. Para criar componentes, utilize os theme tokens.
| nome | valor |
|---|---|
| $breakpoints-100 | 320px |
| $breakpoints-200 | 720px |
| $breakpoints-300 | 1080px |
| $breakpoints-400 | 1280px |
| $breakpoints-500 | 1440px |
theme tokens
| nome | grupo | valor |
|---|---|---|
| $breakpoints-1xsmall | $breakpoints-100 | 320px |
| $breakpoints-small | $breakpoints-200 | 720px |
| $breakpoints-medium | $breakpoints-300 | 1080px |
| $breakpoints-large | $breakpoints-400 | 1280px |
| $breakpoints-1xlarge | $breakpoints-600 | 1600px |