RFS

¿Qué es RFS?

El proyecto paralelo de Bootstrap, RFS, es un motor de redimensionamiento de unidades que se desarrolló inicialmente para redimensionar tamaños de fuente (de ahí su abreviatura de Responsive Font Sizes). Hoy en día RFS es capaz de reescalar la mayoría de las propiedades CSS con valores de unidad como margin, padding, border-radius, o incluso box-shadow.

El mecanismo calcula automáticamente los valores apropiados basándose en las dimensiones del viewport del navegador. Se compilará en funciones calc() con una mezcla de unidades rem y de viewport para habilitar el comportamiento de escalado responsive.

Uso de RFS

Los mixins están incluidos en Bootstrap y están disponibles una vez que incluyas el scss de Bootstrap. RFS también puede instalarse de forma independiente si es necesario.

Uso de los mixins

El mixin rfs() tiene atajos para font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, y padding-left. Consulta el ejemplo de abajo para ver el Sass fuente y el CSS compilado.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Cualquier otra propiedad puede pasarse al mixin rfs() así:

.selector {
  @include rfs(4rem, border-radius);
}

!important también puede simplemente añadirse a cualquier valor que quieras:

.selector {
  @include padding(2.5rem !important);
}

Uso de las funciones

Cuando no quieras usar los includes, también hay dos funciones:

• rfs-value() convierte un valor en un valor rem si se pasa un valor en px, en otros casos devuelve el mismo resultado.
• rfs-fluid-value() devuelve la versión fluida de un valor si la propiedad necesita reescalado.

En este ejemplo, usamos uno de los mixins de breakpoint responsive integrados de Bootstrap para aplicar estilos solo por debajo del breakpoint lg.

.selector {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won’t rescale this */
  }
}

Documentación ampliada

RFS es un proyecto separado dentro de la organización de Bootstrap. Más información sobre RFS y su configuración puede encontrarse en su repositorio de GitHub.