Das Website-Design nimmt sehr rasterartige Züge an. Unsere Module werden sich sehr sauber in einem Raster anordnen. Aber sind RASTER nicht komplex und seltsam? Und sollten wir vielleicht ein schickes Framework da draußen verwenden? Nee. Sie sind einfach. Wir richten in nur wenigen Minuten ein einfaches ein. Die hier wirkenden Konzepte inspirierten den Artikel „Grids nicht überdenken.“
Natürlich stoßen wir auf dem Weg auf ein paar Probleme (wie man das eben tut). In diesem Fall haben wir einen Attributselektor verwendet, der nicht wie gewünscht übereinstimmte.
Wir haben auch eine „Toolbox“-CSS-Datei eingerichtet, die generische, wiederverwendbare und irgendwie global nützliche Klassen enthalten wird. Die erste davon ist, wie immer, der Clearfix – ein Stück CSS, das wir auf Elternelemente anwenden können, die wir nicht zusammenfallen lassen wollen, weil ihre Kindelemente gefloatet sind. Wir laden diese Toolbox-CSS nicht als separate Datei, sondern @importieren sie in die globale.
Wir bringen das Grid zum Laufen, aber wir haben noch Arbeit vor uns, um die Module richtig darin zu platzieren und die Spaltenabstände einzurichten.
Ich werde nicht von Gridset bezahlt, um ihr Produkt zu bewerben, aber ich muss sagen, dass das Grid-Layout und die Fähigkeiten des Overlay-Skripts, Dinge straffer und responsiv auszurichten, einfach klasse sind.
Ich beginne gerne mit einer Zahl oder einem Objekt, das sich auf das Raster bezieht. Wenn Sie kein Objekt oder keine Zahl haben, erfinden Sie eine. 15px Spaltenabstände sind viel zu klein und 60px viel zu groß. Zwischen 30-40px fühlt sich genau richtig an – wie mein Porridge.
Schaut euch die Mark Boulton Videoserie über Grids an.
Deshalb rockt box-sizing: border-box; meine Welt. Ermöglicht prozentual basierte Grids, die nicht durch Hinzufügen von festen oder px-basierten Abständen ruiniert werden. Mein Leben war an diesem Tag vollständig.
Allerdings stimme ich Gridset nicht zu. Während ich es für eine nette GUI und eine clevere Idee halte, ist meine Sorge, dass es nicht gut ist, wenn durchschnittliche Leute oder Neulinge im Codieren nicht verstehen, wie die Grids funktionieren oder was sie beim Box-Modell beachten müssen.
Außerdem – ich habe vor einiger Zeit mein eigenes Grid-Framework erstellt, inspiriert vom 1140px Grid, aber ich benutze es wahrscheinlich nur 50% der Zeit, weil die Hälfte der Seiten in Bezug auf Layouts usw. ziemlich einzigartig ist.
Ich bin von Twitter Bootstrap zu Gridset gewechselt. Es ist so schön. Es gibt mir einfach ein Grid, und es ist, was immer ich will.
Für alle, die neu bei Gridset sind, stellt sicher, dass ihr Clearfix damit verwendet, das Chris erwähnt hat.
Schön, das ‚Grid nicht übertreiben‘ zu sehen… Ich hatte immer ein bisschen Angst vor all den Grid-Frameworks da draußen. Aber wow, wie einfach ist das!
Danke
Ich mag das Konzept der „Grids nicht überdenken“ sehr. Obwohl dies nur ein 10-minütiger Screencast ist, halte ich ihn für einen der nützlichsten.
Außerdem ist es großartig, dass Sie die Videos auf Vimeo hosten, sie laden jetzt für mich viel schneller.
Danke!
Ich liebe die bisherigen Screencasts, Kumpel, aber eine Frage: Wäre es nicht genauso einfach,
column-count,column-widthundcolumn-gapin CSS3 zu verwenden? Ein Beispiel wäre etwas wie das hier.oder verwende die Kurzform
und füge das zu einem
sectionhinzu? So macht der Browser die Arbeit für dich und es ist keine Mathematik erforderlich. Ich schätze, das wird in ltIE10 furchtbar fehlschlagen, aber was will man schon:)Wir verwenden CSS3-Spalten später in dieser Serie für die Galerie, schaut euch das also für ein Beispiel an, wie das funktioniert.
Ich betrachte CSS3-Spalten als für Text und einfache Inhalte, nicht wirklich für Layout. Zum Beispiel können Sie nicht einfach sagen: „Ich möchte, dass dieses Ding in der dritten Spalte ist“ – diese Wahl haben Sie nicht. Die Dinge fließen einfach in die dritte Spalte, wie es der Fluss vorgibt. Das wird für die meisten Designs nicht funktionieren.
Guter Punkt, nachdem ich ein wenig damit herumgespielt habe, stellte ich fest, dass sie etwas begrenzt sind und der Fluss einige Macken hat, wobei Ränder dort flossen, wo ich sie nicht haben wollte…
Danke Obi-Wan, dieser Padawan hat noch viel zu lernen.
Chris, großartige Videos!
Um ca. 4:31 schreiben Sie [class^=’grid-‘] { /* etwas Code*/}. Ich bin ein Neuling und habe das noch nie gesehen. Ist diese Art der Klassenauswahl etwas, das in Sass eingebaut ist? Meine begrenzte Erfahrung mit Code hat mich zu der Annahme geführt, dass diese Syntax nur zum Auswählen von _Attributen_ dient, die „beginnen mit“, „enthalten“, etc., im Gegensatz zur Auswahl von Elementen mit einem bestimmten Klassen- oder ID-Namen.
Danke!
[class^=’grid-‘] { /* etwas Code*/}
Dieser Selektor bedeutet auf Deutsch: „Wähle Elemente mit einem Klassenattribut aus, das mit ‚grid-‘ beginnt.“
Er hat die gleiche Spezifität wie ein Klassenselektor, also ist es nur eine Abkürzung, damit Sie nicht so etwas tun müssen wie
Sie können einfach tun
und beides erhalten, da beide gleich beginnen. Es _könnte_ aber übermäßig clever sein. Der aktuelle Chris ist eher geneigt, den tatsächlichen Klassennamen zu verwenden. Teilweise, weil es dann egal ist, wie Sie die Klassennamen auf dem Element ordnen, wie es der Fall ist, wenn Sie „beginnt mit“ verwenden. Sie könnten auch `*=` für im Grunde „enthält“ verwenden – aber auch das hat seine Schwächen.