Bootstrap gegen Foundation gegen Bulma gegen Semantic gegen UIkit

In den letzten Jahren haben sich die Surfgewohnheiten der Endbenutzer dahingehend weiterentwickelt, dass sie eine Vielzahl von Geräten umfassen. Responsive Webdesign ist daher eine Notwendigkeit für jede Website, die heute entwickelt wird. Das Erstellen eines reaktionsschnellen Designs von Grund auf für jedes Projekt kann jedoch zeitaufwändig sein. Eine großartige Lösung, die Ihnen das Leben erleichtert, ist die Verwendung eines CSS-Frameworks. Ein solches Framework kümmert sich für Sie um grundlegende Prinzipien des Responsive Design. In diesem Vergleich werfen wir einen Blick auf einige der besten CSS-Frameworks und finden heraus, welches das beste ist. Hier ist Bootstrap gegen Foundation gegen Bulma gegen Semantic gegen UIkit.


Dieser Beitrag führt Sie zur Auswahl des richtigen CSS-Frameworks für Ihr nächstes Projekt. Ich gehe davon aus, dass Sie über Grundkenntnisse in Front-End-Technologien und Prinzipien des Responsive Webdesign verfügen. Jedes CSS-Framework wird getestet, um verschiedene Aspekte von Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit abzudecken. Ich beschreibe die Ursprünge jedes Frameworks und die wichtigsten Funktionen. Ich gebe Ihnen auch eine Kurzanleitung für jedes Framework.

Bootstrap gegen Foundation gegen Bulma gegen Semantic gegen UIkit

Am Ende dieses Beitrags kennen Sie die wichtigsten Funktionen und Einschränkungen der einzelnen Frameworks und können besser ermitteln, welche davon Ihren Anforderungen am besten entspricht. Lass uns anfangen:

  • Bootstrap #
  • Stiftung #
  • Bulma #
  • Semantische #
  • UIkit #

Bootstrap (getbootstrap.com)

Bootstrap vs.

Bootstrap ist ein reaktionsschnelles CSS-Framework für Mobilgeräte, mit dem Websites schnell entwickelt werden können. Es ist das beliebteste CSS-Framework auf dieser Liste mit über 130.000 Sternen auf GitHub. Bootstrap enthält gebrauchsfertige Komponenten, die mit HTML, CSS und JavaScript entwickelt wurden.

Bootstrap wurde ursprünglich 2011 bei Twitter entwickelt, entwickelte sich aber schließlich zu einem unabhängigen Projekt. Die aktuelle stabile Version ist 4.3. Bootstrap 5, das sich derzeit in der Entwicklung befindet, wird die Verwendung von jQuery durch Vanilla JS ersetzen, die Unterstützung für veraltete Browser einstellen und die aktuelle Testplattform ändern.

Um Bootstrap zu verwenden, müssen Sie beim Erstellen einer neuen Webseite Folgendes tun:

  • Verwenden Sie den HTML5-Doctype
  • Erstellen Sie ein Meta-Tag für das Ansichtsfenster
  • Importieren Sie das Bootstrap-CSS in Ihr Head-Tag
  • Importieren Sie Skripte in der Reihenfolge jQuery, Popper.js und dann bootstrap.min.js, um die JavaScript-Funktionen von Bootstrap zu verwenden

Hier ist eine Starter-Vorlage.




In diesem Tutorial verwenden wir die von CDN gehosteten Versionen von Ressourcen (CSS- und JS-Dateien) für diese Frameworks. Hier ist ein schneller Start leiten auf Bootstrap.

Zusätzlich zu einem robusten Mobile-First-Ansatz gibt es eine erhebliche Unterstützung durch die Community, die sich auf die Reife des Frameworks bezieht. Darüber hinaus unterhält Bootstrap eine Liste von zugelassene Frameworks und Kits Zur Auswahl bieten Entwickler von Drittanbietern auch Kits und Pakete für Bootstrap an, die ebenso einfach in Ihre Projekte integriert werden können. Hier ist unsere Auswahl an kostenlosen UI-Kits für Bootstrap. Touchscreens werden nicht nur zuerst mobil, sondern auch unterstützt. Da Bootstrap ein ausgereiftes Projekt ist, unterstützt es viele Eingabehilfen.

Der größte Nachteil von Bootstrap ist die Erhöhung des Seitengewichts. Während einige hundert Kilobyte in einer Welt mit einer durchschnittlichen Seitengröße von etwa 2 MB möglicherweise nicht von Bedeutung sind, können Entwickler betroffen sein, die die höchste Effizienz anstreben. Die Abhängigkeit von jQuery ist besorgniserregend, obwohl es ermutigend ist zu wissen, dass das Entfernen von jQuery Teil der Roadmap für Bootstrap 5 ist.

�� Vorteile:

  • Mobile First, Responsive Web Design Framework
  • Gute Community-Unterstützung und Dokumentation

�� Nachteile:

  • Große Abhängigkeitsgröße (~ 300 KB)
  • Abhängigkeit von jQuery, damit einige Komponenten funktionieren

Bootstrap sollte Ihre erste Wahl sein, wenn Sie nach einer stabilen Plattform mit einer guten Support-Basis suchen. Es ist die richtige Wahl, wenn Sie nicht viel an den Standardkomponenten basteln möchten. Bootstrap ist perfekt für diejenigen, die Lösungen in einer agilen Umgebung schnell iterieren möchten.

Stiftung (Foundation.zurb.com)

Stiftung vs.

Foundation, das erstmals innerhalb eines Monats nach Bootstrap im Jahr 2011 veröffentlicht wurde, ist eine Klasse von Front-End-Frameworks nicht nur für Websites, sondern auch für Anwendungen und E-Mails! Lassen Sie uns sehen, wie sich Bootstrap vs Foundation stapeln!

Genau wie Bootstrap bei Twitter begann Foundation als internes Tool bei der Zurb Foundation und wurde schließlich als Framework veröffentlicht. Der Quellcode von Foundation ist Open Source, wobei der Schwerpunkt auf Mobile-First-Responsive-Designs liegt. Foundation verfügt über ein ähnliches Rastersystem wie Bootstrap mit 12 Spalten zur Auswahl. Darüber hinaus ist auch JavaScript optional!

Die allgemeinen Schritte zur Verwendung von Foundation auf Ihrer Website lauten wie folgt:

  • Laden Sie die Stiftungsressourcen
  • Verwenden Sie den HTML5-Doctype
  • Fügen Sie die Foundation CSS-Datei in das Head-Tag ein
  • Fügen Sie jQuery, what-input.js und Foundation-Skripte hinzu
  • Rufen Sie kurz vor dem Beenden des Body-Tags die Funktion fundamental () auf, um die Foundation-Eigenschaften an verschiedene DOM-Elemente anzuhängen

Hier ist eine Schnellstartvorlage:

$ (document) .foundation ();

Sie können herunterladen ein Custom Build des Foundation Frameworks, wenn dies Ihren Anforderungen entspricht.

Wenn wir versuchen, Bootstrap mit Foundation zu vergleichen, tauchen einige Dinge auf. Bootstrap bietet mehr Unterstützung von der Community, ist etwas einfacher zu bearbeiten und bietet Ihnen eine große Auswahl an Themen, aus denen Sie auswählen können, wenn Sie angestarrt werden. Foundation hingegen bietet Ihnen mehr Kontrolle und Freiheit über Ihre Komponenten, ohne dass Sie Klassen zu DOM-Elementen hinzufügen müssen, da Eigenschaften mit Komponenten verknüpft sind. Da sich Foundation seit einigen Jahren in der Entwicklung befindet, ist dies auch der Fall bietet viele Eingabehilfen.

�� Vorteile:

  • Mobile First, Responsive Web Design Framework
  • Bietet Unterstützung für Anwendungen und E-Mails

�� Nachteile:

  • Große Abhängigkeitsgröße wie Bootstrap
  • Riesige Anzahl von Funktionen, die Anfänger überwältigen können

Die Funktionalität zwischen Bootstrap und Foundation ändert sich nicht wesentlich, und Sie werden bei der Auswahl einer der beiden Plattformen nicht viel verlieren. Davon abgesehen sollten Sie sich wahrscheinlich für Foundation entscheiden, wenn Sie mehr Kontrolle über Ihr Projekt haben möchten.

Diese Artikel könnten Sie auch interessieren:

  • Beste Angular Admin Dashboard-Vorlagen

Bulma (bulma.io)

bulma vs.

Bulma ist ein Open Source, leichtes CSS-Framework, das auf Flexbox basiert.

Bulma ist zwar nicht ganz auf dem Niveau von Bootstrap, aber ein ziemlich beliebtes Projekt auf GitHub mit über 35.000 Sternen.

Bulma wurde für ein Mobile-First-Responsive-Framework mit einem zusätzlichen Fokus auf Modularität entwickelt.

Um Bulma in Ihrem Projekt verwenden zu können, müssen Sie die folgenden Schritte ausführen:

  • Fügen Sie den HTML5-Doctype hinzu
  • Fügen Sie ein Meta-Tag für ein responsives Ansichtsfenster hinzu
  • Fügen Sie die Bulma-CSS-Datei in Ihr Head-Tag ein
  • [Optional] Fügen Sie das Fontawesome-Skript hinzu, um Symbole zu verwenden

Hier ist eine Vorlage:

Zurück zur Debatte über Bootstrap vs Foundation vs Bulma: Bulma hat eine sanftere Lernkurve. Ein wesentlicher Unterschied von Bulma in Bezug auf Bootstrap und Foundation ist der alleinige Fokus auf CSS ohne JavaScript-Elemente im Framework. Der Ausschluss von JavaScript macht das Framework auch leicht. In Bezug auf die Zugänglichkeit ist Bulma nur teilweise zugänglich, obwohl die Community regelmäßig Unterstützung hinzufügt.

�� Vorteile:

  • Leichtes, auf Flexbox basierendes Framework
  • Modulare Elemente ermöglichen Flexibilität

�� Nachteile:

  • Keine JavaScript-Elemente
  • Eingeschränkte Unterstützung für die Barrierefreiheit

Als Entwickler sollten Sie sich für Bulma entscheiden, wenn Sie ein leichtes Framework verwenden möchten, mit dem Sie reaktionsschnelle Elemente für das Web erstellen können. Das Framework wird erheblich unterstützt, um Ihnen zu helfen, wenn Sie im Prozess stecken bleiben.

Semantik (semantic-ui.com)

semantisch vs.

Semantic ist ein CSS-Framework mit dem Ziel, intuitive Benutzeroberflächen zu erstellen.

Dieses Framework verwendet Klassennamen, die offensichtlich sind, um den Lernprozess zu vereinfachen. Klassen in Semantik sind von der englischen Sprache inspiriert, um logische Konzepte mit Klassennamen zu verknüpfen.

Um semantische Komponenten in Ihrem Projekt zu verwenden, müssen Sie die folgenden Schritte ausführen:

  • Fügen Sie den HTML5-Doctype ein
  • Laden Sie die semantische CSS-Datei
  • Schließen Sie jQuery ein, bevor Sie JavaScript-Elemente aufrufen
  • Fügen Sie das Skript von Semantic hinzu

Hier ist eine Vorlage:

Wenn Sie Semantic mit Bootstrap vs Foundation und den anderen vergleichen, werden Sie feststellen, dass Semantic trotz intuitiver Namenskonventionen hinsichtlich der Komplexität des Lernens zu kurz kommt. Die Dokumentation ist umfangreich, aber es dauert einige Zeit, bis man sich daran gewöhnt hat. Die Integration in JavaScript-Frameworks wie Angular und React ist gut, was es ideal für die Verwendung in einer Anwendung macht, in der diese Frameworks verwendet werden.

�� Vorteile:

  • Intuitive Klassennamen
  • Integration in JavaScript-Frameworks

�� Nachteile:

  • Kann den Bedarf an großen Projekten nicht erfüllen
  • Begrenzte Unterstützung durch die Community

Semantik ist das Framework, das eine relativ einfachere Lernkurve aufweist und auch JavaScript-Frameworks unterstützt. Wenn Ihre Anforderungen die Verwendung von JavaScript beinhalten, sollten Sie auf jeden Fall die Verwendung dieses Frameworks in Ihrem nächsten Projekt in Betracht ziehen.

UIkit (getuikit.com)

uikit vs.

UIkit ist ein modernes, leichtes Framework mit einem großen Schwerpunkt auf Modularität bei der Erstellung von Webschnittstellen.

Es ist ein relativ neues Open-Source-Framework mit ca. 15.000 Sternen auf GitHub. Mit UIkit können Sie reaktionsschnelle Designs erstellen und die kontinuierliche Bereitstellung auf BrowserStack automatisieren.

Um UIkit-Komponenten in Ihrem Projekt zu verwenden, müssen Sie die folgenden Schritte ausführen:

  • Fügen Sie den HTML5-Doctype ein
  • Laden Sie die UIkit-CSS-Datei
  • Fügen Sie UIkit-Skripte für Funktionen und Symbole hinzu

Hier ist eine Vorlage:

UIkit bietet eine erhebliche Anzahl von Funktionen, wenn wir es mit Bootstrap vs Foundation vs Bulma vergleichen. Trotz JavaScript-Elementen ist UIkit nicht von jQuery abhängig, wodurch die Nutzlast für den Endbenutzer kleiner wird. In Bezug auf schnell iterierende Versionen Ihrer Webanwendungen in einer agilen Entwicklungsumgebung steht es diesen Frameworks definitiv gleich.

�� Vorteile:

  • Konzentrieren Sie sich auf Modularität und erleichtern Sie die Arbeit mit ihnen
  • Elemente sind anpassbar, was zu Flexibilität führt

�� Nachteile:

  • Begrenzte Dokumentation und Community-Unterstützung

Während UIkit Ihnen viel Freiheit bei der Kontrolle über Struktur und Funktionen bietet, ist es ziemlich neu, was zu eingeschränkter Online-Unterstützung führt, wenn Sie Probleme mit dem Framework haben. Daher sollten Sie dieses Framework in einem Projekt nur berücksichtigen, wenn Ihre Front-End-Programmierkenntnisse ausreichend fortgeschritten sind.

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit: letzte Gedanken

Um zusammenzufassen, worüber wir in diesem Vergleich der Top-CSS-Frameworks gesprochen haben:

  • Wenn Sie eine problemlose Lösung mit viel Unterstützung suchen, entscheiden Sie sich für Bootstrap
  • Probieren Sie Foundation aus, um mehr Freiheit für Ihre Komponenten zu erhalten
  • Probieren Sie Bulma oder UIkit aus, um eine leichte Ergänzung Ihres Projekts zu gewährleisten
  • Wenn Ihre Webanwendung umfangreiche JavaScript-Frameworks verwendet, sollten Sie sich für Semantic entscheiden

Welches CSS-Framework verwenden Sie im Jahr 2020? Lass es uns in den Kommentaren unten wissen!

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout, Präsentation und Bearbeitung von Karol K..

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