Die beliebtesten Web-Frontend-Frameworks

Als Front-End-Entwicklungsprogrammierer ist es sehr wichtig, den Umgang mit einem guten Web-Front-End-Framework zu erlernen. Ein gutes Web-Front-End-Framework wird Ihre Arbeitseffizienz erheblich steigern und Ihre Entwicklung effizienter machen glatt. In diesem Artikel stellen wir die Front-End-Entwicklungsframeworks vor, die im Jahr 2017 Ihre Aufmerksamkeit am meisten verdienen. Jedes Framework verfügt über einen einzigartigen Stil, der bei der Erstellung von Rasterlayouts, Schaltflächen, Formularen oder anderen Seitenelementen hilft. Ich hoffe, es hilft allen.

Bootstrap

Fast jeder Entwickler kennt das Entwicklungsframework von Twitter – Bootstrap. Es ist wahrscheinlich eines der ältesten Front-End-UI-Frameworks, wobei die früheste Version im Jahr 2011 veröffentlicht wurde. Es enthält einen vollständigen Satz von SASS-Klassenbibliotheken, die dabei helfen können, UI- und JS-Komponenten anzupassen und verschiedene Navigations-, Fortschritts-, Schaltflächen-, Breadcrumb-Navigations- usw. bequem zu entwickeln.

Die neueste Version, Bootstrap 4, wird derzeit entwickelt Im Entwicklungsprozess soll es bald veröffentlicht werden. Für Bootstrap3 wird dies eine große Änderung sein.

Foundation6

Die Foundation-Klassenbibliothek gibt es schon seit einigen Jahren, und vor Kurzem wird es ein großes Versionsupdate geben, und die Klassenbibliothek ist in zwei Hauptklassen aufgeteilt Bibliotheken: Klassenbibliothek für Website-Entwicklung und Klassenbibliothek für E-Mail-Entwicklung

Es bietet ein minimales UI-Framework, das zur Entwicklung jedes Layouttyps und zur vollständigen Steuerung der zugehörigen Komponenten verschiedener Seiten verwendet werden kann, wie z. B. reaktionsfähige Menüs, Eingabefelder, Registerkarten usw.

Es bietet auch eine Website, auf der Benutzeroberflächenkomponenten einfach durchsucht werden können. Und unterstützt gängige Webentwicklungstools wie Grunt/Gulp, npm und SASS/compass usw.

Petal

Das neueste CSS-bezogene Webentwicklungs-Framework, basierend auf auf WENIGER.

Diese Klassenbibliothek ist sehr einfach, derzeit Version 0.6. Aber es ist ein Rahmen, der auf die tatsächliche Entwicklung angewendet werden kann. Verfügen Sie über eine sehr klare Dokumentation, zum Beispiel zu Rastern, Schriftarten, Schaltflächen, Eingaben usw.

Petals Entwicklungsteam ist nicht sehr groß, hat aber einen sehr hohen Output. Ich glaube, dass es Mitte 2017 ein bekanntes Framework werden wird

Pure CSS

Pure CSS ist modular aufgebaut. Es gibt viele kleine Klassenbibliotheken für verschiedene Komponenten, wie Formulare, Raster, Diagramme, Navigationsschaltflächen usw.

Sie können frei wählen, wie viele Klassenbibliotheken Sie verwenden möchten. Die Basisklassenbibliothek verwendet Normalize und anderes einfaches Zurücksetzen von CSS, um einheitliche UI-Schnittstelleneffekte zu erstellen. Sie können jedoch ein benutzerdefiniertes Raster hinzufügen, um Entwicklungszeit zu sparen

Alle Klassenbibliotheken können mithilfe von Tools integriert und minimiert werden. Und das Team stellt eine einfache Anleitung zur Verfügung, die beim Erstellen von Erweiterungsklassen hilft.

Ich persönlich denke, dass Pure ein ebenso erfolgreiches Framework wie Bootstrap werden wird. Obwohl es in vielen Blogs nicht oft erwähnt wird, sollte es auf jeden Fall einen Platz unter Ihren besten Frameworks haben

Semantische Benutzeroberfläche

Dieses Framework ist derzeit in der Version 2.2 mit vielen typischen Funktionen , wie Raster, Typ, Farbe und Eingabe usw.

Es bietet benutzerdefinierte Themen mit mehr als 3000 verschiedenen Thementypen. Es bietet auch Themen, die die Stile von Google, Amazon, Twitter und anderen Websites simulieren. Sie können sie auch bequem klonen und bearbeiten.

Sie können aus vorgefertigten Layouts auswählen und sie als Ihre eigenen Entwicklungsvorlagen verwenden. Die semantische Benutzeroberfläche verfügt über viele benutzerdefinierte Elemente, und Sie werden feststellen, dass diese Designs sehr unverwechselbar sind Die ultrakleine Klassenbibliothek ist eine sehr gute Wahl. Sie ist nach der Komprimierung nur 2 KB groß. Es handelt sich um ein sehr einfaches und schönes Projekt, das stabil ist und für verwendet werden kann tatsächliche Entwicklung. Sie können npm, Yarn, Bower usw. zur Installation verwenden, aber Normalisieren ist erforderlich, daher müssen Sie diese Klassenbibliothek einbinden

Verwenden Sie CSS-Komprimierungstools, um sie zusammenzuführen, um die Anzahl der HTTP-Anfragen zu sparenDas Einzige, was nicht sehr freundlich ist, ist die Dokumentation. Wenn Sie eine gute Dokumentation verwenden können, ist die Verwendung von Milligram natürlich eine sehr einfache Sache

Vital CSS

Ein weiteres minimalistisches UI-Framework, das SASS unterstützt, ist extrem einfach lernen

Die Komponentenseite stellt alles vor, was Sie wissen müssen. Wenn Sie ein supereinfaches CSS-Framework für die Entwicklung neuer Projekte benötigen, kann es Ihren Anforderungen auf jeden Fall gerecht werden. Wenn Sie mehr erfahren möchten, können Sie sich auf diesen Blog des Vital CSS-Entwicklungsteams beziehen

Skeleton

Responsives, ultraleichtes und ultraeinfaches Framework. Bietet die notwendige Infrastruktur für die Entwicklung neuer Websites

Enthält einige grundlegende Stile, aber nichts zu Auffälliges. Tatsächlich können Sie das Framework schnell und einfach an Ihre eigenen Bedürfnisse anpassen

Skeleton ist das stabilste und kompakteste Framework. Hier gibt es eine Demoseite.

UI-Kit

Eine funktionsreiche Front-End-Klassenbibliothek. Es gibt viele optionale Dateien und Ordner, CSS ist Stil, Bilder sind Symbole und js ist Javascript

Nach dem Einfügen in die Seite kann jedes js mit DOM-Elementen und -Komponenten verknüpft werden, was eine einfache Kommunikation ermöglicht andere Klassenbibliotheksintegration, zum Beispiel Vue oder React

Sie können diese Klassenbibliothek auch zum Einrichten und Erstellen von UI-Komponenten verwenden. Die Dokumentationsseite enthält viele Beispiele, die Ihnen bei gängigen Websites helfen

Materialize

Das Materialdesign von Google ist zum Standard für seine Produkte geworden. Materialise erobert langsam die Welt des Webdesigns

Dieses kostenlose Open-Source-Framework bringt Materialdesign auf die nächste Ebene. Es ist der einfachste Weg, Seiten im reinen Materialstil zu erstellen, ohne selbst zu programmieren

Bietet reine CSS-Klassendefinitionen, Javascript-Klassenbibliotheken und Komponenten. Einige praktische Beispiele finden Sie hier.

Jedes dieser Web-Frontend-Frameworks hat seine eigenen Vorteile. Es gibt immer eines, das für jeden geeignet ist. Ich hoffe, dieser Artikel kann Ihnen helfen und Ihre Arbeit effizienter machen.

Verwandte Empfehlungen:

Zwanzig leistungsstarke PHP-Frameworks

Globale PHP-Entwicklungs-Framework-Rankings

Einführung in praktische Web-Front-End-JS- und UI-Frameworks

Welches Front-End-Framework verwenden Sie bei der Entwicklung von PHP?

Erster Kontakt mit dem tollen Frontend-Framework vue.js