RFS

¿Qué es RFS?

El proyecto paralelo de Bootstrap, RFS , es un motor de cambio de tamaño de unidades que se desarrolló inicialmente para cambiar el tamaño de las fuentes (de ahí su abreviatura de Responsive Font Sizes). Hoy en día, RFS es capaz de cambiar la escala de la mayoría de las propiedades CSS con valores unitarios como margin, padding, border-radiuso incluso box-shadow.

El mecanismo calcula automáticamente los valores apropiados en función de las dimensiones de la ventana gráfica del navegador. Se compilará en calc()funciones con una combinación de remunidades de ventana gráfica para habilitar el comportamiento de escalado receptivo.

Uso de RFS

Los mixins están incluidos en Bootstrap y están disponibles una vez que incluye Bootstrap's scss. RFS también se puede instalar de forma independiente si es necesario.

Usando los mixins

El rfs()mixin tiene abreviaturas para font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottomy padding-left. Vea el ejemplo a continuación para la fuente Sass 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 a la rfs()mezcla de esta manera:

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

!importanttambién se puede agregar al valor que desee:

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

Usando las funciones

Cuando no desea utilizar los incluidos, también hay dos funciones:

• rfs-value()convierte un valor en un remvalor si pxse pasa un valor, en otros casos devuelve el mismo resultado.
• rfs-fluid-value()devuelve la versión fluida de un valor si es necesario cambiar la escala de la propiedad.

En este ejemplo, usamos uno de los mixins de puntos de interrupción receptivos incorporados de Bootstrap para aplicar solo estilo debajo del punto de lginterrupción.

.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 extendida

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