Wir fangen alle irgendwo an. Als neuer Designer hat mir die Struktur in meinen Designs nichts ausgemacht. Ich würde Photoshop öffnen und Pixel herumschieben, bis ich etwas gemacht habe, das mir cool erschien. Als ich zu programmieren lernte, war mein Prozess ähnlich zufällig.
Ich schaue nicht mit zu viel Vorliebe auf die alten Tage zurück. Meine Arbeit war schlampig und unkonzentriert. Ich hatte keine klaren Ziele. Als ein Anfang, ich nehme an, dass das nicht so schlecht ist, bedenkt man, dass die meisten meiner Design-Ausbildung von Photoshop Tutorials Websites kam, war meine Arbeit nicht schrecklich.
Aber dann habe ich etwas über Gittersysteme gelernt. Ich vergesse genau, wann und wie sie im Webdesign populär wurden, aber auf einmal war jede Webdesign-Seite voller Artikel über 960.gs oder irgendein anderes Grid-System. Die Wichtigkeit einer konsistenten visuellen Struktur in unseren Layouts wurde von allen großen Namen hervorgehoben und in einen Trend verwandelt.
Genauso schnell wurde der Trend zu einem Industriestandard, und jetzt denken die meisten von uns nicht darüber nach, ob wir ein Grid-System implementieren wollen oder nicht. Die einzige Frage ist, welche? Werden wir mit einem der großen Namen oder einer weniger bekannten Variante gehen oder sogar unsere eigene machen?
In diesem Artikel möchte ich einen Blick auf die zweite Option werfen: neue und weniger bekannte Grid-Systeme. Es gibt immer jemanden da draußen, der neue Wege zur Lösung der verschiedenen Probleme des Layouts findet, und ich denke, es ist wichtig, mit so vielen Ansätzen wie möglich vertraut zu sein, also lassen Sie uns einige grundlegende Grid-Frameworks betrachten.
34Gitter ist alles über die gleiche Spaltenverteilung. Es kann auch ungleichen Verteilungen Rechnung tragen, aber das ist nicht der primäre Zweck dieses Rastersystems. Für diejenigen von Ihnen, die die meisten oder alle Ihrer Seiten in horizontal gleiche Teile teilen möchten, ist dies Ihr Rahmen.
Wie es funktioniert
Das Framework ist so konzipiert, dass es an Ihre Bedürfnisse angepasst werden kann, sodass Sie nicht einfach nur herunterladen und loslegen müssen. Sie müssen Ihr Raster zuerst auf der Startseite des Projekts konfigurieren. Mithilfe eines Schnellformulars können Sie ermitteln, wie viele Spalten in eine Zeile passen, wie groß die Ränder sind und ob CSS3-Übergänge auf Ihre Spalten angewendet werden, wenn das Ansichtsfenster die Größe ändert.
Der Code selbst ist in zwei CSS-Dateien unterteilt: eine mit dem Basiscode und eine mit allen Medienabfragen. Die CSS-Klassen sind einfach. Wird '.col_1' auf eine Spalte angewendet, wird die Zeile zu 100% gefüllt. '.col_2' erstellt eine Spalte mit einer Breite von 50% und so weiter.
Darüber hinaus werden img Elemente, Objekte und einige andere automatisch in der Größe geändert. Es gibt eine zusätzliche Klasse, die Videoobjekten hilft, sich zu verhalten. Die Website des Projekts bietet Tipps, wie man Facebook und Twitter bettet, um gut zu spielen.
Nachteile
Es scheint keine Möglichkeit zu geben, Spalten zu verschachteln oder komplexere Spaltenanordnungen innerhalb einer einzelnen Zeile zu erstellen. Auf der anderen Seite, wenn Sie keine Komplexität benötigen und nur ein einfaches Framework möchten, das Sie jederzeit anpassen können, erledigt 34Grid die Aufgabe.
Einfaches Gitter ist eine reaktionsfähige Option, die bei einer Breite von 1140 Pixeln maximiert. Mit anderen Worten: Simple Grid ist zwar so konzipiert, dass es gut mit Tablets und Telefonen kompatibel ist, stellt jedoch sicher, dass größere Bildschirme nicht ausgelassen werden.
Wie es funktioniert
Wie der Name andeutet, ist dieses Rastersystem ziemlich leicht. Das Ganze kommt in einer vier Kilobyte unkomprimierten CSS-Datei.
Klassennamen sind so aufgebaut, dass sie leicht zu verstehen sind: '.col-2-6' unterteilt die Zeile in sechs Spalten und definiert die Spaltenbreite in zwei Spalten. Jede Zeile kann in eine Spalte, ".col-1-1", oder zwei, drei, vier usw. bis zu zwölf Spalten unterteilt werden.
Nachteile
Wie bei Grid scheint es keine Vorkehrungen für das Verschachteln von Spalten zu geben. Auch die Art und Weise, wie Ränder für die erste und letzte Spalte behandelt werden, kann beim Erstellen von beispielsweise einer Fotogalerie Schwierigkeiten verursachen.
Dieses ist für jeden, der ein einfaches Grid mit plain-englischen Klassennamen bevorzugt. Es ist ansprechend, leicht zu verstehen und schnell implementiert.
Wie es funktioniert
Nachdem die üblichen Elemente ".container" und ".grid" eingefügt wurden, werden die Spalten auf die altmodische Art und Weise implementiert. Eine Klasse ('.unit') wird verwendet, um die allgemeinen Attribute einer Spalte zu definieren, und eine andere Klasse wird verwendet, um die Breite zu definieren. Zeilen können in 2-5 Spalten aufgeteilt werden, und die Klassennamen sehen alle ungefähr so aus: '.eine-von-drei, .zwei-von-drei'.
Ebenfalls enthalten sind einige grundlegende typografische Stile.
Nachteile
Dies ist wiederum ein Grid-Framework, das für unkomplizierte Layouts gedacht ist, also keine Vorkehrungen für verschachtelte Spalten. Außerdem gibt es nur einen Unterbrechungspunkt, der auf eine Breite des Darstellungsbereichs von 650 Pixeln festgelegt ist, sodass einige Ihrer Spalten möglicherweise vorzeitig zu Ende gehen.
Matt (aka Segen ) ist ein bisschen wie ich. Er liebt Design, mag Mathematik aber nicht so sehr. Als Ergebnis seiner Proportionale Gitter scheinen endlose Berechnungen so weit wie möglich abzuschaffen, abhängig von der box-sizing Eigentum. Das Ergebnis ist ein komplettes, aber dennoch sehr leichtes Rastersystem, das Ihre Grundlagen für ein ansprechendes Layout abdeckt.
Wie es funktioniert
Wenn ich sage, dass dieses System davon abhängt box-sizing , Ich meine, dass Spalten prozentuale Breiten ohne Berücksichtigung von Rinnen gegeben sind. Rinnen mit fester Breite sind definiert durch padding ; und box-sizing stellt sicher, dass die Spalten gut zusammenspielen.
Stegbreiten und die meisten anderen Maße sind mit "ems" definiert. Getreu dem Namen dieses Gitters sind Spaltenklassen proportional (d. H. .col-one-third , .col-two-thirds ) und Säulen sind mehr oder weniger unendlich schachtelbar, was ich sehr mag.
Klassen sind enthalten, um die Spaltendimensionen an drei verschiedenen Haltepunkten zu ändern. Die Medienabfragen selbst sind in "Mobile-first" -Mode strukturiert, entsprechend den gängigen Praktiken.
Es gibt ein separates Stylesheet für Internet Explorer 8 und älter. Da IE8 Medienabfragen nicht unterstützt und ältere Versionen dies nicht unterstützen box-sizing Sie erhalten ein Layout mit fester Breite.
Ebenfalls enthalten sind SASS-Dateien (beides .sass- und .scss-Dateien) zur schnellen und einfachen Anpassung des Grid-Systems.
Nachteile
Es würde mir nichts ausmachen, mit mehr Spaltenbreiten zu arbeiten (Quinten, Sexten, Achteln). Ansonsten handelt es sich um ein weitgehend fehlerfreies und abgerundetes Rastersystem.
Von den fortgeschrittenen Grid-Systemen auf dieser Liste Ein% ist das einfachste, aber keineswegs unvollständig. Es ist entworfen, um etwas größere Bildschirme und große UI-Elemente unterzubringen, wenn seine Homepage irgendeine Anzeige ist.
Der Name kommt von der Tatsache, dass die Gitter- und Spaltenbreite so berechnet wird, dass sie immer 99% anstelle von 100% entspricht. Dies macht die Notwendigkeit für einige der komplexeren wiederholenden Dezimalzahlen und das Runden von Zahlen, zu denen Browser oft gezwungen sind, überflüssig.
Wie es funktioniert
Das Raster selbst ist in die klassischen zwölf Spalten unterteilt. Die Klassen sind einfach ( .onerow , .col1 , .col6 ), und ich mag, dass Sie meistens nur eine Klasse pro Spalte verwenden.
Zwei Haltepunkte sind standardmäßig enthalten: 768 Pixel und 1024 Pixel. Wenn ich ehrlich bin, scheint das erste ein bisschen ... groß zu sein ... aber du kannst immer einen weiteren Breakpoint hinzufügen, wenn du einen brauchst. Zwei Beispiele für die Breite des Desktop-Layouts sind ebenfalls verfügbar: 1000 Pixel und 1200 Pixel.
Auf der Projekthomepage können Sie Photoshop-Aktionsdateien und PSDs herunterladen, die sich für das Layout Ihrer Layouts mit diesem Rastersystem eignen.
Nachteile
Meine zwei großen Probleme sind hier die üblichen. Erstens: keine Nesting-Spalten. Nesting Spalten sind gut, Leute! Zweitens: Die letzte Spalte in jeder Zeile muss die haben .last Klasse angewendet auf es.
Ein browserübergreifendes CSS-Grid-Framework, das keine Pixel in den Rändern versteckt! Das ist der Slogan für Flurid, Und ein kurzer Blick in die Dokumentation verrät Ihnen, warum: Der Creator von Flurid möchte nicht, dass Ihr Layout bricht. Je.
Hier ist die Sache, wegen der Art und Weise, wie Subpixelrundung funktioniert, wird ein Browser gelegentlich "Schrauben" sagen und die letzte Spalte in die Zeile setzen, wo sie nicht hingehört. Flurid ist auf Stabilität ausgelegt, so dass Ihr Layout auch bei älteren Versionen von IE immer funktioniert. (Kompatibilität wird als IE5 + aufgeführt.)
Wie es funktioniert
Flurid verfügt über alle Funktionen, die Sie benötigen: reguläre Spalten, gemischte Spalten, verschachtelte Spalten und verschobene Spalten. Die Liste der möglichen Spaltenbreiten und Klassen ist umfangreich und ratio- nalbasiert, sodass Sie sich Zeit nehmen sollten, sich mit ihnen vertraut zu machen.
Eine einigermaßen vollständige Dokumentation wird über GitHub bereitgestellt, sowie ein jQuery-Plugin, das zusätzliche Funktionen hinzufügt - ja, es kommt mit seinem eigenen jQuery-Plugin, das Spalten mit gleicher Höhe bietet und abwechselnde Klassen für Ihr Styling-Vergnügen auf Ihre Spalten legen kann.
Nachteile
Es ist so nervtötend .last Klasse wieder. Nach der Dokumentation gibt es diesmal einen guten Grund.