Welches ist das Richtige für mich? 22 Responsive CSS Frameworks und Boilerplates erklärt
CSS-Frameworks gibt es schon seit Jahren, aber die Einführung reaktionsschneller Designpraktiken hat viele unserer alten Favoriten unbrauchbar gemacht. Glücklicherweise haben viele wirklich talentierte Entwickler die Lücke mit der nächsten Generation von CSS-Frameworks und Boilerplates geschlossen.
Es schweben bereits eine Menge dieser Dinge herum. Jeder hat eine Liste, aber niemand führt Sie wirklich durch die Unterschiede zwischen den einzelnen Frameworks und Boilerplates, damit Sie eine fundierte Entscheidung treffen können. Das ist heute unser Ziel. Folgen Sie uns, während wir uns ansehen, was jedes dieser 22 reaktionsschnellen CSS-Frameworks und Boilerplates einzigartig macht.
Gumby
Das Gumby-Framework verwendet das 960-Raster, an dem wir uns alle vor Jahren die Zähne geschnitten haben, und bringt es mit einem reaktionsschnellen Touch in das moderne Zeitalter des Webdesigns. Es hat auch vorgefertigte Stile für Dinge wie Formulare, Schaltflächen, Umschalter, Dropdowns, Registerkarten und mehr.
Das semantische Gittersystem
Wenn Sie Rastersysteme und deren aufgeblähte, nicht semantische Markups hassen, ist dies das Richtige für Sie. Das Semantic Grid-System nutzt die Leistung von CSS Preprozessoren (LESS, Sass und Stylus) anpassbare Variablen für Dinge wie Gosse und die Spaltenbreite zu schaffen. Alles was Sie tun müssen, ist ein paar vorgefertigte Mixins in Ihrem CSS zu verwenden, kein zusätzliches Markup erforderlich!
Gitterlos
Gridless ist eine leistungsstarke Boilerplate, die mobiles First-Responsive-Webdesign verwendet, um sich an die Breite des Geräts anzupassen. Es ist auch vollgepackt mit großartigen Funktionen wie CSS-Normalisierung, IE-Fehlerkorrekturen und Typografiestilen.
Rahmenlos
Frameless ist schwer zu klassifizieren, da es technisch eher eine empfohlene Methode für das Responsive Design ist als ein tatsächlicher Satz von Dateien, die Sie herunterladen können. Es gibt drei Schritte: Erstellen Sie zunächst ein reguläres Raster mit fester Breite, wiederholen Sie es dann unendlich und schließen Sie es ab, indem Sie es im Ansichtsfenster zentrieren.
Auf der Website wird ausdrücklich darauf hingewiesen, dass Frameless kein Framework ist und keine Dateien heruntergeladen werden können. Trotz dieser Behauptung gibt es tatsächlich einige grundlegende Vorlagen, die Ihnen den Einstieg erleichtern sollen.
Proportionalgitter
Proportional-Grids lösen einige große Probleme, die beim Versuch eines reaktionsschnellen CSS-Layouts auftreten, nämlich das Verschachteln von Grids und das Ringen mit prozentualen Werten in sehr unterschiedlichen Ansichtsfenstern.
Proportional Grids verwendet CSS-Box-Sizing, um eine Lösung zu erstellen, die feste Rinnen (ems / rems) ermöglicht, die mit Flüssigkeitssäulen gemischt werden. Der Abstand zwischen den Spalten bleibt an jedem Unterbrechungspunkt in Bezug auf die Basisschriftgröße gleich. Spalten werden nach Proportionen definiert, z. B. eine Hälfte, ein Drittel, zwei Drittel, und können problemlos beliebig oft wiederverwendet werden, selbst wenn sie verschachtelt sind.
Der Goldlöckchen-Ansatz
Der Goldilocks-Ansatz zielt darauf ab, die Tendenz reaktionsfähiger Designs zu verringern, sich auf die Unterstützung bestimmter Geräte zu stützen. Stattdessen wird nach einem universellen Design gesucht, das von keinem Gerät abhängig ist.
Der Goldilocks-Ansatz verwendet eine Kombination aus ems, max-width, Medienabfragen und Musterübersetzungen, um drei Zustände zu berücksichtigen, mit denen Ihre Designs auflösungsunabhängig sind.
Twitter Bootstrap
Twitter Bootstrap braucht keine Einführung. Es ist eines der größten und schlimmsten CSS-Boilerplates im Web und der Ausgangspunkt für unzählige professionelle und persönliche Websites von Entwicklern auf der ganzen Welt.
Twitter Bootstrap enthält ein reaktionsschnelles Rastersystem sowie unzählige vorgefertigte Elemente wie Formulare, Schaltflächen, Navigationsmenüs und mehr. Lesen Sie hier unsere vollständige Einführung.
Stiftung von ZURB
Foundation ist der bedeutendste Konkurrent von Twitter Bootstrap, da die beiden Projekte sehr ähnlich sind. Wie Bootstrap bietet Foundation Ihnen ein ansprechendes Raster sowie verschiedene gestaltete UI-Elemente.
Foundation 3 wurde erst kürzlich gestartet. Wenn Sie sich das Projekt schon länger nicht mehr angesehen haben, sollten Sie vorbeischauen und es sich ansehen. Es ist zweifellos eines der hilfreichsten und gründlichsten Frameworks, die Sie jemals finden werden.
Skelett
Skeleton war eine der frühesten reaktionsschnellen Kesselplatten, die auftauchten, und es ist immer noch eine der besten. Im Konzept ist es ein bisschen wie Foundation, nur fühlt es sich leichter an (Typ, Schaltflächen und Formulare sind die einzigen Elemente der Benutzeroberfläche).
In unserem Skeleton-Tutorial erfahren Sie, wie unglaublich einfach dieses Tool es macht, ein reaktionsschnelles Design in wenigen Minuten zum Laufen zu bringen.
Amazium
Amazium ist Gumby sehr ähnlich, da es ein responsives Gitter ist, das auf den alten 960-Gittertechniken aufbaut. Vor kurzem wurde das Framework jedoch so aktualisiert, dass es sich auf 1.200 Pixel erstreckt, sodass Sie die Vorteile großer Displays nutzen können. Es enthält sogar Unterstützung für Retina-Displays!
Golden Grid System
The Golden Grid-System nennt sich „folding Gitter“, das ist wirklich nur eine andere Art zu sagen, dass Medien-Anfragen die ursprüngliche sechzehn Spalten-Layout in acht und dann vier Spalten als Ansichtsfenster Engstellen kollabieren verwendet.
Wie einige der anderen Gitter, die wir bisher gesehen haben, verwendet das Golden Grid System Dachrinnen, die auf ems basieren, damit die Dachrinnen immer im Verhältnis zum Inhalt bleiben.
Das 1140px CSS Grid System
Dies ist ein ziemlich normales Rastersystem ohne etwas Besonderes. Es beginnt mit einem 12-Säulen-Flüssigkeitsgitter, das prozentuale Dachrinnen verwendet und auf 1.280- und 1.140px-Monitoren hervorragend funktioniert. Wenn das Ansichtsfenster kleiner wird, werden einige einfache Medienabfragen verwendet, um den Inhalt neu zu fließen.
StackLayout
StackLayout ist für die Rebellen, es wird sich sehr von anderen Frameworks unterscheiden, die Sie ausprobiert haben. Tatsächlich entstand es aus einer Abneigung gegen typische CSS-Layout-Frameworks.
Das Grundprinzip hierbei ist, dass StackLayout den Inline-Block als Eckpfeiler eines einzigartigen Layoutsystems verwendet. Das System ist etwas eigenartig, aber dennoch ziemlich beeindruckend. Hier finden Sie eine exemplarische Vorgehensweise.
SimpleGrid
SimpleGrid ist ein weiteres einzigartiges Layoutsystem, das Ihnen Spaß macht, wenn Sie genauso gerne mit diesen Dingen herumspielen wie ich. Das Raster basiert hier auf vier verschiedenen Bildschirmbereichen: Bildschirme mit einer Breite von weniger als 720 Pixel, Bildschirme mit einer Breite von mehr als 720 Pixel, Bildschirme mit einer Breite von mehr als 985 Pixel und Bildschirme mit einer Breite von mehr als 1235 Pixel.
Um das System zu implementieren, verwenden Sie "Slot" -Klassen aus einem vier- und sechsspaltigen Layout. Es klingt kompliziert, ist aber seinem Namen treu und recht einfach zu implementieren.
Fluid Baseline Grid
Das Fluid Baseline Grid wurde mit einem starken Schwerpunkt auf starker Typografie erstellt, die an einem Baseline Grid haftet. Es enthält auch ein dreispaltiges Faltgitter, das als hilfreicher Ausgangspunkt und nicht als Standard dienen soll.
Kolumnal
Columnal ist eine Art Hybrid-Grid-System, das die besten Elemente aus verschiedenen anderen Frameworks entlehnt. Es hat die elastische DNA des 1140px CSS Grid Systems mit etwa 960.gs. Es ist ziemlich normal, aber wenn die anderen nicht gut passen, können Sie es ausprobieren.
Inuit.css
Inuit.css ist ein großartiges Framework, das im Hinblick auf Erweiterbarkeit erstellt wurde. Verwenden Sie den benutzerdefinierten Grid Builder, um Ihr eigenes responsives Grid zu erstellen, und laden Sie dann einige Iglus (Plugins) herunter, um das Framework auf nützliche Weise zu erweitern.
320 und höher
320 and Up ist wie eine Sammlung von Webdesign-Modewörtern (auf gute Weise). Es enthält ein responsives Layoutsystem, das die Mentalität „Mobile First“ verwendet, zusammen mit visuellen Bootstrap-Stilen, Font Awesome-Symbolen, Modernizr, Selectivizr, LESS und Sass. Es ist eine beeindruckende kleine Toolbox mit Leckereien, die Ihnen bestimmt gefallen werden.
Susy: Responsive Gitter für Kompass
Dieser ist für Super-Nerds wie mich, die Layout-Systeme sowie Sass und Compass lieben. Erstellen Sie Ihre Layouts in wenigen Minuten mit der Magie von Mixins und Variablen.
Angesichts der Tatsache, dass Compass kürzlich die native Unterstützung für Grids ganz eingestellt hat, sollte Susy für diejenigen nützlich sein, die sie vermissen.
Initializr - Responsive HTML5-Vorlage
Initializr ist ein Tool, mit dem Sie Ihre HTML5-Projekte schnell und einfach mit HTML5 Boilerplate, Bootstrap oder einem neuen Responsive Boilerplate starten können.
Die Auswahl der reaktionsfähigen Vorlage ist nur der Anfang. Von dort aus erstellen Sie Ihren Download individuell, indem Sie aus allen Ressourcen auswählen, die Sie normalerweise benötigen, z. B. Modernizr und LESS.
Noch eine mobile Boilerplate
YAMB ist ein guter Ausgangspunkt für Ihre reaktionsschnellen Webprojekte, der auf einigen wichtigen Funktionen basiert: einem reaktionsschnellen Flüssigkeitsraster, Dropdown-Navigationsmenüs, die sich automatisch in Auswahlfelder auf kleinen Bildschirmen verwandeln, und reaktionsschnellen Bildern / Diashows.
Ich finde die Website ziemlich hässlich, aber das Toolset selbst ist ziemlich praktisch!
Wirefy
Wirefy wurde speziell für schnell reagierende Wireframing-Experimente entwickelt. Es verwendet eine modifizierte Version des 960-Spalten-960-Rasters zusammen mit einigen Bootstrap-ähnlichen UI-Elementen (Menüs, Formulare, Diashows, Schaltflächen, Bilder usw.).
Welches ist dein Favorit?
Diese Art von Posts wird unweigerlich Kommentatoren anziehen, die das Bedürfnis verspüren, den gesamten Gedanken der Verwendung von Vorlagen oder Rastersystemen für das Webdesign zu diskreditieren. Sie sind einfach nicht jedermanns Sache und ich respektiere Ihre Meinung, wenn Sie sie nicht ausstehen können.
Wenn Sie sich jedoch für Grid-Systeme interessieren, würde ich gerne Ihr Feedback zu den oben genannten Optionen hören. Welche hast du ausprobiert und was denkst du über sie? Welches ist dein Favorit?
