RFS

Wat is RFS?

Bootstrap's zijproject RFS is een engine voor het wijzigen van de grootte van eenheden die oorspronkelijk werd ontwikkeld om de lettergrootte te wijzigen (vandaar de afkorting voor Responsive Font Sizes). Tegenwoordig is RFS in staat om de meeste CSS-eigenschappen te herschalen met eenheidswaarden zoals margin, padding, border-radiusof zelfs box-shadow.

Het mechanisme berekent automatisch de juiste waarden op basis van de afmetingen van de browserviewport. Het zal worden gecompileerd in calc()functies met een mix van remen viewport-eenheden om het responsieve schaalgedrag mogelijk te maken.

RFS gebruiken

De mixins zijn opgenomen in Bootstrap en zijn beschikbaar zodra u Bootstrap's opneemt scss. RFS kan indien nodig ook standalone worden geïnstalleerd .

De mixins gebruiken

De rfs()mixin heeft afkortingen voor font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, en padding-left. Zie het onderstaande voorbeeld voor bron Sass en gecompileerde CSS.

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

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

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

Elke andere eigenschap kan als volgt aan de rfs()mixin worden doorgegeven:

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

!importantkan ook gewoon worden toegevoegd aan elke gewenste waarde:

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

De functies gebruiken

Als u de include niet wilt gebruiken, zijn er ook twee functies:

• rfs-value()converteert een waarde naar een remwaarde als een pxwaarde wordt doorgegeven, in andere gevallen geeft het hetzelfde resultaat.
• rfs-fluid-value()retourneert de vloeiende versie van een waarde als de eigenschap opnieuw moet worden geschaald.

In dit voorbeeld gebruiken we een van Bootstrap's ingebouwde responsieve breekpuntmixins om alleen styling onder het lgbreekpunt toe 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 */
  }
}

Uitgebreide documentatie

RFS is een apart project onder de Bootstrap-organisatie. Meer over RFS en de configuratie ervan is te vinden op de GitHub-repository .