Bootstrap 4 kommt mit Reboot.css als neues Reset

Eine komfortable Neuerung für die Frontend-Entwicklung

Bootstrap ist das populärste und meist verbreitete Framework für die Entwicklung mit HTML-, CSS- und JavaScript. Bootstrap eignet sich besonders für die Entwicklung reaktionsschneller, endgeräte-unabhängiger Websites. Als Open Source Tool kann Bootstrap kostenlos genutzt werden und profitiert von der großen sowie aktiven Community. Das Frontend-Framework punktet speziell durch seine vielseitigen Einsatzmöglichkeiten. Dank der breiten Auswahl an Ressourcen innerhalb von Bootstrap können damit die unterschiedlichsten Web-Projekte jeglicher Größenordnung abgebildet werden.

Bootstrap v4.0

Jeder neue Release und besonders jede neue Vollversion ist ein nicht zu unterschätzendes Stück Arbeit für das Kernteam rund um das Bootstrap-Framework. Denn es wird von Millionen Web-Entwicklern und Websites verwendet, die sich zuvor und so auch mit jedem neuen Release auf den veröffentlichten Code verlassen. Dies können alle Anwender auch mit der Version 4 von Bootstrap erneut bedenkenlos. Bei einem Wechsel von Version 3 zur neuen Bootstrap-Version 4 sind jedoch einige Punkte zu beachten, sodass man zuvor einen Blick auf die Migrationsinfos werfen sollte. Geändert haben sich u.a. das Grid System, das auf CSS Flexbox umgestellt wurde. Auf die Nennung weiterer Änderungen verzichten wir mit einem Verweis auf den vorherigen Link und widmen uns dem gänzlich neuen CSS-Reset von Bootstrap.

Reboot.css als Reset in Bootstrap

Eine der Neuerungen von Bootstrap 4 ist das Reboot.css, das innerhalb von Bootstrap als „Reset“ fungiert. Die Idee eines Resets kam als Erstes mit dem Wunsch auf, das Web-Applikationen auch Browser übergreifend das Frontend wirklich gleich anzeigen. Viele bezeichnen das Stylesheet von Eric Meyer als erstes Reset-Tool. Dieses kam und kommt aber nicht ohne eigene weitere darauf aufsetzende Basis-Styles aus. Web-Entwickler kreierten also ergänzende „Resets“. Einige dieser erstellten „Resets“ wurden recht bekannt, dazu zählt unter anderem normalize.css. Es hebt sich besonders ab, da es sowohl ein Reset der Browser Styles vornimmt als auch einige einfache, funktionale Basis-Styles gleich mitliefert. Reboot.css geht nun noch einen Schritt weiter.

Reboot.css - die Highlights
Reboot.css wird in Bootstrap 4 auf einer einzigen Seite bereitgestellt, ist somit einfach implementierbar und bringt allgemein einige Highlights in Spiel:

• Es stammt aus der qualitativ hochwertigen Feder von Bootstrap
• Es setzt Browser Styles für eine Browser übergreifende Entwicklung zurück
• Bietet einen einfachen und ansprechenden Basis-Style
• Nutzt auch im Standard bereits „box-size: border-box;“ für alle Elemente
• Sehr guter Maßstab für das Schreiben von qualitativem CSS-Code

"rem" als nachhaltige Maßeinheit

Die Verwendung von „rem“ anstelle anderer Einheiten ist nicht nur für die Schriftgrößen gedacht, sie können auch für alle Abstände verwendet werden. Mit CSS3 wurde auch die neue Maßeinheit „rem“ eingeführt. Wie Größen im Web am besten angewendet werden, ist in Entwicklerkreisen oftmals Anlass zur Diskussion. Die „rem“ Einheit bietet hier einen sehr guten Lösungsansatz. Letztlich zielt „rem“ auf die Barrierefreiheit bezüglich der Usability für die Benutzer (reibungsloses Skalieren von Elementen auf verschiedenen Bildschirmgrößen) und die möglichst unkomplizierte Wartung sowie Konsistenz für die Frontend-Entwickler ab. Bei der Verwendung von Einheiten wie „px“ oder „em“ muss man entweder Abstriche bei der durchgängigen Konsistenz sowie Wartbarkeit des Codes machen oder mangelnde Barrierefreiheit in Kauf nehmen.

Rückgriff auf die native „font family“ mit Reboot.css

Schriftarten können beim Aufruf einer Website in verschiedenen Betriebssystemen unterschiedlich aussehen. Ein Font sieht unter Mac OSX gut aus aber vielleicht ist die Schriftart unter Windows nicht mehr so scharf wie zuvor. Betriebssysteme rendern Fonts durchaus unterschiedlich, weshalb Reboot.css auf die nativ verfügbaren Fonts des jeweiligen Systems zurückgreift, um diese Problematik auszuräumen. Die Schriftarten werden so zum einen sehr schnell geladen und zum anderen wird die Schriftart gesetzt, die innerhalb des Betriebssystems am besten aussieht.

Viele Elemente ohne „margin top“

Reboot.css eliminiert für eine ganze Reihe von Elementen standardmäßig die obere Begrenzung. Folgende Elemente kommen nun ohne „margin top“ aus:

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre

Dies erweist sich als hilfreich, wenn die Elemente vollständig durch das CMS gesteuert werden. So ist sogar der jeweilige Inhalt fast beliebig. Dieses Vorgehen hat also durchaus seine Berechtigung.

Reboot.css fokussiert ebenfalls die mobile Nutzung

Bootstrap schreibt sich auf die Fahnen das „Go-to“ Tool für responsive und mobile-first Web-Projekte zu sein. Auch Reboot.css trägt der Fokussierung auf die mobile Nutzung Rechnung. Standardmäßig findet „touch-action: manipulation“ Verwendung, um so die Bedienbarkeit für Benutzer von Mobilgeräten mit Tochscreens zu beschleunigen und Verzögerungen in der Touchscreen-Nutzung gering zu halten. Das Anklicken von Links, Buttons und Formularfeldern wird so einfacher und wesentlich schneller.

Fazit zu Reboot.css in Bootstrap

Das durch Bootstraps vierte Version neu verfügbare Reboot.css ist eine echte Bereicherung für die Frontend-Entwicklung und eine Fortsetzung der Bemühungen, das modernen Web mit sinnvollen Best Practices weiter zu standardisieren.

Sie möchten mehr zu den Möglichkeiten der Web-Entwicklung sowie der Verwendung von Bootstrap und Reboot.css erfahren? Sie haben weitere Fragen zum Einsatz von Bootstrap oder der Migration von Version 3 zu Version 4? Kontaktieren Sie mindtwo in Bonn per Kontaktformular, E-Mail oder rufen Sie uns an! Wir beraten Sie gerne.