El framework incluye 5 puntos de corte que se pueden usar combinados con la retícula o dentro de una media query.
Podemos ver los tamaños de los 5 puntos de corte predefinidos en la siguiente tabla:
| Breakpoint | Viewport | Tamaño / Referencia |
|---|---|---|
| XS - Extra pequeño | <34em <544px |
Pantalla muy pequeña / Teléfono |
| SM - Pequeño | ≥34em ≥544px |
Pantalla pequeña / Teléfono |
| MD - Mediano | ≥48em ≥768px |
Pantalla media / Tablet |
| LG - Grande | ≥62em ≥992px |
Pantalla grande / Tablet, escritorio |
| XL - Extra grande | ≥75em ≥1200px |
Pantalla muy grande / Escritorio |
Para poder utilizar estos puntos de corte de manera sencilla, podemos utilizar una serie de mixins de Sass predefinidos. Estos mixins están basados en la anchura mínima del viewport, lo que permite plantear los estilos de los elementos de la pantalla más pequeña hacia la más grande siguiendo una filosofía mobile first.
@include media-up(sm) { ... }
//CSS compilada
@media (min-width: 34em) { ... }
@include media-up(md) { ... }
//CSS compilada
@media (min-width: 48em) { ... }
@include media-up(lg) { ... }
//CSS compilada
@media (min-width: 62em) { ... }
@include media-up(xl) { ... }
//CSS compilada
@media (min-width: 75em) { ... }
Ocasionalmente, necesitaremos usar media queries para tamaños máximos. En esos casos, podemos utilizar los mixins de max-width. Para este mixin, se emplea como variable el último punto de corte en el que esta afirmación es válida. Por ejemplo, si no queremos que afecte al punto de corte md, escribiremos @include media-down(sm).
@include media-down(xs) { ... }
//CSS compilada
@media (max-width: 34em) { ... }
@include media-down(sm) { ... }
//CSS compilada
@media (max-width: 48em) { ... }
@include media-down(md) { ... }
//CSS compilada
@media (max-width: 62em) { ... }
@include media-down(lg) { ... }
//CSS compilada
@media (max-width: 75em) { ... }