RFS

Wat is RFS?

Bootstrap's sydprojekt RFS is in ienheidsferoaringsmotor dy't yn earste ynstânsje waard ûntwikkele om lettertypegrutte te feroarjen (dêrfandinne syn ôfkoarting foar Responsive Font Sizes). Tsjintwurdich is RFS yn steat om de measte CSS-eigenskippen opnij te skaaljen mei ienheidswearden lykas margin, padding, border-radius, of sels box-shadow.

It meganisme automatysk berekkent de passende wearden basearre op de ôfmjittings fan de browser viewport. It sil wurde gearstald yn calc()funksjes mei in miks fan remen viewport-ienheden om it responsive skaalgedrach mooglik te meitsjen.

Mei help fan RFS

De mixins binne opnommen yn Bootstrap en binne beskikber as jo ienris Bootstrap's opnimme scss. RFS kin ek standalone ynstalleare as it nedich is.

Mei help fan mixins

De rfs()mixin hat shorthands foar font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, en padding-left. Sjoch it foarbyld hjirûnder foar boarne Sass en kompilearre CSS.

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Elke oare eigendom kin sa trochjûn wurde oan 'e rfs()mixin:

.selector {
  @include rfs(4rem, border-radius);
}

!importantkin ek gewoan tafoege wurde oan hokker wearde jo wolle:

.selector {
  @include padding(2.5rem !important);
}

It brûken fan de funksjes

As jo ​​​​de omfettet net wolle brûke, binne d'r ek twa funksjes:

• rfs-value()konvertearret in wearde yn in remwearde as in pxwearde wurdt trochjûn, yn oare gefallen jout it itselde resultaat.
• rfs-fluid-value()jout de floeiende ferzje fan in wearde werom as it pân opnij skalen moat.

Yn dit foarbyld brûke wy ien fan Bootstrap's ynboude responsive brekpuntmixins om allinich styling ûnder it lgbrekpunt oan te passen.

.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 */
  }
}

Útwreide dokumintaasje

RFS is in apart projekt ûnder de Bootstrap-organisaasje. Mear oer RFS en syn konfiguraasje is te finen op syn GitHub repository .