Wenn Sie Raster-basiertes Design lieben, ist dieser Artikel für Sie. Wir haben das Web durchforstet und alle wichtigen Ressourcen für das Grid zusammengestellt, die wir finden konnten. Wir haben die besten Frameworks, Grid Builder, Anleitungen und vieles mehr.
Beginnen Sie mit dem Durchsuchen und Lesezeichen!
Hate 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 geplatzt sind.
In Wahrheit ist gegen Gittergerüste viel zu sagen. Sie sind umständlich, haben eine Lernkurve und werfen oft Semantik aus dem Fenster. Darüber hinaus gibt es eine Million solcher Dinge, was es sogar schwierig macht, über Standardpraktiken zu diskutieren.
Wenn Sie in das Lager der CSS-Framework-Hasser geraten, müssen Sie sich keine Sorgen machen, da unten immer noch viele Ressourcen für das Gitterdesign vorhanden sind, die nichts mit Frameworks zu tun haben. In der Zwischenzeit finden Sie hier einige Alternativen zu Rasterfeldern.
Rollen Sie Ihre eigenen Raster-Layouts schnell
Ich habe kürzlich einen Artikel darüber veröffentlicht, wie Sie komplexe, mehrspaltige Layouts schnell und ohne komplizierte Frameworks oder nicht-semantische Klassennamen schnell und einfach erstellen können. Es ist so einfach, dass Sie nie wieder ein Framework für das Layout verwenden.
Gridless
Gridless ist eine optionale HTML5- und CSS3-Plattform für mobile, responsive, browserübergreifende Websites mit schöner Typografie. Es gibt keine vordefinierten Rastersysteme oder nicht-semantischen Klassen.
Stack-Layout
Komponentenbasiertes CSS-Layoutsystem mit flexibler Breite, das Inline-Block-Elemente stark beansprucht.
HTML5-Speicherplatte
HTML5 Boilerplate entwickelt sich schnell zum Standardansatz für moderne Webdesign-Projekte. Zuletzt habe ich überprüft, dass es alles enthält, was Sie unter Ausschluss eines Rastersystems wünschen könnten.
Old School Frameworks
Dies sind die Opa-Netze, die es schon seit Jahren gibt. Einige von ihnen fangen wirklich an, ihr Alter zu zeigen, so dass Sie sie heute vielleicht verwenden möchten oder nicht.
Entwurf
Blueprint ist ein CSS-Framework, das Ihre Entwicklungszeit reduzieren soll. Es bietet Ihnen eine solide Grundlage für die Erstellung Ihres Projekts mit einem benutzerfreundlichen Raster, sinnvoller Typografie, nützlichen Plugins und sogar einem Stylesheet zum Drucken.
960.gs
In 960.gs beginnen die meisten Benutzer, wenn sie in CSS-Frameworks und Rastersysteme einsteigen. Es ist immer noch sehr beliebt und viele der neueren Frameworks basieren zumindest teilweise auf der Arbeit hier.
Fluid 960-Rastersystem
Eine beliebte Variante von 960.gs mit einem fließenden Layout, das die Breite automatisch an die Browserfenstergröße anpasst.
YAML
Noch ein mehrspaltiges Layout? (YAML) ist ein (X) HTML / CSS-Framework zum Erstellen moderner und flexibler Float-Layouts. Die Struktur ist äußerst vielseitig in der Programmierung und für Endbenutzer absolut zugänglich.
Tolle neue (er) Frameworks
Perkins
Perkins kombiniert die glänzenden Neuerungen von HTML5 und CSS3 mit der beeindruckenden 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 verwendet eine Variante des 1-KB-Gitters.
Weniger Rahmen
Less Framework ist ein responsives CSS-Grid-System zur Gestaltung adaptiver Websites. Es enthält 4 Layouts und 3 Sätze von Typografievorgaben, 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 dieses etwas anderes nennen!
Säulenförmig
Ein responsives CSS-Grid-System, das Desktop- und Mobile-Browsern beim Zusammenspiel hilft. Columnal verwendet ein eigenes Hybridgittersystem, das von einigen anderen übernommen wird.
Skelett
Skeleton ist ein tolles responsives Framework, über das ich schon ein paar Mal geschrieben habe. Wenn Sie sich bezüglich der zusätzlichen Zeit und der Lernkurve, die für das responsive Design erforderlich sind, nicht sicher sind, sollten Sie dies überprüfen. Das Skelett ist lose auf 960.gs aufgebaut.
52Framework
Ein Framework, das HTML5, CSS3 und JavaScript verwendet, um die Kompatibilität moderner Webentwicklungsmethoden in allen gängigen Browsern zu maximieren. Es basiert auf einem einfachen 16-Spalten-Raster.
G5 Framework
(X) HTML5, CSS3, PHP & jQuery Front End Framework. Das G5 Framework begann als persönliches Projekt. In einem Versuch, den Arbeitsablauf zu beschleunigen, die besten Codierungsmethoden und ähnliche Codierungsverfahren wiederzuverwenden, dient das Framework als Startdatei für neue Websites.
Das Raster von G5 Framework basiert auf Easy Grid.
Einfaches prozentuales Rastersystem mit HTML5
Die Hauptmerkmale dieses Rastersystems sind, dass alle Spalten eine prozentuale Breite haben, sodass sie sich an das Containerelement anpassen. Das bedeutet, dass Sie mit diesem System nicht die Breite jeder Spalte manuell definieren müssen. Sie können sie einfach in einen beliebigen Container werfen und die Spaltenbreiten und Spaltenstege werden automatisch festgelegt.
Cabin CSS
CSS-Frameworks neigen dazu, sehr aufgebläht zu sein. 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 Grid-Erweiterungen unterstützt.
jQuery Maurerarbeit
jQuery Masonry ist eigentlich kein CSS-Framework, sondern ein JavaScript-Plugin, das gitterbasierte Designs ermöglicht, die eine Art vertikales Float-System verwenden. Es ist ein großartiges Werkzeug, das gerade jetzt sehr beliebt ist.
InuitCSS
Dieses Framework hat alles: Plugins progressive flexible mobile Tablets sinnvoll erweiterbar zugänglich pragmatisch funktional nützlich serienreif mehr Das Rastersystem wird an Ihre Bedürfnisse angepasst.
Kleine Footprint-Frameworks
1 Zeile CSS Grid Framework
Ich dachte, dass ein einzeiliges CSS-Grid 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 in sie eingefahren ist!
1 KB-Raster
Dies ist einer meiner alten Favoriten.Es ist ein Gittersystem, das auf das absolut Nötigste verzichtet ist. Es ist kein sechzigminütiges Durchlaufvideo erforderlich. Wenn Sie CSS-Rastersysteme nicht verstehen, beginnen Sie hier.
Tiny Fluid Grid
Genau wie das 1-KB-Gitter nur für zusätzlichen Spaß.
Slim CSS
SlimCSS ist ein leichtes CSS-Framework, das eine solide Cross-Browser-Basis mit vielen wichtigen Funktionen bietet und dabei so klein wie möglich bleibt.
Andere Frameworks
Schwere
Gravity ist ein auf SASS basierendes Framework, um leistungsstarke, leicht zu pflegende HTML5-Websites zu erstellen. Es hilft Ihnen, Ihre Ideen schnell zu prototypisieren und macht Ihr Leben im Allgemeinen einfacher.
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 dennoch sinnvoll ist.
Das quadratische Gitter
Ein einfaches CSS-Framework für Designer und Entwickler, das auf 35 Spalten gleicher Breite basiert. Es zielt darauf ab, die Entwicklungszeit zu reduzieren und Sie bei der Erstellung schön strukturierter Websites zu unterstützen.
Flüssigkeitsraster
Fluid Grid ist ein neues Gittersystem, das auf dieselbe Weise wie Blueprint oder 960 funktioniert, jedoch mit beliebiger Seitenbreite und sogar Fluidlayouts. Es basiert nur auf CSS.
EZ-CSS
EZ CSS ist eine völlig andere Art von Raster-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 bisschen schwierig, den Kopf zu wickeln, aber eine wirklich brillante Verwendung von CSS.
FEM-CSS-Framework
FEM CSS Framework ist ein 960px breites + 12 Spaltenrastersystem + häufige CSS-Stile zur einfachen und schnellen Entwicklung von Weblayouts.
Es basiert auf dem 960-Rastersystem, jedoch mit einer Wendung in der Philosophie, die es flexibler und schneller macht, mit Boxen zu spielen.
Elastisches CSS
Ein einfaches CSS-Framework zum Layout von webbasierten Schnittstellen, das auf den gedruckten Layouttechniken von 4 Spalten basiert, jedoch mit unbegrenzten Spaltenkombinationen. und die Fähigkeit, elastisches, festes und flüssiges Layout leicht herzustellen.
Atatonisches CSS
Dieser Rahmen ist hauptsächlich auf Typografie ausgerichtet, es gibt jedoch auch ein sehr leichtes Rastersystem.
Grundlinie
Baseline macht es leicht, eine Website mit einem angenehmen Raster und guter Typografie zu erstellen. Das Raster in Baseline besteht aus 4 Basisspalten. Für mehr Flexibilität kann jede Spalte in 2 Einheiten unterteilt werden.
Emastic
Ein leichtes Fluid-Raster-CSS-Framework mit Fokus auf Typografie.
Goldenes Gitter
Das Goldene Gitter ist ein Netzgittersystem. Es ist ein Produkt der Suche nach dem perfekten modernen Rastersystem. Es soll ein CSS-Tool für gridbasierte Websites sein.
Frak
Frak ist ein CSS-Framework zum Erstellen von Fluidnetzen. Es gibt ein interessantes Konzept, bei dem Multiplikatoren als Klassennamen verwendet werden.
Easy 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 das Einrichten der grundlegenden Master-HTML-Vorlage zu reduzieren, indem dieselben Codiertechniken verwendet werden. Beinhaltet ein einfaches prozentuales Rastersystem.
Gitter
Grid Ein einfaches und minimales Fluidgittersystem, 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 Gestalten von Facebook-Seiten, verrückt aber wahr.
Tools und Grid Builders
Grid-Rechner
Ein wirklich toller Grid-Rechner mit Photoshop- und Illustrator-Vorlagenunterstützung.
Netzrechner und Generator
GridCalc ist ein einfach zu bedienender Netzrechner. Geben Sie einfach die gewünschte Breite Ihrer Seite und einen ungefähren Bereich für Ihre Spalten- und Rinnenbreite ein. Der Rechner gibt Ihnen alle möglichen Kombinationen innerhalb der von Ihnen eingegebenen Grenzen.
GuideGuide
GuideGuide ist mein neues Lieblings-Photoshop-Plugin. Dieses kostenlose Tool fügt basierend auf Ihrer Eingabe automatisch Hilfslinien in Ihr Photoshop-Dokument ein.
3? 4 Grid Builder
Mit dem Grid Builder können Sie auf einfache Weise ein HTML-Raster mit einem einfachen Ziehen erstellen
und Drop-Schnittstelle. Es ist ein wirklich interessantes Werkzeug, mit dem Sie für jedes Projekt benutzerdefinierte Raster erstellen können.
Gridr Buildrrr
Ein supereinfacher und effektiver Custom-Grid-Builder.
Boks
Ein wirklich tolles und unterbewertetes Tool, mit dem Sie benutzerdefinierte Implementierungen von Blueprint erstellen können. Schauen Sie sich mein Tutorial hier an.
Variables Rastersystem
Das variable Rastersystem ist eine schnelle Methode zum Generieren eines zugrunde liegenden CSS-Rasters für Ihre Site. Die durch CSS generierte Datei basiert auf dem 960-Rastersystem.
ZURB CSS Grid Builder
Ein großartiger Gitterbauer, der ein wirklich einfaches Gitter mit einem kleinen Fußabdruck ausspült.
Bratpfanne
Möchten Sie ein gitterbasiertes Design ohne Rahmen verwenden? Mit diesem Werkzeug wird ein benutzerdefiniertes Hintergrundbild erstellt, mit dem Sie das Rasterlayout leicht selbst erstellen können.
Geben Sie einfach Ihre Maße nach unserer URL ein, um ein Hintergrundbild für die Arbeit in Ihrem Browser zu erhalten. Raster werden im laufenden Betrieb erstellt, daher sollte jede Kombination funktionieren.
Gridulator
Ein anderes Hintergrundbild-Tool wie Griddle. Der Hauptunterschied besteht darin, dass Griddle eine URL generiert, aus der Sie einen Link erstellen können. Dadurch erhalten Sie ein aktuelles Bild (ich mag Griddle besser).
Grid-Lover-Sites und Artikel zum Lesen
Netzbasiert
Eine Webdesign-Galerie mit tollen Beispielen für gitterbasiertes Design.
Design von Grid
Eine weitere großartige Website für gitterbasierte Tools, Artikel und andere Ressourcen.
Das Rastersystem
Alles aus einer Hand für alles rund um das Netz. Es ist eine alte Quelle, aber es sieht so aus, als ob sie regelmäßig aktualisiert wird.
Gitterbasiertes Design vereinfacht
Eine unschlagbare Grundierung auf gitterbasierten Design-Grundlagen. Dies sollte der erste Schritt in Ihrer Grid Design Quest sein.
Das 960-Rastersystem leicht gemacht
Eine komplette Einführung für Anfänger in das 960-Rastersystem von Ihnen.
Gestalten mit gitterbasiertem Ansatz
Ein älterer Smashing Mag-Artikel, der jedoch immer noch jede Menge Ressourcen und Informationen zur Verfügung hat.
CSS-Raster überdenken
Mark Boulton diskutiert, wie native CSS-Unterstützung für Grids funktionieren sollte. Eine großartige Lektüre!
Fazit
Ich hoffe, dass Ihnen diese riesige Sammlung gefallen hat und Sie über genügend netzbasierte Design-Ressourcen verfügen, um Sie monatelang zu beschäftigen.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie über die oben genannten Tools und Ressourcen denken. Verwenden Sie irgendwelche Raster-Frameworks? Welche und warum?