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 para Responsive Font Sizes). Hoy en día, RFS es capaz de reescalar la mayoría de las propiedades CSS con valores unitarios como margin, padding, border-radius o incluso box-shadow.

El mecanismo calcula automáticamente los valores adecuados en función de las dimensiones del viewport del navegador. Se compilará en funciones calc() con una combinación de rem y unidades de viewport para habilitar el comportamiento de escalado adaptivo (responsive).

Uso de RFS

Los mixins están incluidos en Bootstrap y están disponibles una vez que incluyes el scss de Bootstrap. RFS también se puede instalar 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 a continuación para ver el Sass de origen 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 se puede pasar al mixin rfs() de esta manera:

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

También se puede agregar !important a cualquier valor que desees:

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

Uso de las funciones

Cuando no quieras usar los mixins (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 puntos de interrupción adaptivos (responsive breakpoint mixins) integrados de Bootstrap para aplicar estilo solo por debajo del punto de interrupción 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 es lo suficientemente pequeño, por lo que RFS no lo reescalará */
  }
}

Documentación extendida

RFS es un proyecto independiente bajo la organización Bootstrap. Se puede encontrar más información sobre RFS y su configuración en su repositorio de GitHub.