Die ultimative Sammlung von über 50 Ressourcen für Grid-Liebhaber
Wenn Sie gitterbasiertes Design lieben, ist dieser Artikel genau das Richtige für Sie. Wir haben das Web durchsucht und alle wichtigen Rasterressourcen zusammengestellt, die wir finden konnten. Wir haben die besten Frameworks, Grid Builder, Anleitungen und mehr.
Beginnen Sie mit dem Surfen und Lesezeichen!
Hass-Grid-Frameworks?
Bevor wir anfangen, möchte ich nur sagen, dass ich genau weiß, dass viele der Leute, die dies lesen, bereits vor Wut über die Übel von Layout-Frameworks platzen.
In Wahrheit gibt es viel gegen Grid Frameworks zu sagen. Sie sind umständlich, haben eine Lernkurve und werfen oft Semantik aus dem Fenster. Darüber hinaus gibt es eine Million dieser Dinge, was es schwierig macht, Diskussionen über Standardpraktiken überhaupt erst zu beginnen.
Wenn Sie in das Lager der CSS-Framework-Hasser fallen, machen Sie sich keine Sorgen, es gibt immer noch viele Ressourcen für das Grid-Design, die nichts mit Frameworks zu tun haben. In der Zwischenzeit finden Sie hier einige Alternativen zu Grid-Frameworks.
Rollen Sie Ihre eigenen Rasterlayouts im laufenden Betrieb
Ich habe kürzlich einen Artikel darüber veröffentlicht, wie Sie komplexe mehrspaltige Layouts schnell und allein ohne komplizierte Frameworks oder nicht-semantische Klassennamen erstellen können. Es ist so einfach, dass Sie möglicherweise nie wieder ein Framework für das Layout verwenden.
Gitterlos
Gridless ist ein optionales HTML5- und CSS3-Boilerplate, mit dem mobile erste reaktionsfähige, browserübergreifende Websites mit wunderschöner Typografie erstellt werden können. Es enthält keine vordefinierten Rastersysteme oder nicht-semantischen Klassen.
Stapellayout
Ein komponentenbasiertes CSS-Layoutsystem mit flexibler Breite, das Inline-Block-Elemente stark nutzt.
HTML5 Boilerplate
HTML5 Boilerplate wird schnell zum Standard-Ausgangspunkt für moderne Webdesign-Projekte. Zuletzt habe ich überprüft, ob es alles gibt, was man sich nur wünschen kann, mit Ausnahme eines Rastersystems.
Old School Frameworks
Dies sind die Opa-Gitter, die es schon seit Jahren gibt. Einige von ihnen beginnen wirklich, ihr Alter zu zeigen, so dass Sie sie heute vielleicht verwenden möchten oder nicht.
Entwurf
Blueprint ist ein CSS-Framework, mit dem Sie Ihre Entwicklungszeit verkürzen können. Es bietet Ihnen eine solide Grundlage, auf der Sie Ihr Projekt aufbauen können, mit einem benutzerfreundlichen Raster, sinnvoller Typografie, nützlichen Plugins und sogar einem Stylesheet zum Drucken.
960 gs
In 960.gs beginnen die meisten Menschen mit dem Einstieg in CSS-Frameworks und Grid-Systeme. Es ist immer noch sehr beliebt und viele der neueren Frameworks basieren zumindest teilweise auf der Arbeit hier.
Fluid 960 Grid System
Eine beliebte Variante von 960.gs mit einem fließenden Layout, das die Breite automatisch an die Größe des Browserfensters anpasst.
YAML
„Noch ein mehrspaltiges Layout“ (YAML) ist ein (X) HTML / CSS-Framework zum Erstellen moderner und flexibler schwebender Layouts. Die Struktur ist äußerst vielseitig programmierbar und für Endbenutzer absolut zugänglich.
Fantastische neue (er) Frameworks
Perkins
Perkins kombiniert die glänzende Neuheit von HTML5 und CSS3 mit der unglaublichen Leistung von LESS.js, um ein ultimatives CSS-Framework zu erstellen. Wenn Sie gerne mit futuristischen CSS-Lösungen experimentieren, ist dies ein großartiger Rahmen für Sie. Es wird eine Variante des 1KB-Grids verwendet.
Weniger Rahmen
Less Framework ist ein responsives CSS-Grid-System zum Entwerfen adaptiver Websites. Es enthält 4 Layouts und 3 Sätze von Typografie-Voreinstellungen, die alle auf einem einzigen Raster basieren. "Weniger" in diesem Sinne sollte nicht mit LESS.js von oben verwechselt werden. Ich weiß, es ist verwirrend. Sie müssen diesem etwas anderes nennen!
Kolumnal
Ein reaktionsschnelles CSS-Grid-System, mit dem Desktop- und mobile Browser gut zusammenspielen können. Columnal verwendet ein eigenes Hybrid-Grid-System, das von einigen anderen übernommen wurde.
Skelett
Skeleton ist ein fantastisches Responsive Framework, über das ich schon einige Male geschrieben habe. Wenn Sie sich nicht sicher sind, wie viel Zeit und Lernaufwand für Responsive Design erforderlich sind, sollten Sie dies überprüfen. Das Skelett ist lose auf 960 g gebaut.
52Framework
Ein Framework, das HTML5, CSS3 und JavaScript verwendet, um die Kompatibilität moderner Webentwicklungspraktiken mit allen gängigen Browsern zu maximieren. Es basiert auf einem einfachen 16-Spalten-Raster.
G5 Framework
(X) HTML5-, CSS3-, PHP- und jQuery-Front-End-Framework. G5 Framework wurde als persönliches Projekt gestartet. Um den Workflow zu beschleunigen, die besten Codierungsmethoden und ähnliche Codierungstechniken wiederzuverwenden, dient das Framework als Starterdatei für neue Websites.
Das Raster von G5 Framework basiert auf Easy Grid.
Easy Percentage Grid System mit HTML5
Die Hauptmerkmale dieses Rastersystems sind, dass alle Spalten eine prozentuale Breite haben, sodass sie sich an das Containerelement anpassen. Dies bedeutet, dass Sie mit diesem System nicht die Breite jeder Spalte von Hand definieren müssen, sondern sie einfach in einen beliebigen Behälter werfen können und die Spaltenbreiten und Spaltenrinnen automatisch festgelegt werden.
Kabine CSS
CSS-Frameworks sind in der Regel sehr aufgebläht. Cabin löst dieses Problem mit einem modularen Erweiterungssystem, mit dem Sie nur das hinzufügen können, was Sie benötigen. Es werden verschiedene Rastererweiterungen unterstützt.
jQuery Mauerwerk
jQuery Masonry ist überhaupt kein CSS-Framework, sondern ein JavaScript-Plugin, das gitterbasierte Designs ermöglicht, die eine Art vertikales Float-System verwenden. Es ist ein großartiges Tool, das momentan sehr beliebt ist.
InuitCSS
Dieses Framework hat alles: Plugins progressive flexible mobile Tablet sinnvoll erweiterbar zugänglich pragmatisch funktional nützlich produktionsbereit mehr. Das Rastersystem ist auf Ihre Bedürfnisse zugeschnitten.
Frameworks mit geringem Platzbedarf
1 Zeile CSS Grid Framework
Ich dachte, dass ein einzeiliges CSS-Raster verrückt klingt, aber dieser Typ hat es geschafft. Ich bin mir nicht sicher, wie praktisch es in der realen Welt ist, aber ich bin beeindruckt von dem Gedanken, der darin steckt!
1 KB Raster
Dies ist einer meiner alten Favoriten. Es handelt sich um ein Grid-System, das auf das Wesentliche reduziert ist und kein 60-minütiges Walkthrough-Video benötigt. Wenn Sie CSS-Grid-Systeme nicht verstehen, beginnen Sie hier.
Winziges Flüssigkeitsgitter
Genau wie das 1KB-Gitter nur Flüssigkeit für zusätzlichen Spaß.
Schlankes CSS
SlimCSS ist ein leichtes CSS-Framework, das eine solide browserübergreifende Grundlage mit vielen wesentlichen Funktionen bildet und dabei so klein wie möglich bleibt.
Andere Frameworks
Schwere
Gravity ist ein SASS-basiertes Framework zum Erstellen leistungsfähiger, leicht zu wartender HTML5-Websites. Es hilft Ihnen dabei, Ihre Ideen schnell zu prototypisieren, und erleichtert Ihnen im Allgemeinen das Leben erheblich.
1140 Gitter
Das 1140-Raster passt perfekt in einen 1280-Monitor. Auf kleineren Monitoren wird es flüssig und passt sich der Breite des Browsers an.
Ab einem bestimmten Punkt werden Medienabfragen verwendet, um eine mobile Version bereitzustellen, die im Wesentlichen alle Spalten übereinander stapelt, sodass der Informationsfluss immer noch sinnvoll ist.
Das quadratische Gitter
Ein einfaches CSS-Framework für Designer und Entwickler, das auf 35 Spalten gleicher Breite basiert. Ziel ist es, die Entwicklungszeit zu verkürzen und Ihnen dabei zu helfen, schön strukturierte Websites zu erstellen.
Fluid Grid
Fluid Grid ist ein neues Rastersystem, das genauso funktioniert wie Blueprint oder 960, jedoch mit jeder Seitenbreite, sogar mit flüssigen Layouts. Es basiert nur auf CSS.
EZ-CSS
EZ CSS ist eine völlig andere Art von Grid-Framework. Es verwendet ein einzigartiges Modulsystem, mit dem Sie einfache Layouts kopieren, einfügen und verschachteln können, um komplexe Seiten zu erstellen. Es ist ein wenig schwierig, den Kopf herumzureißen, aber eine wirklich brillante Verwendung von CSS.
FEM CSS Framework
FEM CSS Framework ist ein 960 Pixel breites + 12-Spalten-Rastersystem + gängige CSS-Stile, mit denen sich Weblayouts einfach und schnell entwickeln lassen.
Es basiert auf dem 960 Grid System, hat jedoch eine Wendung in der Philosophie, um das Spielen mit Boxen flexibler und schneller zu machen.
Elastisches CSS
Ein einfaches CSS-Framework zum Layouten webbasierter Schnittstellen, basierend auf den gedruckten Layouttechniken von 4 Spalten, jedoch mit Funktionen für unbegrenzte Spaltenkombinationen. und die Fähigkeit, ein elastisches, festes und flüssiges Layout leicht herzustellen.
Atatonic CSS
Dieses Framework zielt hauptsächlich auf Typografie ab, es gibt jedoch auch ein sehr leichtes Rastersystem.
Basislinie
Baseline macht es einfach, eine Website mit einem ansprechenden Raster und guter Typografie zu entwickeln. Das Raster in Baseline besteht aus 4 Grundspalten. Für mehr Flexibilität kann jede Spalte in 2 Einheiten unterteilt werden.
Emastisch
Ein leichtes CSS-Framework für Fluid Grids mit Schwerpunkt Typografie.
Goldenes Gitter
Das Golden Grid ist ein Web-Grid-System. Es ist ein Produkt der Suche nach dem perfekten modernen Netzsystem. Es soll ein CSS-Tool für gitterbasierte Websites sein.
Frak
Frak ist ein CSS-Framework zum Erstellen von Fluid Grids. Es hat ein interessantes Konzept, bei dem Multiplikatoren als Klassennamen verwendet wurden.
Einfaches Framework
Easy ist ein CSS / HTML / JavaScript-Framework, das als persönliches Projekt gestartet wurde und dann zu etwas mehr wurde. Die Idee dahinter ist, den Zeitaufwand für die Einrichtung der grundlegenden Master-HTML-Vorlage zu reduzieren, indem dieselben Codierungstechniken wiederverwendet werden. Beinhaltet ein einfaches prozentuales Rastersystem.
Gitter
Grid ein einfaches und minimales Fluid-Grid-System, das in jede Flüssigkeit oder jeden festen Behälter fließen oder mit einem anderen Grid-System gut funktionieren kann.
520 Gitter
Ein Rastersystem zum Entwerfen von Facebook-Seiten, verrückt aber wahr.
Tools und Grid Builder
Gitterrechner
Ein wirklich großartiger Rasterrechner mit Unterstützung für Photoshop- und Illustrator-Vorlagen.
Gitterrechner und Generator
GridCalc ist ein einfach zu bedienender Grid-Rechner. Geben Sie einfach die gewünschte Breite Ihrer Seite und einen ungefähren Bereich für Ihre Spalten- und Rinnenbreite ein, und der Taschenrechner gibt Ihnen alle möglichen Kombinationen innerhalb der von Ihnen eingegebenen Grenzen.
GuideGuide
GuideGuide ist mein neues Lieblings-Photoshop-Plugin. Dieses kostenlose Tool platziert basierend auf Ihren Eingaben automatisch Hilfslinien in Ihrem Photoshop-Dokument.
3 × 4 Grid Builder
Mit Grid Builder können Sie ganz einfach ein HTML-Raster mit einem einfachen Ziehen erstellen
und Drop-Schnittstelle. Es ist ein wirklich interessantes Tool, mit dem Sie für jedes Projekt benutzerdefinierte Raster erstellen können.
Gridr Buildrrr
Ein super einfacher und effektiver Custom Grid Builder.
Boks
Ein wirklich großartiges und wenig geschätztes Tool, mit dem Sie benutzerdefinierte Implementierungen von Blueprint erstellen können. Schauen Sie sich hier mein Tutorial an.
Variables Rastersystem
Das variable Rastersystem ist eine schnelle Möglichkeit, ein zugrunde liegendes CSS-Raster für Ihre Site zu generieren. Die CSS-generierte Datei basiert auf dem 960 Grid System.
ZURB CSS Grid Builder
Ein großartiger Grid Builder, der ein wirklich einfaches Grid mit einem winzigen Platzbedarf erstellt.
Bratpfanne
Möchten Sie ein gitterbasiertes Design ohne Framework verwenden? Dieses Tool erstellt ein benutzerdefiniertes Hintergrundbild, mit dem Sie auf einfache Weise selbst ein Rasterlayout erstellen können.
Geben Sie einfach Ihre Abmessungen nach unserer URL ein, um ein Hintergrundbild zu erhalten, mit dem Sie in Ihrem Browser arbeiten können. Gitter werden im laufenden Betrieb erstellt, daher sollte jede Kombination funktionieren.
Gridulator
Ein weiteres Hintergrundbild-Tool wie Griddle. Der Hauptunterschied besteht darin, dass Griddle eine URL generiert, über die Sie vorbeischauen können. Dadurch erhalten Sie ein tatsächliches Bild (Griddle gefällt mir besser).
Grid Lover Sites und Must-Read-Artikel
Gitterbasiert
Eine Webdesign-Galerie voller großartiger Beispiele für gitterbasiertes Design.
Design von Grid
Eine weitere großartige Website für gitterbasierte Tools, Artikel und andere Ressourcen.
Das Grid-System
Ein One-Stop-Shop für alles, was mit Grid zu tun hat. Es ist eine alte Quelle, aber es sieht so aus, als würde sie immer noch regelmäßig aktualisiert.
Gitterbasiertes Design vereinfacht
Eine unschlagbare Einführung in gitterbasierte Designgrundlagen. Dies sollte der erste Schritt in Ihrer Rasterdesign-Suche sein.
Das 960 Grid System leicht gemacht
Eine vollständige Einführung für Anfänger in das 960-Rastersystem von Ihnen.
Entwerfen mit gitterbasiertem Ansatz
Ein älterer Artikel von Smashing Mag, aber es gibt immer noch jede Menge großartiger Ressourcen und Informationen zum Auschecken.
CSS-Grids neu denken
Mark Boulton erläutert, wie die native CSS-Unterstützung für Grids funktionieren sollte. Eine gute Lektüre!
Fazit
Ich hoffe, Ihnen hat diese riesige Sammlung gefallen und Sie verfügen über genügend gitterbasierte Designressourcen, um monatelang beschäftigt zu sein.
Hinterlassen Sie unten einen Kommentar und teilen Sie uns Ihre Meinung zu den oben genannten Tools und Ressourcen mit. Verwenden Sie Grid-Frameworks? Welche und warum?
