RFS
U mutore di ridimensionamentu di Bootstrap scala in modu responsibile e proprietà CSS cumuni per utilizà megliu u spaziu dispunibule nantu à i vetri è i dispositi.
Cosa hè RFS?
U prughjettu laterale di Bootstrap RFS hè un mutore di ridimensionamentu di unità chì hè statu inizialmente sviluppatu per ridimensionà e dimensioni di font (da quì a so abbreviazione per Responsive Font Sizes). Oghje, RFS hè capaci di ridimensionà a maiò parte di e proprietà CSS cù valori di unità cum'è margin
, padding
, border-radius
, o ancu box-shadow
.
U mecanismu calcula automaticamente i valori appropritati basatu nantu à e dimensioni di a vista di u navigatore. Serà cumpilatu in calc()
funzioni cù una mistura di rem
e unità di viewport per attivà u cumportamentu di scaling responsive.
Utilizà RFS
I mixin sò inclusi in Bootstrap è sò dispunibili una volta chì include Bootstrap's scss
. RFS pò ancu esse installatu standalone se necessariu.
Utilizà i mixins
U rfs()
mixin hà shorthands per font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, è padding-left
. Vede l'esempiu sottu per Sass fonte è CSS compilatu.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Ogni altra pruprietà pò esse passata à u rfs()
mixin cusì:
.selector {
@include rfs(4rem, border-radius);
}
!important
pò ancu esse aghjuntu à qualsiasi valore chì vulete:
.selector {
@include padding(2.5rem !important);
}
Utilizà e funzioni
Quandu ùn vulete micca utilizà l'inclusi, ci sò ancu duie funzioni:
rfs-value()
converte un valore in unrem
valore si unpx
valore hè passatu, in altri casi torna u listessu risultatu.rfs-fluid-value()
torna a versione fluida di un valore se a pruprietà hà bisognu di ridimensionamentu.
In questu esempiu, usemu unu di i mixins di breakpoint responsive integrati di Bootstrap per applicà solu u stilu sottu à u lg
breakpoint.
.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 */
}
}
Documentazione allargata
RFS hè un prughjettu separatu sottu l'urganizazione Bootstrap. Più nantu à RFS è a so cunfigurazione ponu esse truvati in u so repository GitHub .