Breakpoints
BetaCinco puntos de quiebre, mobile first.
Polen diseña mobile first: el estilo base es el de la pantalla más chica y
cada breakpoint agrega cuando hay lugar. Los valores son min-width.
| Figma | CSS | Valor | Uso |
|---|---|---|---|
| breakpoint-sm | --breakpoint-sm | 640px | Mobile grande / landscape. |
| breakpoint-md | --breakpoint-md | 768px | Tablet. Aparece la sidebar. |
| breakpoint-lg | --breakpoint-lg | 1024px | Laptop. |
| breakpoint-xl | --breakpoint-xl | 1280px | Desktop. Aparece la tabla de contenidos. |
| breakpoint-2xl | --breakpoint-2xl | 1536px | Desktop ancho. |
Cómo diseñar con ellos
- Diseñá 3 anchos, no 5: 375 (mobile), 768 (tablet) y 1280 (desktop). Los otros dos breakpoints son para ajustes, no para layouts nuevos.
- El contenido manda. Si algo se rompe a 900 px, arreglá el componente (que fluya, que envuelva) antes de pedir un breakpoint nuevo.
- Ancho de lectura: el texto corrido no pasa de ~70 caracteres por línea aunque la pantalla sea enorme.
- En Figma, los frames de página usan estos anchos exactos y las variables de
la colección Breakpoints para
min-width.
En código
Son los prefijos responsive de Tailwind:
<div className="grid grid-cols-1 gap-(--space-4xl) md:grid-cols-2 xl:grid-cols-3">
…
</div>