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.