Das Erstellen von Gittern war vor dem Responsive Design mäßig kompliziert, heutzutage können sie geradezu einschüchternd sein. Wenn Sie in ein komplexes Layout eintauchen, können Sie sich leicht in all den Berechnungen und Prozentsätzen verlieren. Sicher, die Hardcore-Nerds unter uns lieben es, mit diesem Zeug zu spielen, aber einige Entwickler möchten einfach nur an die Arbeit gehen!
Heute werden wir uns ein fantastisches Rastersystem anschauen, mit dem Sie mit wenig Aufwand Ihre responsiven Raster einrichten können. Es ist semantisch, auf reaktionsschnelles Design ausgelegt, völlig flexibel für Ihre Arbeitsweise und wird von Sass unterstützt. Treffen Sie Zen Grids.
Sehen Sie es in Aktion
Wenn Sie einen Eindruck von dem erhalten möchten, was wir heute mit Zen Grids bauen, klicken Sie auf den Link unten.
Demo: Klicken Sie hier, um zu starten.
Was ist Zen Grids?
Ich weiß, was du denkst, ein anderes verrücktes Rastersystem! Zen Grids ist jedoch anders. Richtig, das sagen alle. Das hier ist wirklich einen Blick wert.
Es gibt viele Gründe, warum ich denke, dass Zen Grids ein wirklich großartiges Werkzeug ist, das Sie ausprobieren sollten. Hier einige davon:
Nichts von dem, was du hasst
Es gibt viele Gründe, Netzsysteme zu hassen. Hässliche, nicht semantische Klassennamen, eine Menge scheinbar überflüssiger, aber irgendwie notwendiger Divs; Die Liste geht weiter und weiter. Zen Grids hat nichts davon. Sie richten Ihr Dokument nach Ihren Wünschen ein und lassen sich perfekt in Ihren Arbeitsablauf integrieren.
Gebaut auf Sass
Ich weiß, dass dies für viele von Ihnen ein Nachteil ist, aber für mich ein solides Plus. Sass ist der Grund dafür, dass Zen Grids semantisch sein können. Die SCSS-Dateien kümmern sich um alle Berechnungen und ermöglichen es Ihnen, die Grid-Mixins anzuwenden, wann und wo immer Sie möchten.
Responsive freundlich
Technisch würde ich Zen Grids nicht als responsives Grid-System bezeichnen (obwohl es sich als solches rechnet), da es wirklich keine Medienabfrage-Funktionen enthält, die in der Art und Weise von Bootstrap eingebaut sind.
Ich würde es eine nennen Flüssigkeit Netzsystem, weil es auf Prozentsätzen basiert. Trotzdem ist es einfach genug, Zen Grids mit einigen Ihrer eigenen Medienanfragen zu verknüpfen und sie ansprechbar zu machen.
Einfach wie 1, 2, 3
Zen Grids ist sehr einfach zu bedienen. 1 Importanweisung, 2 Variablen und 3 Mixins. Dies ist alles, was Sie brauchen, um ein einfaches Layout zu erstellen. In meinen Experimenten habe ich das auf vier Mixins erhöht (Sie benötigen ein zusätzliches für das Schachteln), aber angesichts der Komplexität, die erreicht werden kann, ist dies nicht die Hälfte.
Bevor Sie beginnen
Ich werde eintauchen und Ihnen beibringen, wie man diesen Trottel benutzt, aber bevor wir uns darauf einlassen, ist ein wenig Setup nötig. Zunächst müssen Sie sicherstellen, dass Sass und Compass installiert sind.
Holen Sie sich Scout
Wenn Sie mit Ruby, Terminals und Shell-Skripts vertraut sind, sollte dies alles ziemlich unkompliziert sein. Für den Rest von uns empfehle ich, einfach Scout herunterzuladen und es einen Tag lang anzurufen. Scout ist kostenlos, Open Source und Cross-Plattform. Richten Sie es auf einen Ordner, der SCSS-Dateien enthält, und kompiliert diese automatisch in CSS. Codekit und LiveReload sind noch besser, aber sie kosten Sie.
Holen Sie sich Zen Grids
Sobald Sie Sass und Compass eingerichtet haben, holen Sie sich Zen Grids von GitHub. Laden Sie die ZIP-Datei herunter und werfen Sie alles außer den? Stylesheets? Mappe. Hier finden Sie die SCSS-Dateien, die Ihr Netz antreiben.
Fertig machen
Zu Beginn empfehle ich, in den Download zu graben und die "_grids.scss" -Datei zu finden. Datei. Nehmen Sie es heraus, legen Sie es in einem neuen Projektordner ab, erstellen Sie eine neue SCSS-Datei und importieren Sie sie.
Das ist es, jetzt können wir ein Gitter bauen!
Einen Container starten
Um ein neues Gitter zu beginnen, benötigen Sie eine Art Container. Ich halte dies für keinen Schmerz, da ich dies normalerweise auch ohne ein Netz von Fremdanbietern mache.
Hier habe ich ein div mit einer Klasse "Container" erstellt. Denken Sie jedoch daran, dass ich versprochen habe, dass Zen Grids in Ihren spezifischen Workflow integriert werden. Dies bedeutet, dass der Container beliebig sein kann. Verwenden Sie einen Abschnitt anstelle eines div, ändern Sie die Klasse in "main". verrückt werden. Es ist nicht wirklich wichtig!
Gehen Sie jetzt zu Ihrem SCSS und fügen Sie das ein Zen-Grid-Container Mixin mit Standard-Sass-Syntax.
Was bedeutet das, Zen Grids sagen, dass dieser Gegenstand ein Container werden soll. Wenn Sie gerade dabei sind, können Sie auch eine Breite festlegen und das div zentrieren.
Stellen Sie die Variablen ein
Jetzt ist es an der Zeit, die Variablen für die Spaltenanzahl und den Zwischensteg festzulegen. Ich mache das gerne in der Containerklasse, weil wir es später ändern werden und es einfacher ist, direkt auf diese Weise zu bleiben.
Zu Beginn einstellen Zen-Spaltenanzahl bis 3 und Zen-Rinnenbreite bis 10px. Offensichtlich ergibt sich daraus ein dreispaltiges Layout mit einer Rinne von 10px zwischen jeder Spalte.
Erstellen Sie einige Inhalte
Als Nächstes möchten wir einige HTML-Inhalte erstellen. Da wir gerade erst lernen, Zen Grids zu verwenden, werde ich hier als Beispiel einige generische Inhalte verwenden. Hier habe ich drei Divs erstellt, die jeweils einen einfachen Absatz enthalten:
Beachten Sie, dass diese Klassennamen völlig willkürlich sind und nur nummeriert sind, damit wir in den Beispielen alles nachverfolgen können. Sie können die von Ihnen gewählten Klassennamen völlig frei verwenden. Ihre sollten die üblichen semantischen Praktiken widerspiegeln.
Basic Block CSS
Wiederum, nur um der Demo willen, werde ich auf jeden von uns erstellten Inhaltsblock ein generisches Styling anwenden. Dies hilft uns zu sehen, was in jedem Block vor sich geht.
Den Inhalt fließen lassen
Wir haben drei Divs, mit denen wir arbeiten können, und wir haben bereits drei Spalten eingerichtet, also weisen wir jeder Spalte ein Div zu. Das erfordert das Zen-Grid-Element mixin. So wird es in unserem SCSS aussehen.
Was ist los mit dieser Syntax? Hier ist eine praktische Tabelle, die Ihnen helfen soll:
Wie Sie sehen, bestimmt die erste Zahl, wie viele Spalten das Element umfassen soll. Die zweite Zahl bestimmt die Position dieses Artikels. In unserem obigen Beispiel haben wir die drei Divs aufeinanderfolgend auf den Slots 1, 2 und 3 positioniert.
Dadurch wird ein einfaches, in Drittel geteiltes Raster erstellt, wobei jeder Inhaltsblock ein Drittel belegt:
Lassen Sie uns kompliziert werden
In Ordnung, jetzt kennen wir die Grundlagen, wie dieses Ding funktioniert, also springen wir in ein viel komplexeres Layout. Anstelle von drei Inhaltsblöcken werden wir acht haben. Wir werden verschiedene Container, neue Reihen und sogar einige Schachteln verwenden, um unseren Test bis an die Grenze zu bringen.
HTML
Dieses Mal werden wir ein großes Stück HTML einwerfen. Wir verwenden immer noch die gleichen Grundeinstellungen wie zuvor. Die einzige wirkliche Schwierigkeit besteht darin, dass Behälter sitzt tatsächlich in unserem anderen Behälter.
Damit die Inhaltsblöcke dieses Mal gut aussehen, verwenden wir das Styling, das wir verwenden werden:
Verschachtelung
Wie zuvor beginnen wir mit drei Inhaltsblöcken. Der knifflige Teil ist jedoch, dass der dritte Inhaltsblock tatsächlich ein eigener verschachtelter Container ist, der zwei andere Blöcke enthält. Das Einrichten ist eigentlich ganz einfach.
Gebrauch wie vorher Zen-Grid-Element (1, 3) auf dem? .geschachtelt? Klasse, aber auch enthalten zen-nested-container () um anzuzeigen, dass dies ein verschachtelter Container ist.
Kein Problem, richtig? Jetzt fügen wir die Blöcke drei und vier in den verschachtelten Container ein. Denken Sie daran, dass der verschachtelte Container auch drei Spalten enthält. Ich möchte, dass die Blöcke 3 und 4 jeweils drei Spalten aufnehmen (sie sind in voller Breite und aufeinander gestapelt).
Sehen Sie sich hier den Code für Block vier an. Als erstes benutzte ich die zen-clear () mixin. So erstellen Sie eine neue Zeile. Andernfalls würden Blöcke drei und Block vier dieselbe Stelle einnehmen.
Hier ist der Effekt, den dies auf unser Layout hat:
Nett! Genau das wollten wir erreichen. Unser Inhalt ist in drei Blöcke aufgeteilt, wobei der ganz rechte Block in zwei Unterblöcke aufgeteilt ist. Alles ohne ein bisschen Mathematik!
Das Gitter wechseln
Wir beenden hier mit der Codierung von container2. Dieser Container enthält vier Inhaltsblöcke, und ich möchte sie alle nebeneinander anordnen, aber unser Setup enthält nur drei Spalten. was jetzt?
Die Antwort ist natürlich, dass wir unsere Variablen zurücksetzen müssen, wenn wir den neuen Container einrichten. Ich war mir nicht sicher, ob Sass dies beim ersten Versuch richtig handhaben würde, aber es scheint perfekt zu funktionieren. Hier ist der Code:
Wie Sie sehen, haben wir dieses Mal vier Spalten und eine 10px-Dachrinne verwendet. Wir setzen dann jeden Inhaltsblock auf einen Schlitz in der Breite und positionieren ihn nacheinander über die Spalten.
Nun geht es los, ein anständig komplexes Layout mit nur wenigen einfach zu applizierenden Mixins. Für die Flexibilität, die dieses Tool bietet, ist es wirklich nicht viel einfacher als diese Leute.
Machen Sie es ansprechend
Bevor ich sagte, war es einfach, unser Netz ansprechbar zu machen. Bis jetzt ist es fließend, es wurde also die Größe der Witwe angepasst, aber es fließt nie zurück. Beheben wir das mit einer schnellen Medienabfrage:
Hier habe ich eine Medienabfrage für 700px erstellt und das Layout komplett umflossen, um das engere Ansichtsfenster unterzubringen. So wird es nach dem Haltepunkt aussehen.
Wie groß ist das? Wir haben gerade ein bemerkenswert komplexes, reaktionsfreudiges Layout ohne Mathematik erstellt und dabei nicht einschränkende, nicht semantische Klassennamen vermieden. Das ist eine ziemlich ernste Leistung.
Spickzettel
Wir haben oben einiges besprochen, also lassen Sie mich es in einem kleinen kleinen Spickzettel für Sie aufschlüsseln:
- Container setzen: @include Zen-Grid-Container
- Set verschachtelter Container: @include zen-nested-container ()
- Spaltenanzahl festlegen: $ zen-Spaltenanzahl: 2
- Rinnenbreite einstellen: $ zen-rinnenbreite: 10px
- Positionsspanne und Position einstellen: zen-grid-item (1, 1) einschließen
- Neue Reihe @include zen-clear ()
Was denkst du?
Das ist also das Zen Grids System. Ich persönlich denke, es ist ein wirklich hilfreiches kleines Gittersystem, das ziemlich gut funktioniert. Was denkst du? Würde Ihnen dies bei Ihrem responsiven Workflow viel Zeit und Mühe ersparen, oder würde dies unnötig kompliziert werden? Hinterlasse einen Kommentar und lass es mich wissen.