× Startseite
Variable Schriftgrößen für das Responsive Webdesign

Bootstrap RFS - Responsible Font Sizes

Bootstrap with RFS (Responsible Font Sizes)

Bootstrap RFS automatisiert und vereinfacht die Anpassung von Schriftgrößen im Responsive Webdesign. Das Benutzen ist wirklich ganz einfach.

RFS berechnet automatisch die entsprechenden Werte basierend auf den Abmessungen des Browser Viewports.

Die Berechnung erfolgt mit calc()-Funktionen und wird mit einer Mischung aus Rem- und Viewport-Einheiten kompiliert. Dadurch wird das reaktionsschnelle Skalierungsverhalten ermöglicht. Das hört sich jetzt nach einer sehr komplizierten Benutzung an, ist es aber nicht. SCSS ist eine Grundvoraussetzung für RFS.

Das ursprünglich zur Größenänderung von Schriftgrößen entwickelte RFS (Abkürzung für Responsive Font Sizes) ist heutzutage in der Lage, die meisten CSS-Eigenschaften mit Einheitswerten wie margin, padding, border-radius oder box-shadow neu zu skalieren. Zurzeit benutze ich nur die Font Sizes.

Bootstrap RFS benutzen

Auf dieser Website benutze ich <h1> bis <h4> Überschriften, deshalb habe ich auch nur dafür den entsprechenden SCSS-Code erstellt:

h1 { @include font-size(2.1rem); }
h2 { @include font-size(1.6rem); margin-top: 2.5rem; }
h3 { @include font-size(1.4rem); margin-top: 2.0rem; }
h4 { @include font-size(1.1rem); margin-top: 2.0rem; }
p { @include font-size(1.0rem); }

Das war’s, einfacher geht es nicht.

Das Ganze hat schon einen Touch von Magie und reduziert die eigene Arbeit enorm. Diese und andere Arbeitserleichterungen machen das Bootstrap Toolkit so interessant. Die obigen rem-Angaben beziehen sich auf einen min-width von 1200px. Den benutzt RFS als default-Wert, auch dieser default-Wert kann konfiguriert werden.

Bootstrap RFS installieren

Wenn Sie die Bootstrap SCSS und JavaScript Dateien bereits in Ihr Hugo-Projekt integriert haben, sind keine weiteren Installationsarbeiten nötig. Sie können einfach den oben beschriebenen SCSS-Code in eine Ihrer SCSS-Dateien einfügen.

Auch ohne die komplette Bootstrap Installation können Sie - RFS standalone - installieren. Wie Bootstrap in Hugo eingebunden wird, werde ich in einem späteren Beitrag beschreiben.

Bootstrap RFS konfigurieren

Ich möchte die Angaben der RFS-Doku zur Konfiguration hier nicht noch einmal wiederholen. Deshalb schauen Sie bitte - in der RFS-Doku - nach. Die $rfs-* Variablen habe ich in meiner variables.scss gespeichert. Die SCSS-Datei wird vor Bootstrap im SCSS-Baum geladen.

$rfs-base-value: 0.8rem;
$rfs-rem-value: 20;
$rfs-safari-iframe-resize-bug-fix: true;

$rfs-base-value: Die Option verhindert, dass der Wert auf kleineren Bildschirmen zu klein wird. Ist die an RFS übergebene Schriftgröße kleiner als dieser Wert, findet keine flüssige Neuskalierung statt.
$rfs-rem-value: Die Standardgröße auf meiner Website ist 20px und nicht 16px.

Fazit

Bootstrap mit RFS ist zurzeit in der Version v5.0.2 veröffentlicht. Ich benutze es auf dieser Website und habe damit zurzeit auch keine Probleme. RFS setze ich im Moment nur für <h1> bis <h4> ein. Bei dem HTML-Element <p> hat es bei mir nicht funktioniert. Für <p> benutze ich 1.0rem. Es wäre schön wenn dies bei kleinem Viewport skalieren würde. Der Minimalwert von rfs-base-value ist 0.8rem. Also eigentlich müsste auch <p> verkleinert werden. Ansonsten ist RFS wirklich eine Arbeitserleichterung, mit ganz einfacher Benutzung.

Linkliste zu diesem Beitrag

- Update 01. Aug. 2021 |
3 Minuten Lesezeit
0
Dieser Beitrag wurde mit der Hugo-Version 0.85.0 erstellt.

Kommentare werden bei deutscher Spracheinstellung nicht in der englischen Variante der Webseite angezeigt und umgekehrt.

© 2021 - Frank Kunert  -  Ich über mich
Ein Service von webdienste-kunert.de