RFS

Was ist RFS?

Das Bootstrap-Nebenprojekt RFS ist eine Unit-Resizing-Engine, die ursprünglich entwickelt wurde, um die Schriftgröße zu ändern (daher die Abkürzung für Responsive Font Sizes). Heutzutage ist RFS in der Lage, die meisten CSS-Eigenschaften mit Einheitenwerten wie margin, padding, border-radiusoder sogar neu zu skalieren box-shadow.

Der Mechanismus berechnet automatisch die entsprechenden Werte basierend auf den Abmessungen des Browser-Darstellungsfensters. Es wird in calc()Funktionen mit einer Mischung aus remViewport-Einheiten kompiliert, um das responsive Skalierungsverhalten zu ermöglichen.

Verwendung von RFS

Die Mixins sind in Bootstrap enthalten und stehen zur Verfügung, sobald Sie Bootstrap's einbinden scss. RFS kann bei Bedarf auch eigenständig installiert werden.

Verwenden der Mixins

Das rfs()Mixin hat Abkürzungen für font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, und padding-left. Siehe das Beispiel unten für Quell-Sass und kompiliertes CSS.

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

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

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

Jede andere Eigenschaft kann wie folgt an das rfs()Mixin übergeben werden:

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

!importantkann auch einfach zu jedem gewünschten Wert hinzugefügt werden:

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

Nutzung der Funktionen

Wenn Sie die Includes nicht verwenden möchten, gibt es auch zwei Funktionen:

• rfs-value()wandelt einen Wert in einen remWert um, wenn ein pxWert übergeben wird, in anderen Fällen gibt es das gleiche Ergebnis zurück.
• rfs-fluid-value()gibt die flüssige Version eines Werts zurück, wenn die Eigenschaft neu skaliert werden muss.

In diesem Beispiel verwenden wir eines der integrierten Responsive-Breakpoint-Mixins von Bootstrap, um das Styling nur unterhalb des Breakpoints anzuwenden lg.

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

Erweiterte Dokumentation

RFS ist ein separates Projekt der Bootstrap-Organisation. Weitere Informationen zu RFS und seiner Konfiguration finden Sie in seinem GitHub-Repository .