In der Vergangenheit haben wir uns einige CSS-Rastersysteme angesehen. Wir haben auch besprochen, wie LESS.js die Gestaltung Ihrer Webseiten flexibler gestalten kann. Heute werden wir diese beiden Ideen kombinieren und ein Rastersystem schaffen, das LESS verwendet.
Lesen Sie weiter, um zu sehen, warum wir auf der Erde so etwas tun würden. Wenn Sie das Konzept verstehen, können Sie auch das Tutorial überspringen und direkt zum Download gehen. Lass uns anfangen.
Demo und Download
Fühlen Sie sich frei, die Dateien herunterzuladen und sie nach Ihren Wünschen zu ändern. Vergessen Sie nicht, Ihre LESS-Datei in eine CSS-Datei zu kompilieren, bevor Sie das Framework tatsächlich auf einer Live-Site verwenden.
Beispiel ansehen
LESS CSS Grid herunterladen
Warum weniger?
Viele von Ihnen fragen sich zweifellos, warum jemand ein CSS-Framework mit LESS kombiniert. Hier haben wir zwei separate und gleichermaßen verwirrende Tools, die die Hälfte der Entwicklerfirma entweder hasst oder nicht versteht, und ich beschließe, sie zusammenzulegen, um ein riesiges verwirrendes Durcheinander zu schaffen !? Dies wird sicherlich einen Aufstand bedeuten.
Trotz der Tatsache, dass viele Entwickler ein solches Werkzeug niemals verwenden würden, ist ein LESS-angetriebenes Rastersystem sehr sinnvoll. Derzeit sind Rastersysteme ziemlich starr. In der Regel wählen Sie zwischen verschiedenen Downloads oder verwenden einen Online-Grid-Builder, um Ihre Optionen zu optimieren. Sobald Sie den Download jedoch bereits erhalten haben, kann es sehr schwierig sein, die Funktionsweise des Rasters zu optimieren.
Da Sie mit LESS Variablen in Ihr CSS einfügen können, können Sie damit ein Framework erstellen, das während der Entwicklungsphase leicht anpassbar ist. Das Ziel besteht darin, etwas zu erstellen, das mit sehr geringem Aufwand benutzerdefinierte Rasterbreiten ermöglicht.
Das Gittersystem, das wir heute erstellen werden, konzentriert sich auf zwei Variablen, die in jedem anderen System zu sehen sind: Spaltenbreite und Rinnenbreite. Zusammen bilden diese beiden die Grundlage für das Gesamtbild des Gitters und sind in der Tat eine Hauptquelle für viele Argumente. Wenn sich Entwickler nicht entscheiden können, welche Breiten die Spalten und Zwischenrinnen haben sollen, lassen Sie es uns offen, damit jeder Entwickler pro Projekt entscheiden kann.
In der Praxis bedeutet dies, dass Sie dasselbe Rastersystem für 10 verschiedene Projekte verwenden und 10 sehr unterschiedliche Ergebnisse erzielen können. Dies trägt wesentlich dazu bei, die starre Struktur, die Ihren Konstruktionen durch ein bestimmtes Rastersystem auferlegt wird, zu verringern.
Am Ende sollten wir ein System haben, mit dem der Entwickler eine benutzerdefinierte Spaltenbreite und Rinnenbreite auswählen kann, die den gesamten Ablauf des Layouts ändert, indem nur zwei Zahlen in unserem CSS geändert werden.
Bin ich die erste Person, die dies versucht?
Um ehrlich zu sein, bin ich wahrscheinlich nicht die erste Person, die LESS mit einem CSS-Framework kombiniert. Es ist jedoch immer noch eine großartige Lernerfahrung, die Ihnen letztendlich ein besseres Verständnis darüber vermittelt, wie beide Tools funktionieren.
Erste Schritte: Das 1-KB-Raster
Anstatt das gesamte Projekt von Grund auf neu zu erstellen, entschied ich mich, ein vorhandenes Rastersystem zu finden und es an LESS anzupassen. Dies funktioniert mit jedem System, aber in diesem Tutorial habe ich der Einfachheit halber das 1Kb CSS Grid gewählt.
Der Grund, warum ich dieses System gewählt habe, ist offensichtlich: seine Größe. 960 GS und Blueprint CSS sind in Ordnung und Dandy, aber ziemlich unhandlich und würden viel länger brauchen, um LESS zu integrieren. Mit dem 1-Kb-Raster können wir alle CSS auf einen Blick betrachten und die Änderungen ohne zu viel anstrengende Erklärung verstehen.
Hier ist das gesamte CSS für das 1-KB-Raster mit 960 Pixel Breite, 12 Spalten und einer Rinnenbreite von 20 Pixel (10 Pixel auf jeder Seite).
Das ist alles dazu! Ich liebe die Einfachheit kleinerer Rastersysteme ohne all die zusätzlichen Fluffeffekte wie CSS-Resets, Textstile und dergleichen. Dies ist der perfekte Ausgangspunkt für unser LESS-Experiment.
Mit WENIGER arbeiten
Wenn Sie eine LESS.js-Auffrischung benötigen, lesen Sie unser aktuelles Tutorial. Sie müssen ein grundlegendes Verständnis von LESS haben und wissen, wie Sie damit arbeiten können, um fortfahren zu können. Für diejenigen unter Ihnen, die es zumindest zuvor gesehen haben, erkläre ich kurz, was Sie wissen müssen.
Verwenden Sie .LESS nicht .CSS
Die von Ihnen erstellte CSS-Datei sollte die Erweiterung .LESS anstelle der typischen .CSS-Datei haben. Denken Sie daran, im Kopfbereich Ihres HTML-Codes einen Link zu dieser Datei zu erstellen.
Außerdem müssen Sie einen Link zur LESS JavaScript-Datei einfügen. Kopieren Sie einfach die beiden folgenden Zeilen und fügen Sie sie ein:
Wenn Sie fertig sind, möchten Sie Ihre .LESS-Datei in eine .CSS-Datei kompilieren. Das hört sich kompliziert an, ist aber mit Less.app ein vollständig automatisierter Prozess.
Variablen deklarieren
In LESS werden Variablen mit dem Zeichen? @? Symbol. Genau wie in JavaScript können Sie mathematische Operationen für Ihre Variablen auf verschiedene Weise ausführen.
Sie können Variablen an einer beliebigen Stelle einfügen, an der Sie normalerweise den darin enthaltenen Wert platzieren würden.
Die Mathematik
Bevor wir mit der Modifizierung des 1-KB-Gitters beginnen, müssen wir verstehen, wie es funktioniert. In unserer aktuellen Version gibt es 12 Säulen mit jeweils einer Breite von 60px und einer Rinne von 10px auf der linken und rechten Seite.
Es ist ein bisschen verwirrend, aber irgendwie muss das alles insgesamt 960px breit sein. Glücklicherweise gibt es ein tolles und kostenloses Online-Tool, das uns dabei helfen kann, die komplizierte Mathematik herauszufinden: Instacalc.
Treffen Sie Instacalc
Instacalc ist ein großartiger Online-Rechner, der sich perfekt für Programmierer eignet, nicht nur wegen der sofortigen Aktualisierung der Ergebnisse, sondern auch, weil Sie damit Variablen verwenden können und leicht feststellen können, ob Ihre Mathematik so arbeitet, wie Sie es möchten.
Im Folgenden habe ich Instacalc verwendet, um die Variablen darzustellen, die wir in unserer LESS-Datei benötigen, indem wir mit den Standard-1-KB-Nummern beginnen. Denken Sie daran, dass wir möchten, dass das gesamte System an zwei Werten hängt, sodass das Anpassen nur eine Sekunde dauert.
Selbst in dieser Form mag die Mathematik etwas verwirrend sein, ist aber eigentlich ganz einfach. Zuerst setzen wir die Breite unserer Säulen auf 60 und die Breite unserer Dachrinne auf 10. Dann addieren wir einfach die Breite aller zwölf Säulen plus die gesamte Dachrinnenbreite (wir verdoppeln die Rinnenbreite, da sie auf jeder Seite jeder Spalte erscheint) Säule). Wie Sie sehen, landen wir schließlich bei 960 und zeigen damit an, dass wir alles richtig gemacht haben.
Wie Sie in der Abbildung unten sehen können, können wir nun die ersten beiden Werte beliebig ändern und die übrigen werden automatisch aktualisiert. Unser System mit variabler Breite ist in Betrieb!
Die Variablen deklarieren
Nun, da wir die Variablen und die Mathematik an einem Ort ausgearbeitet haben, an dem wir sehen können, wie sie funktionieren, ist es Zeit, sie in unser LESS CSS einzubinden. Fügen Sie den folgenden Ausschnitt oben in Ihre LESS-Datei ein.
Wie Sie sehen, haben wir dies mit Instacalc getan. Unsere Säulenbreite wurde auf 60px eingestellt, unsere Dachrinne beträgt 10px (was zu einer 20px-Dachrinne führt) und unsere Gesamtbreite entspricht der Breite der Dachrinnen plus der Breite der Säulen.
Alles, was wir tun müssen, wenn wir das Framework ändern möchten, ist, neue Werte für die ersten beiden Variablen einzugeben. Der Rest des Frameworks wird automatisch aktualisiert, je nachdem, was wir als Nächstes tun.
Erstellen der Grid-Klassen
Im nächsten Schritt fügen Sie die soeben erstellten Variablen in die Klassen des 1-KB-Gitters ein. Hier ist der Originalcode:
Um dies zu ändern, beginnen wir einfach. Die Klassenbreite von grid_1 wird einfach auf die Variable columnWidth gesetzt. Die Klasse grid_2 ist doppelt so breit und enthält jetzt zusätzlichen Zwischenraum für die neue Spalte. Diese Beträge nehmen mit zunehmender Entfernung einfach zu: Der Spaltenbreitenmultiplikator erhöht sich jedes Mal um eins und der Rinnenbreitenmultiplikator erhöht sich jedes Mal um zwei.
Nun, das funktioniert so wie es ist, aber wenn Sie die Dinge weiter vereinfachen möchten, können Sie ein Mixin verwenden, um all den chaotischen Code zu verarbeiten. Das ist meiner Meinung nach viel sauberer:
Finalisieren Sie das CSS
Um das CSS abzuschließen, müssen wir die Rinnenvariable in den Spaltenbreite- und geschachtelten Zeilenabschnitt und die totalWidth-Variable in die Zeilenklasse einfügen. Denken Sie daran, dass der Zweck der Übung darin besteht, diese statischen Zahlen durch Variablen zu ersetzen, die bei jeder Änderung der Spalten- und Rinnenbreite automatisch aktualisiert werden.
Das ist es! Wir sind vollständig fertig mit dem Rahmen.
Alles zusammenfügen
Nachdem wir nun alle Schritte erklärt haben, ist hier die fertige LESS-Datei in einem Schuss:
Wir können dies direkt in das Beispiel-HTML-Dokument einfügen, das mit dem 1-KB-Raster geliefert wird, um zu sehen, ob alles ordnungsgemäß funktioniert.
Vorschau
Wenn Sie dies im Browser in der Vorschau anzeigen, sollte es einwandfrei funktionieren.
Passen Sie nun die ersten beiden Variablen im Code an das gewünschte Element an und überprüfen Sie das Ergebnis. Zum Beispiel können wir die Spaltenbreite auf 80 und die Dachrinne auf 50 ändern, um einen breiteren Inhaltsbereich mit weniger Leerzeichen zu erhalten.
Fazit
Und da haben Sie es, ein flexibles Rastersystem, das durch Ersetzen von nur zwei Werten auf jede Breite und Rinnengröße geändert werden kann. Das kratzt hier nur an der Oberfläche des Potentials. Sie können diese Prinzipien auf alle Ihre Lieblings-Frameworks anwenden.
Hinterlassen Sie unten einen Kommentar und teilen Sie uns mit, wie Sie das LESS CSS Grid ändern und verbessern könnten. Teilen Sie uns auch mit, wenn Sie das Konzept erweitern und etwas Cooles damit machen!