RFS

Wat ass RFS?

Dem Bootstrap säi Säiteprojet RFS ass en Eenheetsgréisstmotor deen am Ufank entwéckelt gouf fir Schrëftgréissten z'änneren (dofir seng Ofkierzung fir Responsive Font Sizes). Hautdesdaags ass RFS fäeg déi meescht CSS Eegeschafte mat Eenheetswäerter wéi margin, padding, border-radius, oder souguer box-shadow.

De Mechanismus berechent automatesch déi entspriechend Wäerter op Basis vun den Dimensiounen vum Browser Viewport. Et gëtt a calc()Funktiounen zesummegesat mat enger Mëschung vun rema Viewport Eenheeten fir de reaktiounsfäeger Skaléierungsverhalen z'erméiglechen.

Benotzt RFS

D'Mixins sinn am Bootstrap abegraff a sinn verfügbar wann Dir Bootstrap's enthält scss. RFS kann och Standalone installéiert ginn wann néideg.

Benotzt d'Mixins

De rfs()Mixin huet Shorthands fir font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottoman padding-left. Kuckt d'Beispill hei ënnen fir Quell Sass a kompiléiert CSS.

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

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

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

All aner Immobilie kann esou un de rfs()Mixin weidergeleet ginn:

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

!importantkann och just zu deem Wäert bäigefüügt ginn, deen Dir wëllt:

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

Benotzt d'Funktiounen

Wann Dir d'Inklusioun net wëllt benotzen, ginn et och zwou Funktiounen:

• rfs-value()konvertéiert e Wäert an e remWäert wann e pxWäert passéiert ass, an anere Fäll gëtt et datselwecht Resultat.
• rfs-fluid-value()gëtt d'flësseg Versioun vun engem Wäert zréck wann d'Propriétéit rescaling brauch.

An dësem Beispill benotze mir ee vun Bootstrap's agebaute reaktiounsfäeger Breakpoint Mixins fir nëmmen Styling ënner dem lgBreakpoint anzesetzen.

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

Verlängert Dokumentatioun

RFS ass e separate Projet ënner der Bootstrap Organisatioun. Méi iwwer RFS a seng Konfiguratioun kann op sengem GitHub Repository fonnt ginn .