RFS
O mecanismo de redimensionamento do Bootstrap dimensiona responsivamente propriedades CSS comuns para melhor utilizar o espaço disponível em viewports e dispositivos.
O que é RFS?
O projeto paralelo do Bootstrap RFS é um mecanismo de redimensionamento de unidade que foi desenvolvido inicialmente para redimensionar tamanhos de fonte (daí sua abreviação para Tamanhos de fonte responsivos). Atualmente o RFS é capaz de redimensionar a maioria das propriedades CSS com valores unitários como margin
, padding
, border-radius
, ou mesmo box-shadow
.
O mecanismo calcula automaticamente os valores apropriados com base nas dimensões da janela de visualização do navegador. Ele será compilado em calc()
funções com uma combinação de rem
unidades de viewport para permitir o comportamento de dimensionamento responsivo.
Usando RFS
Os mixins estão incluídos no Bootstrap e estão disponíveis quando você inclui os arquivos scss
. O RFS também pode ser instalado de forma independente , se necessário.
Usando os mixins
O rfs()
mixin tem atalhos para font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, e padding-left
. Veja o exemplo abaixo para fonte Sass e CSS compilado.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Qualquer outra propriedade pode ser passada para o rfs()
mixin assim:
.selector {
@include rfs(4rem, border-radius);
}
!important
também pode ser adicionado ao valor que você quiser:
.selector {
@include padding(2.5rem !important);
}
Usando as funções
Quando você não quiser usar as inclusões, também existem duas funções:
rfs-value()
converte um valor em umrem
valor se umpx
valor for passado, em outros casos retorna o mesmo resultado.rfs-fluid-value()
retorna a versão fluida de um valor se a propriedade precisar ser redimensionada.
Neste exemplo, usamos um dos mixins de ponto de interrupção responsivos internos do Bootstrap para aplicar apenas o estilo abaixo do ponto de lg
interrupção.
.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 */
}
}
Documentação estendida
RFS é um projeto separado sob a organização Bootstrap. Mais sobre o RFS e sua configuração podem ser encontrados em seu repositório GitHub .