Die 8 besten Bootstrap-Alternativen

Bootstrap ist allgegenwärtig, aber es ist nicht immer das richtige Werkzeug für diese Aufgabe. Hier sind einige großartige Alternativen!

Wenn Sie heutzutage zufällig den Quellcode des Frontends einer Website überprüfen, werden Sie mit großer Wahrscheinlichkeit Bootstrap darunter finden.

Wir haben uns alle so sehr an Konzepte wie container-fluid, row, col-sm-6 usw. gewöhnt, dass es schwer vorstellbar ist, dass ein anderer Stil der Frontend-Entwicklung überhaupt möglich ist. Wenn wir auch das nächste Projekt erstellen müssen, greifen wir unbewusst zu Bootstrap. Allerdings ist Bootstrap aufgrund seiner Popularität nicht für alle Projekte und Anforderungen geeignet.

Bei wirklich schlanken Frontends kann das Laden des gesamten Bootstrap-CSS und -JS sogar zu einer erheblichen Aufblähung führen.

Dieser Artikel hat zwei Ziele:

1. Alternativen zu Bootstrap, die nicht mit Bootstrap vergleichbar sind, vorzustellen
2. Erklären Sie, warum Sie diese Alternativen gegenüber Bootstrap in Betracht ziehen sollten

Ich denke, der Teil mit den Erklärungen ist wirklich wichtig, denn in den meisten Fällen sind sich die Leute gar nicht bewusst, dass sie ein Problem haben oder dass sie sich ihre Arbeit schwerer machen, wenn sie zu Bootstrap greifen. Abschließend möchte ich darauf hinweisen, dass dies keineswegs ein Beitrag gegen Bootstrap ist.

Ich liebe Bootstrap 4 und verwende es, wann immer ich kann. Aber ich bin ein individueller Entwickler, der die beliebteste Lösung verwenden muss. Außerdem bin ich kein UI-Entwickler per se, so dass ich mir bei der Entwicklung meines Frontends nicht allzu viele Gedanken mache.

Schauen wir uns auch einmal an, welche Alternativen wir haben.

Flexbox-Raster

Denken Sie einmal kurz darüber nach: Der Hauptgrund, warum Sie mit Bootstrap angefangen haben und es immer noch verwenden, ist sein Grid-System. Sicher, es hat etwas gedauert, bis Sie sich an die Klassen row, col-md-6 usw. gewöhnt waren, aber jetzt ist es Ihnen in Fleisch und Blut übergegangen, ein Layout in Form von Zeilen, Spalten, Offsets usw. zu denken.

Und wenn Sie ehrlich zu sich selbst sind, werden Sie feststellen, dass alles andere in Bootstrap ein bisschen lästig ist, um damit zu arbeiten.

Es gibt tonnenweise Klassen, die Sie sich merken müssen, egal ob es sich um Formulare, Navigation, Schaltflächen, Tabellen oder etwas anderes handelt. Wenn es Ihnen wie mir geht, haben Sie sich immer noch nicht an all die Klassen und deren Funktionen gewöhnt und verwenden Bootstrap oft nur für das Raster und schreiben alle anderen CSS selbst.

Wenn ja, dann könnten Sie es mit Flexbox-Raster viel besser machen.

Das Flexbox Grid ist, wie der Name schon sagt, ein Rastersystem, das auf den Flexbox-Eigenschaften von CSS basiert. Anders als bei der CSS-Technik wird die gesamte Komplexität jedoch schön abstrahiert, so dass Sie sich nur darauf konzentrieren müssen, die Elemente so zu platzieren, wie Sie es möchten.

Das Beste daran ist, dass der gesamte Code und die Klassennamen dem entsprechen, was Sie in Bootstrap 4 brauchen, d.h. der Wechsel zwischen diesen beiden Tools erfordert keine mentale Reibung. Hier sehen Sie zum Beispiel, wie der Code für das "space around" im Flexbox-Grid aussieht:

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

Die verkleinerte CSS-Datei für dieses Rastersystem ist nur 10,7 KB groß und erspart Ihnen mehrere hundert KB bei der endgültigen Downloadgröße. Heutzutage ist das Flexbox-Grid mein Favorit, da ich nicht mit Bootstrap kämpfen möchte, um es vollständig anzupassen. Ich beginne gerne mit Vanilla-Elementen und gestalte sie selbst, wobei ich das Flexbox-Grid überall dort verwende, wo ich es brauche.

Lernen Sie Flexbox hier, online.

PureCSS

Wäre es nicht schön, wenn Bootstrap in Module aufgeteilt wäre und Sie nur das Modul importieren könnten, das Sie benötigen?

Nonne, PureCSS hat genau das getan - es ist eine Reihe von Modulen, die verschiedene Funktionsbereiche einer Website abdecken. Sie können wählen, ob Sie eines oder alle Module herunterladen möchten, wobei die Downloadgröße 3,7 KB nicht überschreitet!

Ja, Sie haben richtig gelesen.

Alle Module sind zusammen 3,7 KB groß, auch wenn sie einzeln mehr ausmachen. Das Grid-Modul ist nur 0,8 KB groß, während das Base-Modul 1,0 KB groß ist. Das Team, das hinter PureCSS steht, sagt, dass es vollständig mit Blick auf mobile Geräte entwickelt wurde und daher jede CSS-Zeile sorgfältig auf Effizienz geprüft wurde, bevor sie aufgenommen wurde.

Nehmen wir auch an, Sie benötigen nur das Raster- und das Formularmodul. Laden Sie einfach diese beiden (zusammen mit dem Base-Modul) herunter, und schon haben Sie weniger als 3,4 KB! Sie müssen das CSS der Module Buttons, Tables und Menus nicht einbinden, wenn Sie es nicht verwenden.

PureCSS hat allerdings seine Klassen und der resultierende Code ahmt nicht das Bootstrap nach, an das Sie vielleicht gewöhnt sind:

<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 feststellen, dass es kein 12-spaltiges Raster mehr gibt. PureCSS hat sein eigenes Rastersystem, das angibt, wie viel Breite eine Spalte haben soll. Das bedeutet pure-u-lg-1-4, dass dieses Element 1/4 oder 25% der verfügbaren Breite auf großen Bildschirmen einnehmen sollte. Breiten als Vielfache von 1/5 sind ebenfalls möglich.

Alles in allem ist PureCSS ein befreiendes und erstaunliches CSS-Tool(Rahmenwerk?), aus dem Sie je nach Bedarf auswählen können. Allerdings erfordert es eine gewisse Einarbeitung und eine Lernkurve, da Sie eine neue (etwas andere) Vorgehensweise erlernen müssen.

PureCSS verfügt außerdem über eigene Klassen und ein Standard-Styling, so dass es sich in dieser Hinsicht nicht allzu sehr von Bootstrap unterscheidet.

Zimit

Das Zimit-Framework ist so etwas wie ein Außenseiter in dieser Liste. Ja, es ist ein Framework für die Erstellung von Benutzeroberflächen, aber es ist auf bestimmte Arten von Benutzeroberflächen ausgerichtet: Mockups.

Es gibt Zeiten, in denen Sie das Frontend entwickeln müssen, um die Funktionsweise des Produkts zu zeigen. Ideal wäre es natürlich, wenn Sie einen UI-Designer/Entwickler hinzuziehen und die Mockups mit einem der fortschrittlichen Wireframing-Tools (Moqups, Blasmic usw.) erstellen.

Die Seiten wären pixelgenau, das Farbschema elegant und gut gewählt, und die Seiten wären offen für Beteiligung, Bewertungen, Kommentare usw.

Aber das wirkliche Leben ist nicht ideal, und oft sind Sie der einzige Mann im Job und müssen alle Hüte tragen und die Arbeit erledigen. In solchen Fällen brauchen Sie ein Framework, das:

• Ihnen die Möglichkeit gibt, in HTML/CSS zu programmieren
• Leichtgewichtig ist
• Über eine umfangreiche Sammlung grundlegender Komponenten verfügt
• Eine anständige und konsistente Stilsprache hat
• Wenn möglich, ähnelt der "graue" Ton des Wireframe-Designs
• Ist leicht zu erlernen
• Verfügt über einen integrierten CSS-Präprozessor

Zimit erfüllt alle diese Kriterien. Es ist nur 84 KB groß und bietet eine breite Palette von Komponenten zur Auswahl. Hier sind einige Beispiele, die mir besonders gut gefallen haben, da es sehr zeitaufwändig ist, sie selbst zu kodieren.

Baumansicht

Brotkrümel

Registerkarten

Es gibt noch viele weitere Leckerbissen zu entdecken. Sehen Sie sie sich an hier an.

Schauen wir uns an, wie der Code aussieht. So verwenden Sie das Rastersystem in Zimit:

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

Das "c" steht hier für "column", außerdem bedeutet "c4" eine Spalte, die sich über vier Einheiten erstreckt (das Raster hat die Größe 12, genau wie das von Bootstrap). Sehr ähnlich wie Bootstrap und sehr intuitiv, wie ich finde.

Alles in allem ist Zimit ein komplettes und einfaches Framework für die Entwicklung von UI-Prototypen, die reaktionsfähig sind und schnell gut aussehen. Es ist besser als Bootstrap (wenn es um Prototyping geht), denn Bootstrap ist ein viel größerer Download und das resultierende Design ist, nun ja, schäbig.

Rückenwind

Rückenwind CSS erstellt Utility-Klassen anstelle von vordefinierten Komponentenstilen.

Dieses Framework ermöglicht es Entwicklern, Utility-Klassen zu verwenden, um Schatten, Typografie, Layout, Abstände und mehr zu steuern und so benutzerdefinierte Komponentendesigns auf HTML-Dateien zu erstellen, ohne Code zu schreiben.

Sie können ein einfaches Formular erstellen, mit dem sich Benutzer wie folgt anmelden können;

<div>

<form class="m-4 flex" action="">

<input class="rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" placeholder="E-Mail Adresse"/>

<button class="px-8 rounded-r-lg bg-green-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Abonnement</button>

<input type="hidden" name="trp-form-language" value="de"/></form>

</div&gt>

Sie können verschiedene Dinge wie die Textfarbe, die Hintergrundfarbe und die Größe des Rahmens an Ihre Bedürfnisse anpassen.

Warum Rückenwind CSS?

• Geringe Spezifität: Die Selektoren von Tailwind sind weniger spezifisch, so dass es weniger wahrscheinlich ist, dass sie andere Stile außer Kraft setzen oder mit ihnen in Konflikt geraten. Sie können auch weniger Code schreiben, wenn Sie die Utility-Klassen von Tailwind verwenden, und trotzdem wartbaren Code produzieren.
• Eigenwillig und flexibel: Tailwind ist so konzipiert, dass es ein Gleichgewicht zwischen einem anpassbaren und einem flexiblen Rahmen schafft. Dieses Framework empfiehlt die Verwendung einer einheitlichen Farbpalette, Abstandsskala und Typografie. Dennoch können Sie einige Standardeinstellungen an Ihre Bedürfnisse anpassen.
• Just-In-Time (JIT) verbessert die Erstellungszeit: Die JIT-Funktion bietet eine effiziente und schnellere Möglichkeit, den endgültigen CSS-Code zu generieren. Mit dieser Funktion generiert Tailwind nur Stile, die in Ihrem HTML-Code verwendet werden. Im Grunde genommen sendet Ihr Browser jedes Mal, wenn Sie eine Webseite laden, eine Anfrage an den JIT-Server, der einen optimierten CSS-Code für diese spezielle Datei generiert und an den Browser zurücksendet.

Tailwind CSS eignet sich, wenn Sie nach einem Framework mit weniger Spezifität suchen, individuelle Designs erstellen und dennoch Flexibilität genießen möchten.

Bulma

Bulma ist ein Open-Source UI-Framework, das auf Flexbox basiert. Das Framework verfügt über eine Vielzahl gebrauchsfertiger Frontend-Komponenten, die Sie kombinieren können, um visuell ansprechende und reaktionsfähige Oberflächen zu erstellen.

Die einfache Konfiguration ist einer der Gründe, warum Bulma bei UI-Entwicklern immer beliebter wird.

Um zu demonstrieren, wie es funktioniert, werden wir mit diesem Code mehrere Registerkarten erstellen;

<div class="tabs">

 <ul>

 <li class="is-active"><a>Bilder</a></li>

 <li><a>Musik</a></li>

 <li><a>Videos</a></li>

 <li><a>Dokumente</a></li>

 </ul>

</div&gt>

Die gerenderte Seite wird wie folgt aussehen;

Sie können die Registerkarten nach Belieben anpassen. Sie können zum Beispiel die aktiven Links in inaktive ändern, die Registerkarten zentrieren, den Text auf den Registerkarten ändern und vieles mehr.

Warum Bulma?

• Bulma verfügt über ein 12-spaltiges Rastersystem, mit dem Sie Ihre Seite in gleich breite Spalten unterteilen können. Das Schöne daran ist, dass sich diese Raster automatisch an die Bildschirmgröße anpassen.
• Wenn Sie Ihre Anwendung anpassen möchten, ist Bulma perfekt, denn es wird mit einigen Voreinstellungen geliefert.
• Dieses Framework bietet außerdem viel Flexibilität, da es auf Flexbox basiert.
• Bulma ist leichtgewichtig, da es nur minimales JavaScript verwendet, was zu kleineren Anwendungen führt.

Bulma eignet sich für Entwickler, die ein UI-Framework suchen, das einfach und dennoch leistungsstark ist. Der moderne Touch der Bulma-Komponenten kommt Designern entgegen, die keine generischen und veralteten Bootstrap-Designs verwenden möchten.

UIkit

UIkit ist ein leichtgewichtiges und modulares Framework für die Entwicklung leistungsstarker Webschnittstellen. Sie können dieses Framework mit CSS, Less und Sass verwenden. Es ist die ideale Bootstrap-Alternative, wenn Sie eine Plattform mit soliden HTML-, CSS- und JavaScript-Komponenten wünschen.

Um UIkit in Ihrem Code zu verwenden, fügen Sie den CDN-Link in den <head>-Abschnitt ein. Sie können auch den Quellcode von GitHub kompilieren.

Sobald Sie mit der Installation fertig sind, können Sie mit der Verwendung verschiedener Komponenten beginnen. Sie können zum Beispiel eine uk-button Komponente wie folgt hinzufügen;

<button className="uk-button uk-button-primary">Mein Button</button&gt

Warum UIkit

• Modulare Architektur: Die Komponenten von UIkit sind autark. So können Sie nur das in Ihre Anwendung einbauen, was Sie benötigen. Ein solcher Ansatz reduziert die Größe Ihrer JavaScript- und CSS-Dateien.
• Eingebaute JavaScript-Plugins: Sie können die Funktionalität von UIkit durch seine JavaScript-Plugins erweitern, wie z.B. Tabs, Modals und Slider.
• Anpassungen: Die Verfügbarkeit von Sass-Variablen und Mixins bietet mehr Raum für Anpassungen. So können Sie einzigartige Designs entwerfen, die den Anforderungen Ihrer Anwendung entsprechen.
• UIkit-Autovervollständigungstools für Ihren Editor: Sie können UIkit-Plugins oder Codeschnipsel zu Ihrem bevorzugten Code-Editor hinzufügen, z.B. Visual Studio-Code, Sublime Text 3 oder Atomund erhalten so einen Helfer bei der Generierung von UIkit-Klassen und -Auszeichnungen.

UIkit ist die perfekte Option für Entwickler, die ein modernes und klares Design suchen. UIkit Autovervollständigung für Ihren Editor

HTML-KickStart

Bei den meisten Projekten, die Sie entwickeln, ist Geschwindigkeit entscheidend. Die größte Hürde für die Geschwindigkeit bei der Webentwicklung ist der Front-End-Teil, und der größte "Verzögerer" bei der Front-End-Entwicklung ist die Notwendigkeit, elegant aussehende, interaktive Komponenten zu codieren.

Da es viele Möglichkeiten gibt, wie sich eine Komponente verhalten kann, und viele Bildschirmgrößen zu verwalten sind, kann die Programmierung und Verwaltung von Komponenten zu einem Alptraum für den Entwickler werden.

HTML-KickStart bietet eine Alternative.

Einfach ausgedrückt: Es ist eine Sammlung von wirklich eleganten Komponenten, die Sie einfach in Ihre Projekte einfügen und die Entwicklungszeit drastisch verkürzen können. Hier sind einige schöne Komponenten, die ich gefunden habe:

Auswahlliste

Schaltflächen

Registerkarten (zentriert und mit Symbolen)

Materialisieren

Wenn Sie Bootstrap mögen, weil es eine fertige Lösung für alle gängigen Webdesign-Probleme bietet, Sie aber ein Fan des Material-Design-Stils sind, sollten Sie Materialisieren ausprobieren.

Materialize ist größtenteils genau wie Bootstrap - 12-Punkt-Rastersystem, Offsets und bekannte Komponenten wie Formulare, Karten usw. Es hat jedoch einige Vorzüge, die für viele interessant sein können.

Drücken/Ziehen

Die Push/Pull-Funktion von Materialize CSS ermöglicht es Ihnen, Spalten neu anzuordnen. Dies erinnert an den neuen CSS Grid-Standard, bei dem sich das Layout von der Reihenfolge der Elemente unterscheidet.

<div class="row">
 <div class="col s7 push-s5"><span class="flow-text">Dieses div ist 7 Spalten breit und wird um 5 Spalten nach rechts verschoben.</span></div>
 <div class="col s5 pull-s7"><span class="flow-text">5 Spalten breit und um 7 Spalten nach links verschoben.</span></div>
</div>

Dies führt zu folgendem Ergebnis:

Sie werden bemerken, dass die Spalten ihre Plätze getauscht haben, was im traditionellen Bootstrap-basierten CSS vielleicht nicht möglich ist.

JavaScript-Leckerbissen

Es gibt eine ganze Reihe von JavaScript-Funktionen und -Effekten, die mit Materialize geliefert werden. Tooltips, Toasts (Android-ähnliche, kurzlebige Benachrichtigungen), Parallex, Pushpin usw. sind nur einige von ihnen.

Ein wirklich erstaunlicher Effekt, der mir gefallen hat, ist FeatureDiscovery, mit dem Sie ein Element auf der Seite bei einem bestimmten Ereignis (z.B. beim Drücken einer Taste) hervorheben können, um die Aufmerksamkeit des Benutzers auf dieses Element zu lenken. Es ist schwer, dies in Worten zu beschreiben, also besuchen Sie https://materializecss.com/feature-discovery.html, um zu sehen, was ich meine.

Alles in allem ist Materialize eine großartige Alternative zu Bootstrap oder für diejenigen, die ein vollwertiges Material CSS-Framework einsetzen möchten.

Fazit

Bootstrap ist ein Synonym für responsives Design. Es war Bootstrap, das den Begriff "mobile-first design" populär gemacht und gezeigt hat, wie es gemacht werden kann. Aber auch wenn Bootstrap in den meisten Fällen seine Aufgabe erfüllt, ist es nicht immer ausreichend, nur die Aufgabe zu erfüllen.

Wenn Sie das Gefühl haben, dass Bootstrap Sie einschränkt und dass Ihre Bedürfnisse speziell sind, wird Ihnen eine der hier aufgeführten Optionen helfen.

Sie können auch lesen, wie Sie Bootstrap zu Angular hinzufügen.