10 besten CSS-Frameworks im Jahr 2020
Suchen Sie nach dem besten CSS-Framework? Dieser Leitfaden soll Ihnen dabei helfen. In dieser Funktion helfen wir Ihnen, sich mit einigen der interessantesten und leistungsstärksten verfügbaren CSS-Frameworks vertraut zu machen. Einige davon sind bekannt, während andere neuere Werkzeuge sind, die gerade erst anfangen, Dampf aufzunehmen. In jedem Fall profitieren Sie stark davon, diese nützlichen Tools kennenzulernen.
Beste CSS-Frameworks: QuicklinksBootstrap | Stiftung | UIkit | Semantische Benutzeroberfläche | Finden | Rückenwind | Picknick CSS | PaperCSS | NES.css | Animate.css
Wir werden die Sache mit einigen bekannten Namen beginnen. Mit jedem dieser CSS-Frameworks sind Sie voll ausgestattet, um saubere, wartbare Projekte mit minimalem Zeitaufwand zu erstellen (wenn Sie etwas noch weniger Zeitaufwendiges wünschen, erstellen Sie Ihre nächste Site mit einem Webseitenersteller ). Manchmal brauchen Sie jedoch etwas Spezifischeres. Aus diesem Grund finden Sie am Ende der Liste einige Bibliotheken und Frameworks mit sehr spezifischen Anwendungsfällen.
Weitere CSS-Inspirationen finden Sie in unserer Zusammenfassung CSS-Animationen und wie man sie codiert . Außerdem lohnt es sich immer sicherzustellen, dass Sie das Beste haben Web-Hosting Option für die Bedürfnisse Ihrer Website und die perfekte Cloud-Speicher , auch.
01. Bootstrap
Beginnen wir mit dem beliebtesten Framework der Welt. Während Bootstrap sicherlich nicht ausschließlich ein CSS-Framework ist, sind die beliebtesten Funktionen die CSS-basierten. Dazu gehören ein leistungsstarkes Rastersystem, Abzeichen, Schaltflächen, Kartenkomponenten, Navigationsleisten und vieles mehr. Es gibt auch eine ganze Ladung von kostenlose Bootstrap-Themes erforschen.
Wenn Sie nicht mit der Funktionsweise eines Frameworks wie Bootstrap vertraut sind, helfen einige Codebeispiele, damit Sie sehen können, wie einfach es ist, wartbare Schnittstellen zu erstellen, indem Sie nur HTML bearbeiten.
Das Grid-System von Bootstrap ist ein guter Ausgangspunkt. Das Bootstrap-Grid ist seit der ersten Veröffentlichung des Frameworks im Jahr 2011 ein wertvolles Gut. Kein Wunder, dass es lächerlich einfach zu bedienen ist. Sobald Sie das CSS von Bootstrap integriert haben, ist das Erstellen eines reaktionsschnellen Flexbox-basierten Rasters, das in allen Browsern funktioniert, so einfach:
Column 1 Column 2 Column 3 Wie bereits erwähnt, bietet Bootstrap auch eine umfassende Sammlung von UI-Komponenten. Einige von denen, die in der Vergangenheit schwierig zu stylen waren, sind nur Plug-and-Play mit einem Framework wie Bootstrap. Dazu gehören eine Breadcrumb-Navigationskomponente, eine Kartenkomponente und eine Paginierungskomponente. Hier ist der HTML-Code zum Implementieren der Paginierung:
Alle diese Komponenten können erstellt werden, ohne eine einzige Zeile CSS zu schreiben. In vielen Fällen werden Sie die Komponenten wahrscheinlich so gestalten, dass sie zum Branding des Projekts passen. In jedem Fall ist die mobilfreundliche Struktur bereits vorhanden, sodass es unglaublich einfach ist, ein fertiges Produkt in Rekordzeit zu erreichen. Bootstrap Enthält außerdem erweiterte Funktionen für reaktionsschnelle Layouts, Dienstprogrammkomponenten und basiert auf Sass, sodass es superflexibel und anpassbar ist.
02. Stiftung
Das Foundation-Framework ist wie Bootstrap sehr beliebt geworden und wird als komplexeres Framework mit einigen fortschrittlichen, aber einfach zu implementierenden CSS-Komponenten bezeichnet. Foundation basiert auf Sass und ist daher wie Bootstrap anpassbar. Darüber hinaus bietet es einige leistungsstarke Reaktionsfunktionen, die das Erstellen mobiler Designs zum Kinderspiel machen.
Die Responsive Table-Komponente ist einer unserer Favoriten:
Außerdem ist die vertikale Zeitachse eine Layoutfunktion, die Sie in vielen Frameworks nicht sehen. Diese Komponente verwendet die .Zeitleiste Klasse für den Container, der dann mehrere enthält .timeline-item Elemente mit einem Symbol und Inhalt für jedes Element:
2019
Example text for timeline item.
Dies ist nur eine kleine Auswahl der vielen Komponenten, die hergestellt werden Stiftung eines der besten heute verfügbaren CSS-Frameworks.
03. UIkit
UIkit ist ein weiteres beliebtes Frontend-Framework und wird in Bezug auf CSS-Funktionen möglicherweise etwas unterschätzt. Zusätzlich zu vielen Funktionen, die denen anderer gängiger Frameworks ähneln, gibt es einige nützliche Spezialkomponenten.
Wenn Sie mit Flexbox noch nicht sehr vertraut sind, können Sie mit UIkit komplexe Flexbox-basierte Layouts mit einfachem HTML erstellen. Es mag zunächst seltsam erscheinen, die Flexbox-Syntax in Ihren HTML-Klassen zu verwenden, aber dies erspart Ihnen die Kenntnis aller Macken in Bezug auf Flex-Wrapping, Spalten / Zeilen, Flex-Grow und so weiter. Hier ein Beispiel:
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 UIkit enthält Dutzende von Komponenten, die sofort attraktive Stile bieten. Viele der Funktionen sind spezielle Dienstprogrammklassen, einschließlich der folgenden:
- .uk-align-left , .uk-align-right und .uk-align-center zum Ausrichten oder Verschieben von Elementen
- .uk-Spalte-1-2 bis zu .uk-Spalte-1-6 für mehrspaltige Textlayouts im Magazinstil
- .uk-radio , .uk-Checkbox und ähnlich für attraktive Formulareingaben
- Verschiedene Dienstprogrammklassen für Rand und Polsterung ( .uk-margin-top , .uk-Polsterung-klein usw.)
- Verschiedene Utility-Klassen, um ein Element relativ in einem Container zu positionieren ( .uk-position-top , .uk-Position-links usw.)
UIkit ist einen Versuch wert, wenn Sie ein frisches, gut gepflegtes CSS-Framework mit einer Vielzahl von Komponentenoptionen wünschen. Es ist in Less and Sass verfügbar und enthält sogar ein Stylesheet für Sprachen von rechts nach links.
04. Semantische Benutzeroberfläche
Die semantische Benutzeroberfläche hat viele Funktionsüberschneidungen mit anderen gängigen Frameworks, aber die Funktionsweise (impliziert durch den Namen) basiert auf der semantischen Natur der Klassennamen, die zum Erstellen von Komponenten verwendet werden. Mit anderen Worten, die Klassennamen sind menschenfreundlich.
Sehen Sie sich zum Beispiel an, wie Sie ein vierspaltiges Raster erstellen würden:
Beachten Sie, wie die Klassennamen genau kommunizieren, was erstellt wurde. Das CSS verfügt nicht unbedingt über einen eindeutigen Satz von Stilen für jede der aufgelisteten Klassen, sondern die Klassen arbeiten zusammen. Ähnlich wie in einer Sprache, in der Wörter im Kontext sinnvoll sind, arbeiten die Klassennamen zusammen, um zusammenhängende, mobilfreundliche Komponenten zu bilden.
Hier ist ein weiteres Beispiel, das eine einfache Datentabelle erstellt:
Dies ist eine großartige Demonstration, wie Semantische Benutzeroberfläche verwendet Klassennamen, um die zu erstellende Komponente zu beschreiben. Wenn Sie eher an traditionelle Frameworks wie Bootstrap oder Foundation gewöhnt sind, ist die Lernkurve in diesem Fall möglicherweise steiler. Aber sobald Sie den Dreh raus haben, ist es ziemlich leistungsfähig und macht Spaß, es zu verwenden.
05. Finden
Bulma ist ein weiteres beliebtes CSS-Framework. Sein Hauptmerkmal ist die Tatsache, dass seine Komponenten weitgehend von der Flexbox abhängen, was es zu einem wirklich modernen Framework macht. Sie können sich vorstellen, dass Bulma eine Art Hybrid aus Bootstrap und semantischer Benutzeroberfläche ist, jedoch ohne die Komplexität. Es verwendet einige der gleichen Prinzipien wie die semantische Benutzeroberfläche mit ihren Klassennamen, enthält viele der gängigen Komponenten und schafft es dennoch, die Dinge einfach zu halten. Beispielsweise haben Formularelemente wenig bis gar keine Stile, um ein browserübergreifendes Erscheinungsbild beizubehalten.
Das folgende Beispiel zeigt, wie eine Bulma-Komponente erstellt werden kann und einfach zu warten ist:
Example Heading
Example text goes here
Some example paragraph text here.
Beachten Sie das Enthalten Element ist der Held gegeben und ist dunkel Klassen. Dies zeigt an, dass Sie ein Heldenbanner möchten, das das standardmäßige dunkle Thema verwendet (eine von sieben in Bulma enthaltenen Themenfarben, die alle über Sass-Variablen geändert werden können).
Beachten Sie auch die is- * Klassen auf dem Container und der primären Überschrift. Das ist flüssig Klasse ermöglicht es dem Behälter, auf einem Bildschirm jeder Größe flüssig zu sein, zentriert mit Rändern und ohne maximale Breite . Ohne diesen Wert kann die maximale Breite des Containers ändert sich abhängig von der Größe des Ansichtsfensters. Das ist-Größe-2 Klasse definiert die Größe der Überschrift mit Größen zwischen 1 und 7.
Wie du siehst, Finden macht es unglaublich einfach, mobilfreundliche Schnittstellen über lesbare Klassennamen zu erstellen.
06. Rückenwind
Viele moderne CSS-Frameworks nutzen den jüngsten Trend beim Erstellen von Benutzeroberflächen: die Verwendung von Einzweck-Dienstprogrammklassen, die auch als Atomic CSS bezeichnet werden (siehe nebenstehende Box). Rückenwind ist ein solcher Rahmen. Die Idee hinter Tailwind ist, dass Sie nicht mit vorgefertigten Ausstechkomponenten beginnen, sondern alles von Grund auf mithilfe von Utility-Klassen erstellen.
Die Lernkurve ist in diesem Fall definitiv höher, insbesondere wenn Atomic CSS für Sie neu ist. Mit Rückenwind werden jedoch Spezifitätsprobleme und andere in großen Stylesheets häufig auftretende Überschreibungsprobleme vermieden.
Zum Beispiel enthält Rückenwind keine 'Knopf' -Komponente. Sie können jedoch Ihre eigene Schaltfläche erstellen, indem Sie Folgendes verwenden:
Button Wenn Sie von dort aus entscheiden, dass das, was Sie erstellt haben, eine gültige Komponente für die Wiederverwendung ist, können Sie dies mithilfe der Komponentenextraktionsfunktion von Tailwind tun. So kann eine Komponente wie die im vorherigen Codeblock gezeigte Schaltfläche wie folgt eingefügt werden:
Button .btn { @apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 text-white; } Wie Sie sehen können, ist die Lernkurve für Rückenwind ist ziemlich hoch. Sie müssen sich nicht nur an die Utility-First-Stile gewöhnen, sondern es wird auch empfohlen, die Komponentenextraktion mit Tailwind zu verwenden @anwenden Richtlinie - das ist nur eine Möglichkeit, Extraktion durchzuführen; siehe seine Dokumentation für mehr.
07. Picknick CSS
Wenn Ihnen die Idee, Präsentationsklassen in Ihr Markup aufzunehmen, die in den meisten, wenn nicht allen gängigen Frameworks üblich ist, nicht gefällt, ist Picnic CSS möglicherweise das Framework für Sie. Picknick ist in vielerlei Hinsicht das Gegenteil von Rückenwind, da es nicht nur weniger komplex, sondern auch sehr eigensinnig ist.
Beispielsweise sind einige HTML-Elemente vorgestylt, ohne dass Klassennamen hinzugefügt werden müssen. Diese schließen ein , , Zusätzlich zu einer Reihe vorhandener Standardstile für viele HTML-Elemente Picknick verfügt über einige andere gut gestaltete interaktive reine CSS-Komponenten, für die kein JavaScript erforderlich ist. Dazu gehören ein modaler Dialog, ein Tab-Umschalter, ein Datei-Uploader und ein Tooltip. Einige davon können mit Skripten erweitert werden, aber alle funktionieren nur mit CSS. Wir gehen hier auf die spezielleren Optionen in unserer Liste der besten CSS-Frameworks ein. Dies wird nicht Ihr bevorzugtes CSS-Tool sein, aber es ist eines der skurrilsten Frameworks auf dem Markt. PaperCSS wird als „weniger formales CSS-Framework“ in Rechnung gestellt. Die Komponenten haben ein handgezeichnetes, cartoonartiges Aussehen. Anwendungsfälle können eine Website für Kinder, ein Blog, ein Spiel oder ein Comic sein. PaperCSS Enthält ein Flexbox-Raster, Abzeichen, Schaltflächen, Karten und einige interaktive reine CSS-Komponenten. Das nebenstehende Bild gibt Ihnen einen Vorgeschmack darauf, was dieses einzigartige Framework hervorbringt. Wie PaperCSS verfügt NES.css über eine einzigartige Reihe von Stilen, die nur für eine begrenzte Anzahl von Projekten geeignet sind. Es ahmt die 8-Bit-Grafik des Nintendo Entertainment Systems nach und sorgt für einen Retro-Gaming-Look. Zusätzlich zu den in anderen Frameworks üblichen Komponenten NES.css Enthält auch Stile für Kommentar-Sprechblasen, Reaktionssymbole sowie eindeutige Container mit Rahmen. Unten finden Sie den Code für einige Kommentar-Sprechblasen. Das nebenstehende Bild zeigt, wie sie zusammen mit einigen der vielen Symbole (die über CSS-Schatten erstellt wurden) aussehen, die im Framework enthalten sind. Comment Balloon Example Another comment balloon example with a little more text. Wenn dir das gefällt, schau es dir an PSone.css . Es gibt mehrere Bibliotheken, die mehr oder weniger dasselbe tun: Fügen Sie einem bestimmten Element eine oder mehrere Animationen hinzu. Die erste Bibliothek dieser Art, die in den letzten Jahren an Popularität gewann, war die von Dan Eden Animate.css . Diese unterhaltsame Bibliothek enthält Dutzende vorgefertigter Animationen, die verwackeln, verblassen, schieben, zoomen und vieles mehr. Es gibt einige andere ähnliche Bibliotheken, die Benutzern alternative Animationen anbieten, einschließlich Woah.css , mit einigen unbestreitbaren ungewöhnlichen Animationen, die wahrscheinlich nicht jedermanns Geschmack treffen. Es gibt auch Beleben , das viele weitere einzigartige Animationsoptionen bietet und sich stark von Animate.css unterscheidet. Eine weitere großartige Option zum Erkunden ist CSSFX , ein neues Projekt, das noch mehr Optionen für Plug-and-Play-Animationen bietet. Wenn Sie auf der Suche nach animierten Ladeindikatoren sind, sollten Sie dies überprüfen Epische Spinner , die einige einzigartige animierte CSS-Grafiken enthält. Es ist nicht ungewöhnlich, dass Leute CSS schlagen. Mit seinem Fokus auf die Kaskade, das globale Design und die Eigenheiten seiner Layouts hat es seinen gerechten Anteil an Ärger von frustrierten Entwicklern angezogen. Für diese Menschen sind CSS-Frameworks und -Bibliotheken, die Vanille-Code modifizieren, um ihn intuitiver zu gestalten, ein absoluter Glücksfall. Für einige CSS-Puristen fügen Frameworks einfach eine Abstraktionsebene zu etwas hinzu, das keiner Verzierung bedarf. Keine Seite ist richtig oder falsch. Es ist von großem Wert, die Kernsprache zu verstehen (insbesondere einige der neuen Funktionen wie Flexbox und Grid Layout), aber es ist auch von großem Wert, schnell etwas erstellen zu können, das skalierbar und wartbar ist. Hier können CSS-Frameworks und -Bibliotheken helfen. Es kann sein, dass Sie es lieben, Ihr CSS von Grund auf neu zu schreiben. Mit benutzerfreundlichen, flexiblen und anpassbaren Frameworks und Bibliotheken wie den in dieser Funktion beschriebenen können Sie jedoch in kurzer Zeit interaktive und wartbare Benutzeroberflächen für Ihre App erstellen. Wir würden Entwickler immer ermutigen, weiterhin Vanille-CSS zu lernen und zu schreiben. Dafür gibt es keinen Ersatz. Wenn Sie jedoch innerhalb kurzer Zeit ein neues Layout oder Design erstellen oder prototypisieren müssen, kann die Verwendung eines der besten CSS-Frameworks einen enormen Produktivitätsschub bewirken. Wenn Sie die neuesten kreativen und praktischen Fähigkeiten erlernen möchten, um Ihre Karriere auf die nächste Stufe zu heben, besuchen Sie unsere Konferenz Generate CSS für Webdesigner und -entwickler. Erfahren Sie mehr unter www.generateconf.com . Verwenden Sie einen speziellen Angebotscode WEBDESIGNER2 für 10% Rabatt auf Tickets! Dieser Artikel wurde ursprünglich in veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Ausgabe 321 oder abonnieren . Weiterlesen: , und (Die beiden letzteren haben auch eine nette kleine animierte Aktion zum Überprüfen / Deaktivieren).
08. PaperCSS
09. NES.css
10. Animate.css
Benötige ich ein CSS-Framework?
Interessant In Der Welt Des Designs
