Top 5 Bootstrap-Alternativen

Inhaltsverzeichnis

Bootstrap ist allgegenwärtig, doch er ist nicht immer die optimale Lösung. Hier präsentieren wir einige bemerkenswerte Alternativen!

Wer heutzutage den Quellcode einer Webseite im Frontend-Bereich analysiert, wird mit hoher Wahrscheinlichkeit auf Bootstrap stoßen. Wir alle haben uns an Konzepte wie Container-Fluid, Row, Col-SM-6 usw. gewöhnt, dass eine alternative Vorgehensweise in der Frontend-Entwicklung schwer vorstellbar ist. Wenn ein neues Projekt ansteht, greifen viele automatisch zu Bootstrap. Die weite Verbreitung bedeutet jedoch nicht, dass Bootstrap für jedes Projekt und alle Anforderungen geeignet ist.

Gerade bei besonders schlanken Frontends kann das gesamte Bootstrap-CSS und JavaScript zu unnötig großen Dateigrößen führen.

Dieser Artikel verfolgt zwei Ziele:

Vorstellung von Live-Alternativen zu Bootstrap, die nicht Bootstrap ähneln
Darlegung, warum man diese Alternativen statt Bootstrap in Betracht ziehen sollte

Die Begründung ist besonders wichtig, da viele Anwender oft nicht bemerken, dass sie ein Problem haben oder sich die Arbeit durch den Einsatz von Bootstrap erschweren. Abschließend sei betont, dass dieser Beitrag keineswegs als Kritik an Bootstrap zu verstehen ist. Bootstrap 4 ist ein nützliches Werkzeug und wird oft genutzt, wann immer es passt. Als Einzelentwickler ist man jedoch gezwungen, die populärste Lösung zu verwenden. Zudem bin ich kein UI-Spezialist und mache mir bei der Frontend-Gestaltung nicht übermäßig viele Gedanken.

Sehen wir uns nun die Alternativen an.

Flexbox Grid

Überlegen wir kurz: Der Hauptgrund, warum Sie mit Bootstrap angefangen haben und es immer noch nutzen, ist das Grid-System. Die Eingewöhnung an Klassen wie row, col-md-6 usw. war zwar zunächst ungewohnt, doch nun ist es selbstverständlich, Layouts in Zeilen, Spalten, Offsets usw. zu denken.

Ehrlicherweise ist vieles andere in Bootstrap eher hinderlich. Es gibt eine Vielzahl von Klassen, die man sich merken muss, sei es für Formulare, Navigationen, Buttons, Tabellen oder anderes. Viele haben sich, wie ich, noch nicht an alle Klassen und ihre Funktionen gewöhnt und verwenden Bootstrap oft nur für das Grid, während der restliche CSS-Code selbst geschrieben wird.

In diesem Fall wäre das Flexbox Grid eine deutliche Verbesserung.

Flexbox Grid ist, wie der Name verrät, ein Grid-System, das auf den CSS-Eigenschaften von Flexbox basiert. Die Komplexität wird jedoch geschickt abstrahiert, sodass Sie sich voll auf die Platzierung der Elemente konzentrieren können. Die Code- und Klassennamen ähneln denen von Bootstrap 4, was den Wechsel zwischen den Tools erleichtert. Das ist z.B. der Code für „Leerzeichen um“ im Flexbox Grid:

<div class="row around-xs">
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
</div>

Die komprimierte CSS-Datei dieses Grid-Systems ist nur 10,7 KB groß, wodurch viele KB bei der finalen Downloadgröße eingespart werden. Das Flexbox Grid ist derzeit meine bevorzugte Wahl, da ich Bootstrap nicht mehr mühsam anpassen muss. Ich beginne gern mit Vanilla-Elementen, die ich selbst style und verwende Flexbox Grid wo immer es erforderlich ist.

Lernen Sie Flexbox hier, online.

Pure CSS

Wäre es nicht ideal, wenn Bootstrap modular aufgebaut wäre und man nur die benötigten Module importieren könnte?

Pure CSS hat genau dies umgesetzt: Es handelt sich um eine Sammlung von Modulen, die verschiedene funktionale Bereiche einer Webseite abdecken. Sie können ein Modul oder alle Module herunterladen, wobei die Downloadgröße 3,7 KB nicht überschreiten wird!

Das ist richtig.

Alle Module sind zusammengefasst und gezippt 3,7 KB groß, obwohl sie einzeln mehr wiegen. Das Rastermodul ist lediglich 0,8 KB groß, während das Basismodul 1,0 KB umfasst. Die Entwickler von PureCSS betonen, dass es vollständig für mobile Geräte optimiert ist und jede CSS-Zeile sorgfältig auf Effizienz geprüft wurde, bevor sie hinzugefügt wurde.

Angenommen, Sie benötigen nur das Raster- und Formularmodul. Dann laden Sie diese beiden (zusammen mit dem Basismodul) herunter und Sie sind mit weniger als 3,4 KB fertig! Es ist nicht nötig, CSS aus den Modulen „Buttons“, „Tabellen“ oder „Menüs“ hinzuzufügen, wenn Sie diese nicht brauchen.

PureCSS hat eigene Klassen und der resultierende Code ähnelt nicht Bootstrap:

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
        </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Dolor Sit Amet</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Proident laborum</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Praesent consectetur</h3>
       </div>
    </div>
</div>

Sie werden bemerken, dass kein 12-Spalten-Raster mehr vorhanden ist. PureCSS nutzt sein eigenes Rastersystem, welches die Breite einer Spalte angibt. `pure-u-lg-1-4` bedeutet, dass dieses Element auf großen Bildschirmen 1/4 oder 25% der verfügbaren Breite einnehmen sollte. Breiten als Vielfache von 1/5 sind ebenfalls möglich.

Insgesamt ist PureCSS ein befreiendes und herausragendes CSS-Tool (oder Framework?), aus dem Sie nach Bedarf auswählen können. Es ist jedoch mit einer nicht geringen Einarbeitungszeit und Lernkurve verbunden, da man einen neuen (etwas anderen) Weg der Vorgehensweise erlernen muss.

PureCSS hat zudem eigene Klassen und Standardstile und unterscheidet sich somit nicht so sehr von Bootstrap.

Zimit

Das Zimit-Framework nimmt in dieser Liste eine Sonderrolle ein. Es ist zwar auch ein Framework zur Erstellung von Benutzeroberflächen, richtet sich jedoch an spezielle Anwendungsfälle: Mockups.

Manchmal muss das Frontend entwickelt werden, um die Funktionsweise des Produkts darzustellen. Idealerweise würde man einen UI-Designer bzw. Entwickler hinzuziehen und die Mockups mit fortschrittlichen Wireframing-Tools erstellen (z.B. Moqups oder Balsamiq). Die Seiten wären pixelgenau, das Farbschema elegant und stimmig und die Seiten offen für die Zusammenarbeit, Überprüfung, Kommentare usw.

Die Realität sieht jedoch anders aus: Oft ist man als Einzelkämpfer für alles zuständig und muss die Arbeit erledigen. Dann benötigt man ein Framework, das:

Das Codieren in HTML/CSS ermöglicht
Leichtgewichtig ist
Eine umfangreiche Sammlung grundlegender Komponenten bietet
Eine dezente und konsistente Stilsprache hat
Dem „grauen“ Ton eines Wireframe-Designs nahekommt
Leicht zu erlernen ist
Einen eingebauten CSS-Präprozessor hat

Zimit erfüllt alle diese Anforderungen. Es ist nur 84 KB groß und bietet eine Vielzahl von Komponenten. Einige Beispiele, die mir besonders gut gefallen haben, weil sie in der Programmierung viel Zeit kosten:

Baumansicht

Breadcrumbs

Tabs

Es gibt noch viele weitere nützliche Features. Diese sind hier einsehbar.

So sieht der Code aus. So nutzt man das Grid-System in Zimit:

<div class="row">
   <div class="c12">
      <div class="row">
         <div class="c4">4 columns</div>
         <div class="c4">4 columns</div>
      </div>
      <div class="row">
         <div class="c4">4 columns</div>
         <div class="c4">4 columns</div>
      </div>
   </div>
</div>

Das „c“ steht für „column“, also bedeutet „c4“ eine Spalte, die sich über vier Einheiten erstreckt (das Raster ist auf 12 Einheiten ausgelegt, wie bei Bootstrap). Es ist Bootstrap sehr ähnlich und wirkt intuitiv.

Zimit ist ein umfangreiches und unkompliziertes Framework für die Entwicklung von UI-Prototypen, die schnell reagieren und gut aussehen. Es ist Bootstrap überlegen (wenn es um Prototyping geht), da Bootstrap einen viel größeren Umfang hat und das resultierende Design weniger ansprechend ist.

HTML KickStart

Bei den meisten Projekten ist Schnelligkeit entscheidend. Der größte Geschwindigkeitshemmer bei der Webentwicklung ist das Frontend und der größte „Verzögerer“ in der Frontend-Entwicklung ist die Notwendigkeit, elegant aussehende, interaktive Komponenten zu entwickeln. Da es viele Möglichkeiten gibt, wie sich eine Komponente verhalten kann und viele Bildschirmgrößen zu berücksichtigen sind, kann die Entwicklung und Pflege von Komponenten zu einem Albtraum werden.

HTML KickStart bietet hier eine Alternative.

Einfach gesagt, ist es eine Sammlung sehr schlanker Komponenten, die man einfach in seine Projekte einfügen kann, wodurch die Entwicklungszeit deutlich reduziert wird. Einige interessante Komponenten, die ich gefunden habe:

Dropdown-Liste

Buttons

Tabs (zentriert und mit Symbolen)

Materialize

Wer Bootstrap schätzt, weil es eine fertige Lösung für alle gängigen Webdesign-Probleme bietet, jedoch ein Fan des Material Design-Stils ist, sollte Materialize testen.

Materialize ähnelt in weiten Zügen Bootstrap – ein 12-Punkte-Rastersystem, Offsets und bekannte Komponenten wie Formulare, Karten usw. Es bietet jedoch einige Extras, die viele ansprechen werden.

Push und Pull

Mit der Push/Pull-Funktion von Materialize CSS können Spalten neu angeordnet werden. Dies ähnelt dem neuen CSS-Grid-Standard, bei dem das Layout von der Reihenfolge der Elemente abweicht.

<div class="row">
      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>

Das Resultat:

Die Spalten haben die Plätze getauscht, was mit traditionellem Bootstrap-basiertem CSS nicht erreichbar wäre.

JavaScript-Features

Materialize bietet eine Reihe von JavaScript-Funktionen und -Effekten. Tooltips, Toasts (kurze Benachrichtigungen im Android-Stil), Parallax, Pin usw. sind einige davon. Ein interessanter Effekt ist FeatureDiscovery, mit dem Sie bei einem bestimmten Ereignis (z.B. Tastendruck) ein Element hervorheben können, um die Aufmerksamkeit des Nutzers darauf zu lenken. Um dies besser zu veranschaulichen, besuchen Sie bitte https://materializecss.com/feature-discovery.html.

Zusammenfassend ist Materialize eine hervorragende Alternative zu Bootstrap für diejenigen, die ein voll funktionsfähiges Material-CSS-Framework verwenden möchten.

Fazit

Bootstrap ist ein Synonym für responsives Design. Bootstrap hat das Konzept „Mobile-First-Design“ populär gemacht und gezeigt, wie es funktioniert. Obwohl Bootstrap die meiste Zeit nützlich ist, ist es nicht immer die beste Option. Wer das Gefühl hat, von Bootstrap eingeschränkt zu sein und spezielle Anforderungen hat, sollte eine der hier vorgestellten Optionen testen. 🙂