RFS rehegua
Bootstrap motor ombotuichave hag̃ua ombotuichave ombohovái hag̃ua umi mbaꞌekuaarã CSS jepivegua oipuru porãve hag̃ua espacio ojeguerekóva umi jehechaukaha ha tembipurukuéra rupi.
Mba’épa pe RFS?
Bootstrap proyecto lateral RFS haꞌehína peteĩ motor omoambuéva unidad oñembotuichavevaꞌekue iñepyrũrãme oñembotuichave hag̃ua umi letra tuichakue (upévare oñembombyky Responsive Font Sizes-pe g̃uarã). Koꞌág̃a rupi RFS ikatu omboheko jey hetavéva CSS mbaꞌekuaarã oguerekóva unidad valor haꞌeháicha margin
, padding
, border-radius
, térã jepe box-shadow
.
Pe mecanismo okalkula ijeheguiete umi valor oñemohenda porãva oñemopyendáva umi dimensión kundahára jehechaukaha rehe. Oñembyatyvaꞌerã calc()
tembiaporãme oguerekóva peteĩ mezcla rem
ha unidad jehechaukaha rehegua ikatu hag̃uáicha ojejapo escalado ombohováiva.
Oipurúvo RFS
Umi mixin oike Bootstrap-pe ha ojeguereko remoĩ rire Bootstrap scss
. RFS ikatu avei oñemboguapy ijeheguiete oñeikotevẽramo.
Oipurúvo umi mixin
Pe rfs()
mixin oguereko taquigrafía font-size
, margin
, margin-top
, margin-right
, margin-bottom
, margin-left
, padding
, padding-top
, padding-right
, padding-bottom
, ha padding-left
. Ehecha techapyrã iguýpe Sass ypykue ha CSS oñembohekopyréva rehegua.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Oimeraẽ ambue mba’ekuaarã ikatu oñembohasa rfs()
mixin-pe kóicha:
.selector {
@include rfs(4rem, border-radius);
}
!important
ikatu avei oñembojoapy rei oimeraẽva valor reipotávape:
.selector {
@include padding(2.5rem !important);
}
Oipurúvo umi tembiaporã
Ndoipuruséi jave umi oikeva’ekue, oĩ avei mokõi tembiaporã:
rfs-value()
omoambue peteĩ mbaꞌerepy peteĩrem
mbaꞌekuaarãme ojehasáramo peteĩpx
mbaꞌekuaarã, ambue kásope omeꞌejey peteĩchagua mbaꞌekuaarã.rfs-fluid-value()
ombojevy versión fluida peteĩ valor rehegua pe propiedad oikotevẽramo escalado jey.
Ko techapyrãme, jaipuru peteĩva Bootstrap mixin punto de ruptura ombohováiva incorporado ñamoĩ hag̃ua estilo punto de lg
ruptura guýpe añoite.
.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 */
}
}
Kuatiakuéra oñembotuicháva
RFS haꞌehína peteĩ tembiaporã añónte oĩva Bootstrap organización poguýpe. Ojekuaave hag̃ua RFS ha iñemboheko rehegua ikatu ojejuhu iGitHub ryru’ípe .