Top 5 Bootstrap-Alternativen

Bootstrap ist überall, aber nicht immer das richtige Werkzeug für den Job. Hier sind einige großartige Alternativen!


Wenn Sie heutzutage den Quellcode des Frontends einer Website nach dem Zufallsprinzip überprüfen, finden Sie möglicherweise Bootstrap darunter. Wir alle haben uns so an Konzepte wie Container-Fluid, Row, Col-Sm-6 usw. gewöhnt, dass es kaum vorstellbar ist, dass ein anderer Stil der Front-End-Entwicklung überhaupt möglich ist. Wenn wir also das nächste Projekt erstellen müssen, greifen wir unbewusst nach Bootstrap. Aufgrund der Beliebtheit eignet sich Bootstrap jedoch nicht für alle Projekte und Anforderungen.

In der Tat, für wirklich schlanke Frontends, laden Sie alle Bootstrap CSS und JS kann zu starkem Aufblähen führen.

Dieser Artikel hat zwei Zwecke:

  1. Stellen Sie nicht Bootstrap-ähnliche Live-Alternativen zu Bootstrap bereit
  2. Erklären Sie, warum Sie diese Alternativen möglicherweise über Bootstrap in Betracht ziehen möchten

Ich denke, der Erklärungsteil ist wirklich wichtig, da die Leute in den meisten Fällen gar nicht bemerken, dass sie ein Problem haben oder dass sie ihre Arbeit durch das Aufnehmen von Bootstrap erschweren. Beachten Sie zum Schluss, dass dies keinesfalls ein Anti-Bootstrap-Beitrag ist. Ich liebe Bootstrap 4 und benutze es, wann immer ich kann. Aber dann bin ich ein einzelner Entwickler, der darüber nachdenken muss, die beliebteste Lösung zu verwenden. Außerdem bin ich per se kein UI-Entwickler, sodass ich mir beim Aufbau meiner Frontends keine Sorgen um zu viele Dinge mache.

Schauen wir uns dazu an, welche Alternativen wir haben.

Flexbox Grid

Denken Sie eine Minute darüber nach: Der Hauptgrund, warum Sie Bootstrap verwendet haben und es immer noch verwenden, ist das Rastersystem. Sicher, es war etwas gewöhnungsbedürftig, sich an die Klassen row, col-md-6 usw. zu gewöhnen, aber jetzt ist es selbstverständlich, sich ein Layout in Form von Zeilen, Spalten, Offsets usw. Zu überlegen.

Und wenn Sie ehrlich zu sich selbst sind, werden Sie feststellen, dass alles andere in Bootstrap eine mühsame Aufgabe ist. Es gibt unzählige Klassen, an die Sie sich erinnern müssen, egal ob Sie Formulare, Navigation, Schaltflächen, Tabellen oder etwas anderes ausführen. Wenn Sie wie ich sind, haben Sie sich immer noch nicht an alle Klassen und deren Funktionsweise gewöhnt. Oft verwenden Sie Bootstrap nur für das Raster und schreiben alle anderen CSS selbst.

Wenn ja, könnten Sie viel besser damit umgehen Flexbox Grid.

Das Flexbox-Raster ist, wie der Name schon sagt, ein Rastersystem, das auf dem CSS basiert Flexbox Eigenschaften. Im Gegensatz zur CSS-Technik ist die gesamte Komplexität jedoch gut abstrahiert, sodass Sie sich nur darauf konzentrieren, Elemente so zu platzieren, wie Sie es möchten. Das Beste daran ist, dass alle Code- und Klassennamen das nachahmen, was Sie in Bootstrap 4 möchten. Das bedeutet, dass das Umschalten zwischen diesen beiden Tools keine mentale Reibung erfordert. So sieht beispielsweise der Code für das “Leerzeichen” im Flexbox-Raster aus:

um

um

um

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

Lernen Flexbox hier online.

PureCSS

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

Gut, PureCSS hat genau das getan – es handelt sich um eine Reihe von Modulen, die verschiedene Funktionsbereiche einer Website abdecken. Sie können wählen, ob Sie einen oder alle herunterladen möchten. Die Downloadgröße darf jedoch 3,7 KB nicht überschreiten!

Ja, das hast du richtig gelesen.

Alle Module, die zusammen gebündelt und gezippt werden, sind 3,7 KB groß, obwohl sie einzeln mehr ausmachen. Das Grid-Modul ist nur 0,8 KB groß, während das Basismodul 1,0 KB groß ist. Das Team hinter PureCSS gibt an, dass es ausschließlich für mobile Geräte entwickelt wurde. Daher wurde jede CSS-Linie sorgfältig auf Effizienz geprüft, bevor sie aufgenommen wurde.

Nehmen wir also an, Sie benötigen nur das Raster- und Formularmodul. Laden Sie einfach diese beiden herunter (zusammen mit dem Basismodul), und Sie sind in weniger als 3,4 KB fertig! Sie müssen das CSS aus den Modulen Schaltflächen, Tabellen und Menüs nicht einschließen, wenn Sie sie nicht verwenden möchten.

PureCSS hat jedoch seine Klassen, und der resultierende Code ahmt nicht den Bootstrap nach, an den Sie möglicherweise sehr gewöhnt sind:

Lorem Ipsum

Dolor Sit Amet

Proident Laborum

Praesent consectetur

Sie werden feststellen, dass es kein 12-Spalten-Raster mehr gibt. PureCSS verfügt über ein Rastersystem, das angibt, wie breit eine Spalte sein soll. Pure-u-lg-1-4 bedeutet also, 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 verfügbar.

Alles in allem ist PureCSS ein befreiendes und erstaunliches CSS-Tool (Framework?), Aus dem Sie bei Bedarf auswählen können. Das heißt, es bringt eine Menge Buy-In und Lernkurve mit sich, da Sie eine neue (etwas andere) Art und Weise lernen müssen, Dinge zu tun.

PureCSS verfügt auch über eigene Klassen und Standardstile, sodass es sich nicht allzu sehr von Bootstrap unterscheidet.

Zimit

Das Zimit Framework ist eine Art Odd-Man-Out in dieser Liste. Ja, es ist ein Framework zum Erstellen von Benutzeroberflächen, aber es zielt auf bestimmte Arten von Benutzeroberflächen ab: Modelle.

Es gibt Zeiten, in denen Sie das Front-End entwickeln müssen, um die Funktionsweise des Produkts zu demonstrieren. Der ideale Weg, dies zu tun, wäre natürlich, einen UI-Designer / -Entwickler einzubeziehen und die Modelle auf einem der fortschrittlichen Wireframing-Tools (Moqups, Blasmic usw.) zu erstellen. Die Seiten wären pixelgenau, das Farbschema elegant und gut ausgewählt, und die Seiten wären offen für Teilnahme, Bewertungen, Kommentare usw..

Aber das wirkliche Leben ist nicht ideal, und oft bist du der einzige Mann bei der Arbeit und musst alle Hüte tragen und die Arbeit erledigen. Zu diesen Zeiten möchten Sie einen Rahmen, der:

  • Ermöglicht das Codieren in HTML / CSS
  • Ist leicht
  • Hat eine umfangreiche Sammlung grundlegender Komponenten
  • Hat eine anständige und konsistente Stilsprache
  • Wenn möglich, ähnelt es dem „grauen“ Ton des Drahtgitterdesigns
  • Ist leicht zu lernen
  • Hat einige CSS-Präprozessor integriert

Zimit aktiviert alle diese Kontrollkästchen. Es ist nur 84 KB groß und bietet eine große Auswahl an Komponenten. Hier sind einige Beispiele, die ich sehr ansprechend fand, da das Codieren selbst viel Zeit in Anspruch nimmt.

Baumsicht

Brotkrume

Tabs

Es gibt noch viele weitere Leckereien zu entdecken. Schau sie dir an Hier.

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

4 Spalten
4 Spalten

4 Spalten
4 Spalten

Das “c” steht hier für “Spalte”, also bedeutet “c4” eine Spalte, die vier Einheiten umfasst (das Raster hat eine Größe von 12, genau wie das von Bootstrap). Sehr ähnlich zu Bootstrap und meiner Meinung nach sehr intuitiv.

Alles in allem ist Zimit ein vollständiges und einfaches Framework für die Entwicklung von UI-Prototypen, die reaktionsschnell sind und schnell gut aussehen. Es ist besser als Bootstrap (wenn es um Prototyping geht), da Bootstrap ein viel größerer Download ist und das resultierende Design sehr schwierig ist.

HTML KickStart

Bei den meisten von Ihnen erstellten Projekten ist die Geschwindigkeit von entscheidender Bedeutung. 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 es viele Bildschirmgrößen zum Verwalten gibt, kann das Codieren und Verwalten von Komponenten für den Entwickler zu einem Albtraum werden.

HTML KickStart bietet eine Alternative.

Einfach ausgedrückt; Es handelt sich um eine Sammlung wirklich eleganter Komponenten, die Sie einfach in Ihre Projekte einfügen und die Entwicklungszeit drastisch verkürzen können. Hier sind einige nette Komponenten, die ich gefunden habe:

Dropdown-Liste

Tasten

Registerkarten (zentriert und mit Symbolen)

Materialisieren

Wenn Sie Bootstrap mögen, weil es eine vorgefertigte Lösung für alle gängigen Webdesignprobleme bietet, Sie aber ein Fan des Materialdesignstils sind, sollten Sie es ausprobieren Materialisieren.

Materialise ist meistens genau wie Bootstrap – 12-Punkt-Rastersystem, Offsets und bekannte Komponenten wie Formulare, Karten usw. Es gibt jedoch bestimmte Extras, die viele ansprechen können.

Drücken ziehen

Mit der Push / Pull-Funktion von Materialise CSS können Sie Spalten neu anordnen. Dies erinnert an den neuen CSS-Grid-Standard, bei dem sich das Layout von der Elementreihenfolge unterscheidet.

Dieses Div ist 7 Spalten breit und wird von 5 Spalten nach rechts geschoben.
5 Spalten breit, von 7 Spalten nach links gezogen.

Dies führt zu folgenden Ergebnissen:

Sie werden feststellen, dass die Spalten die Plätze gewechselt haben, was bei herkömmlichem Bootstrap-basiertem CSS möglicherweise nicht möglich ist.

JavaScript-Extras

Es gibt einige JavaScript-Funktionen und -Effekte, die mit Materialise geliefert werden. Tooltips, Toasts (Android-ähnliche kurzlebige Benachrichtigungen), Parallex, Pushpin usw. sind einige davon. Ein wirklich erstaunlicher Effekt, den ich mochte, ist FeatureDiscovery, mit dem Sie ein Element auf der Seite eines Ereignisses (z. B. Tastendruck) hervorheben können, um die Aufmerksamkeit des Benutzers auf dieses Element zu lenken. Es ist schwer, es vollständig in Worten zu beschreiben. Gehen Sie also zu https://materializecss.com/feature-discovery.html, um zu sehen, was ich meine.

Alles in allem ist Materialise eine großartige Alternative zu Bootstrap oder für diejenigen, die ein Material CSS-Framework mit vollem Funktionsumfang verwenden möchten.

Fazit

Bootstrap ist gleichbedeutend mit Responsive Design. Es war Bootstrap, das den Begriff „Mobile-First-Design“ populär machte und zeigte, wie es gemacht werden kann. Während Bootstrap die meiste Zeit die Arbeit erledigt, reicht es nicht immer aus, nur die Arbeit zu erledigen. Wenn Sie der Meinung sind, dass Bootstrap Sie einschränkt und Ihre Anforderungen besonders sind, hilft eine der hier aufgeführten Optionen. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map