RFS rehegua

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 remha 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);
}

!importantikatu 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ĩ remmbaꞌekuaarãme ojehasáramo peteĩ pxmbaꞌ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 umi mixin punto de ruptura ombohováiva incorporado Bootstrap-pegua ñamoĩ hag̃ua estilo punto de lgruptura 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. RFS ha iñemohendapyre rehegua hetave mba’e ikatu ojejuhu iGitHub ryru’ípe .