RFS
El motor de cambio de tamaño de Bootstrap escala de manera responsive las propiedades CSS comunes para utilizar mejor el espacio disponible en las ventanas gráficas y los dispositivos.
¿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 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 apropiados en función de las dimensiones de la ventana
gráfica del navegador. Se compilará en funciones calc()
con una combinación de rem
y
unidades de viewport para permitir el comportamiento de escalado responsive.
Usando 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.
Usando los mixins
El mixin rfs()
tiene abreviaturas para font-size
, margin
,
margin-top
, margin-right
, margin-bottom
, margin-left
,
padding
, padding-top
, padding-right
, padding-bottom
y
padding-left
. Ve el siguiente ejemplo en Sass y 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()
así:
.selector {
@include rfs(4rem, border-radius);
}
!important
también se puede agregar al valor que quieras:
.selector {
@include padding(2.5rem !important);
}
Usando las funciones
Cuando no quieras usar los includes, también hay dos funciones:
rfs-value()
convierte a un valorrem
si un valor enpx
es pasado, 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, utilizamos uno de los mixins de puntos de
interrupción responsive integrados en Bootstrap para aplicar solo estilo 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 is small enough, so RFS won't rescale this */
}
}
Documentación extendida
RFS es un proyecto separado bajo la organización Bootstrap. Puedes encontrar más información sobre RFS y su configuración en su repositorio de GitHub.