Top 10 der beliebtesten Open Source Web UI Kits

Mit Frontend-Benutzeroberflächen-Kits können Sie viel Entwicklungszeit sparen. Das beliebteste ist Bootstrap, obwohl zu viele homogene Sites auf diesem Framework basieren.

Um Ihnen Abwechslung zu bieten, habe ich eine Auswahl der besten neuesten Open Source-Benutzeroberflächen-Frameworks ausgewählt.

Alle diese haben ihre eigenen einzigartigen Stile und unterschiedliche Unterstützungsstufen für dynamische Komponenten. Wenn Sie diese Frameworks jedoch mit einigen JavaScript-Plugins koppeln, können Sie fast alles erstellen.

Sie könnten auch interessiert sein: 20 anpassbare und leichte CSS-Frameworks für einen schnellen Start.

1. UIKit

Der UIKit-Rahmen ist leicht, einfach anzupassen und einfach hinzuzufügen. Folgen Sie einem modularen Aufbau, in dem Sie Seitenelemente mit wiederverwendbaren Klassen erstellen.

Es ist perfekt für die Strukturierung einer neuen Seite, ohne dass Sie Ihr eigenes Raster codieren oder Ihre eigenen Schriftstapel rollen müssen. Dieser Rahmen enthält sogar ein einzigartiges Symbolset, das Sie mithilfe einer Webschriftart zu Ihrer Seite hinzufügen können.

Mit UIKit können Sie Sass oder Less zusammen mit jedem Paketmanager ausführen (normalerweise npm).

Mit einer riesigen Liste von Komponenten können Sie außerdem alles von Lastfeldern bis hin zu Brotkrumen und mehr integrieren.

2. Gründung

Die Bibliothek der Zurb Foundation wird TwitterBootstrap gerecht. Es scheint jedoch, dass Foundation aufgrund seiner weniger optimierten Benutzeroberfläche weniger Aufmerksamkeit erhält.

Mit Foundation haben Sie Zugriff auf benutzerdefinierte Schnittstellenelemente, Komponenten und ein Standardraster. Alles, was Sie zum Erstellen eines fantastischen Frontends benötigen, finden Sie in der Foundation-Bibliothek.

Weitere Informationen finden Sie auf der Präsentationsseite. Es gibt eine Reihe riesiger Foundation-Websites mit benutzerdefinierten Rastern, reaktionsschnellen Funktionen und im Grunde alles, was Sie für ein neues Webprojekt benötigen.

3. Milligramm

Einen minimalistischen Ansatz für die Frontend-Entwicklung finden Sie in Milligram. Diese Open-Source-CSS-Bibliothek ist sehr klein und bietet eine Menge wirklich einfacher Schnittstellenfunktionen.

Es funktioniert über Bower, Yarn und npm, sodass es in jeden Paketverwaltungs-Workflow passt.

Das einzige Problem ist, dass Milligram die Normalize-Bibliothek benötigt, sodass Sie sie Ihrer Seite hinzufügen müssen. Wenn Sie jedoch über ein CSS-Minimierungstool verfügen, können Sie die beiden Bibliotheken problemlos kombinieren und Ihre HTTP-Anforderungen reduzieren.

4. One-Nexus

Hier ist eine neuere Frontend-Bibliothek, die tatsächlich einige ziemlich verrückte Module bietet.

Das One-Nexus-Framework ist riesig. Unterstützt reaktionsschnelle Design- und Touch-Geräte, läuft auf Sass und arbeitet mit automatisierten Build-Tools. Ich denke jedoch, dass dies zunächst eines der komplexesten Frameworks ist.

Wenn Sie bereits mit Frameworks und der Befehlszeile vertraut sind, ist One-Nexus wirklich erstaunlich. Es hat so viele Module, dass Sie den Kopf drehen werden!

Es kann jedoch einige Zeit dauern, bis Sie sich an das Setup gewöhnt und Ihr ursprüngliches Layout perfekt eingerichtet haben.

5. Semantische Benutzeroberfläche

Wenn Sie nach einem getesteten Framework suchen, lesen Sie die semantische Benutzeroberfläche. Dies ist eine wunderschöne Frontend-Bibliothek in Version 2.2 mit unzähligen Funktionen.

Ich betrachte Semantic als den unbekannten Bootstrap für die Frontend-Entwicklung. Es ist nicht so beliebt bei Top-Codierern, hat aber die gleichen Vorteile wie Bootstrap.

Die semantische Bibliothek enthält Schaltflächen, Registerkarten, Dropdown-Menüs und alles, was Sie benötigen. Außerdem bietet es einfaches Debugging und jede Menge großartiger Themen, sodass Sie Ihr Design von Anfang an anpassen können.

6. Reines CSS

Ich habe Pure CSS bei einigen kleinen Projekten verwendet und es macht mir wirklich Spaß. Dies ist eines der besten Frameworks, da Sie Ihre Dateien so anpassen können, dass sie die Funktionen enthalten, die Sie benötigen.

Weitere Informationen finden Sie auf der Homepage, die Download-Links und einige Konfigurationshandbücher enthält.

Beachten Sie, dass sich die Ästhetik von Pure sehr minimalistisch anfühlt, aber nicht allzu einfach. Sie ahmen ein bisschen Bootstrap nach, zusammen mit einigen Tipps zum Design von Google-Material. Eine unterhaltsame Bibliothek für jedes persönliche und kommerzielle Projekt.

7. Ink Interface Kit

Mit dem Ink Interface Kit können Sie einige erstaunliche Seiten erstellen, die reagieren. Sie sehen einfach aus und folgen einem sehr einfachen Codeformat, aber das ist normalerweise das, was Sie in einem Frontend-Framework wollen.

Ink wird sogar mit einer eigenen JS-Bibliothek geliefert, die Sie auf Vanilla JS ausführen können. Es sind einige Anpassungen erforderlich, wenn Sie noch nie Tinte verwendet haben. Es ist jedoch eine großartige Bibliothek, die in der Syntax mit jQuery vergleichbar ist.

Dies läuft in Sass, arbeitet mit semantischem HTML und fühlt sich wie ein großartiges Frontend-Framework an.

8. CSS-Vorarbeiten

Ich habe noch viel zu testen in GroundworkCSS, aber dies ist ein starker Reaktionsrahmen.

Derzeit in Version 2.x können Sie die gesamte Groundwork-Bibliothek in zwei Stilen herunterladen: Basic HTML / CSS / JS oder in einer Vorlage für Ruby on Rails.

Beide funktionieren gleich und bieten ein robustes Frontend-System zum Codieren verwendbarer Seiten.

Schauen Sie sich das Demo-Layout an, um eine Vorstellung davon zu bekommen, wie dies auf Ihrer Website aussehen wird.

9. Materialise.css

Seit Google seinen Wechsel zum Materialdesign angekündigt hat, ist es zu einer der größten Designsprachen für Benutzeroberflächen geworden. Und während es ursprünglich für Android erstellt wurde, gelangte es mit vielen Frameworks wie Materialise, die den Stil klonen, ins Web.

Das gesamte Framework läuft wie erwartet – vollständig reaktionsschnell, standardkonform und unterstützt benutzerdefinierte Resets für alle Browser.

Der einzige Unterschied besteht darin, dass die Standardelemente den Designstil des Materials übernehmen.

Und während dies wahrscheinlich mein Lieblingsrahmen für verfügbares Material ist, können Sie andere durchsuchen, um zu sehen, was Ihnen sonst noch auffällt.

10. Beenden

Wenn es um Leistung geht, können Sie die Qualität Ihres Codes nicht übersehen. Topcoat nimmt dies als Rahmen mit Blick auf die Leistung ernst.

Es ist vollständig anpassbar und super einfach mit einfach zu lesendem HTML und CSS anzupassen. Alle Änderungen, die Sie vornehmen, folgen einer klaren Struktur mit BEM-Namenskonventionen für CSS.

Der eigentliche Vorteil von Topcoat ist der Belastungstest und der Fokus auf Leistung. Wer ein benutzerdefiniertes Design benötigt, das schnell geladen werden kann, sollte nach Topcoat suchen.

11. Blütenblatt

Petal ist eines der neuesten CSS-Frameworks auf dem Markt. Auch hier ist es vollständig reaktionsschnell, 100% Open Source und kann jedes andere wichtige Framework auf dieser Liste unterstützen.

Aber es ist ziemlich klein und soll so bleiben. Es basiert auf dem Less CSS-Präprozessor und erfordert auch Normalize.

Letztendlich ist dies ein super kleines Framework, das weniger CSS-Entwickler ansprechen sollte. In den Online-Dokumenten finden Sie auch Codefragmente und Live-Beispiele für Seitenelemente.