CSS-Layout-Frameworks sind sehr hilfreich, können jedoch ein Chaos sein. Sie müssen sich immer an das System einer anderen Person anpassen, unabhängig davon, ob es für Sie sinnvoll ist oder nicht.
Heute werden wir uns diese Vorstellung zunichte machen und ein ultraleichtes Framework entwickeln, das überall eingesetzt werden kann und unabhängig davon, wie Sie komplexe, mehrspaltige Layouts in Sekundenschnelle erreichen möchten. Sie bauen dieses Frankenstein Framework auf, so dass es keine ungenutzten Klassen gibt und absolut kein Code-Bloat. Habe ich schon erwähnt, dass es auch leicht ist, es ansprechbar zu machen? Lesen Sie weiter, um zu sehen, wie das Monster zum Leben erweckt wird.
WENIGER nicht weniger
Um Verwirrung zu vermeiden, sollte ich vorab sagen, dass wir LESS, die dynamische CSS-Sprache, verwenden werden, die nichts mit dem schlecht benannten Less Framework zu tun hat versuchen um uns zu verwirren?). Glücklicherweise wurde das Less-Framework neu gedacht und in Frameless umbenannt.
Auf der Suche nach dem perfekten Layoutsystem
Wie jeder treue Leser von Design Shack weiß, liebe ich CSS-Frameworks. Ich bin keinem Framework besonders treu und verwende normalerweise keine Projekte, ich mag es einfach, sie zu untersuchen, um zu sehen, wie sie funktionieren. Ich bin immer wieder fasziniert davon, wie man den CSS-basierten Layoutprozess manipuliert.
"Sie verwenden nicht einmal die Hälfte des Codes in einem Framework, aber Sie lassen es trotzdem dort, nur um sicher zu gehen, dass Sie nichts vermasseln."In den letzten ein oder zwei Jahren habe ich viel darüber nachgedacht, was ich in einem Layoutsystem will. Die Antworten sind ziemlich einfach, aber sie sind eine große Reihenfolge. Erstens möchte ich etwas, das eine sehr kleine Codebasis benötigt. Hügel und Hügel von nicht-semantischen, hässlichen Klassen tun für mich nicht viel. Ein vollständig manuelles Layout ist oft nicht so schwierig, dass ich das Hinzufügen aufgeblähter Layoutsysteme rechtfertigen kann, die niemand für die Mischung versteht.
Als Nächstes möchte ich etwas, das bei der Implementierung leicht anpassbar ist. Dies ist der schwierigste Teil, da CSS-Frameworks diese Art von Flexibilität normalerweise nicht bieten. Stattdessen erhalten Sie eine große Datei und eine Reihe von Klassennamen, mit denen Sie arbeiten müssen. Das Anpassen eines Teils kann Stunden dauern, um den Code zu sortieren, um sicherzustellen, dass Ihr Tweak nichts kaputt macht. Es ist oft so, dass Sie nicht einmal die Hälfte des Codes in einem Framework verwenden, aber Sie lassen ihn trotzdem dort, nur um sicher zu gehen, dass Sie nichts vermasseln.
Rollen Sie Ihre eigenen Netze
Vor kurzem bin ich meinem Traumlayout-System in meinem Artikel mit dem Titel "Rolling Your Own Grid Layouts on the Fly ohne Rahmen" ziemlich nahe gekommen. In diesem Artikel habe ich ein sehr einfaches System beschrieben, das ein kleines bisschen Code verwendet:
Durch die Verwendung von Prozentsätzen für Breite und Rand können wir sofort mehrspaltige Layouts ohne Flusen erstellen. Es gibt nur ein Problem mit dieser Methode: die Mathematik. Für ein gegebenes Layout müssen Sie manuell herausfinden, wie viel Prozent der Spaltenbreite und der Seitenrand verwendet werden sollen. Zuerst müssen Sie die Containerbreite durch die Anzahl der Spalten dividieren, dann müssen Sie den gewünschten einzelnen Spaltenrand mit der Anzahl der Spalten minus eins multiplizieren, diese Anzahl von der Gesamtbreite abziehen und dann erneut durch die Gesamtzahl der Spalten dividieren. Es ist eigentlich eine sehr einfache Mathematik, aber es klingt wie ein Albtraum, wenn Sie es erklären.
In diesem Artikel habe ich ein einfaches Werkzeug bereitgestellt, mit dem Sie die erforderlichen Werte berechnen können, indem Sie nur zwei Zahlen eingeben. Ich habe jedoch immer gewünscht, dass diese Funktion direkt im Code ausgeführt werden kann, sodass Sie einfach ein CSS einfügen können Ein Ausschnitt, der die Mathematik für Sie herausfindet. Leider ist CSS einfach nicht so toll. Oder ist es?
WENIGER: CSS mit Superkräften
Eine andere Sache, die mich schon seit einiger Zeit fasziniert, ist WENIGER. Ihre CSS-Supermächte wie Variablen, Mixins, Operationen usw. sind wirklich verfügbar. Mit der letzten Konvertierung in eine JavaScript-Bibliothek ist LESS während eines Testlaufs einfacher denn je zu implementieren (Sie können immer noch LESS.app verwenden, um das echte CSS zu kompilieren vor der Veröffentlichung).
Mit LESS Parametric Mixins können wir ein winziges Layout-System erstellen, das bei der Implementierung an Ihre Anforderungen angepasst werden kann.Es hat mich sehr gefreut, etwas weniger in mein Selbstbedienungsgittersystem einzufügen, weil ich wusste, dass dies letztendlich meine Vorstellung von CSS für uns möglich machen würde. Mit LESS Parametric Mixins können wir ein kleines Layout-System erstellen, das bei der Implementierung an Ihre Anforderungen angepasst werden kann.
Ich setzte mich schließlich hin und fand alles heraus. Ich bin ziemlich zufrieden mit den Ergebnissen. Heute zeige ich Ihnen, wie Sie Ihr eigenes einfaches, aber äußerst ausgefallenes (und sogar reaktionsfreudiges) Layout-Framework erstellen können.
Warnung: Sehr experimentell
Der Code, mit dem wir arbeiten werden, befindet sich noch in einem sehr rohen, frischen Zustand. Es ist möglicherweise nicht 100% ig perfekt und es wurde sicherlich nicht gründlich genug getestet, um Ihren Gehaltsscheck darauf zu setzen. Dieser Artikel dient als Konzeptnachweis für eine interessante Idee und nicht als Vorschlag, dass Sie dieses System plötzlich in Ihrer täglichen Arbeit einsetzen sollten. Davon abgesehen, macht es sehr viel Spaß und Sie möchten es auf jeden Fall ausprobieren.
Beachten Sie, dass das Lesen meines vorherigen Artikels über das Rolling Your Own Grids wesentlich zum Verständnis dieses Artikels beitragen wird. Sie benötigen auch ein grundlegendes Verständnis von LESS, da ich hier keine Zeit habe, es zu unterrichten.
Treffen Sie Frankenstein
Anstatt dieses Stück für Stück zu bauen, lass uns einfach auf die Jagd gehen und das fertige Produkt betrachten, oder? Hier ist das komplette LESS-powered Layout-System, das ich entwickelt habe. Es scheint wie ein Monster, aber keine Angst, es ist sehr freundlich.
Was zum Teufel?
Diejenigen, die mit LESS nicht vertraut sind, sollten an dieser Stelle ziemlich verwirrt sein. Diese sehen aus wie Klassen, aber sie enthalten wirklich merkwürdigen Code. Dies liegt daran, dass es sich nicht um Klassen handelt, sondern um weniger Parametric Mixins.
Ich habe jedes davon so entworfen, dass es wie eine Funktion funktioniert. Sie implementieren sie sehr ähnlich wie Sie eine JavaScript-Funktion implementieren und dabei benutzerdefinierte Werte übergeben. Ich werde kurz erklären, wie jeder arbeitet.
setColumnWidth
Wie ich oben bereits erwähnt habe, ist beim manuellen Einrichten von spaltenbasierten Layouts viel Rechenarbeit erforderlich. Diese Funktion automatisiert diese Aufgabe direkt in Ihrem CSS. Es ist ein ziemlich fantastischer Code, der die Erstellung von Spalten mit gleichem Abstand erheblich erschwert.
Die oberste Zeile enthält die zwei Werte, die Sie hier mit beliebigen Standardwerten eingeben können: @columns (Anzahl der Spalten) und @margin (Abstand) zwischen den Spalten. Wenn Sie nur diese beiden Zahlen eingeben, wenn Sie diese Funktion implementieren, werden alle Arten von erstaunlichen Kunststücken ausgeführt. Es führt automatisch eine Reihe mathematischer Schritte durch, um die Spaltenbreite und den Spaltenrand zu berechnen und festzulegen.
Die Implementierung dieser Funktion sieht folgendermaßen aus:
Dies setzt unsere Spaltenanzahl auf vier und unseren Spaltenrand auf 4%. Wie einfach ist das? Wenn Sie es erneut verwenden möchten, um eine Zeile mit 3 Spalten und einem Rand von 5% zu erstellen, geben Sie dies einfach in Folgendes ein:
setBigColumnWidth
Es ist schön zu behaupten, dass alle Layouts gleich große Spalten haben, aber das ist einfach nicht der Fall. Daher brauchen wir eine Möglichkeit, Spalten zu kombinieren. Im Grunde ist dies dasselbe wie bei der letzten Funktion. Lediglich die erweiterte Spaltengröße und der resultierende Rand werden ermittelt, wenn zwei oder mehr Spalten kombiniert werden.
Angenommen, wir möchten ein zweispaltiges Layout, aber eine der Spalten soll die Breite von drei einzelnen Spalten haben. Wir richten einfach ein vierspaltiges Layout ein und fügen dann den @combine-Wert von 3 hinzu, sodass unsere einzelne Spalte den Platz von drei Spalten einnehmen kann.
Alles zusammenfügen
Wenn du noch bei mir bist, großartig. Wenn Sie verloren sind, sollte dies hoffentlich alles ein bisschen klarer werden. Lassen Sie uns HTML einrichten, um zu sehen, wie alles funktioniert.
Der HTML-Code für ein vierspaltiges Setup
Um dieses System zu implementieren, können Sie Ihr Dokument grundsätzlich wie gewohnt markieren. Ich habe ein Hauptmenü eingerichtet. div und füge vier Platzhaltersäulen ein, jede mit einer besonderen Klasse. Da dieses System extrem flexibel ist und wie gewünscht funktioniert, Sie können Ihre Klassen und IDs beliebig benennen! Semantisch, nicht semantisch oder Ubbi Dubbi, es liegt an Ihnen.
Der wichtige Teil ist, dass jede Spalte eine Klasse erhält, die Sie anvisieren können, und die erste Spalte eine "erste" Spalte erhält. Klasse, so dass wir seinen linken Rand löschen können. Dies ist ein notwendiges Übel, wir könnten dies ohne Markup mit einem Pseudo-Selector bewältigen, aber die Browserunterstützung wäre scheiße, also ist dies wahrscheinlich ein besserer Weg.
Das CSS für ein vierspaltiges Setup
Zunächst müssen wir die Funktionen .setColumnWidth und .setBigColumnWidth in unser CSS kopieren und einfügen. Diese sind zu 100% wiederverwendbar und werden nur angezeigt Einmal in allen unseren CSS (oder genauer, WENIGER).
Danach müssen wir einige grundlegende Stile für unsere Haupt-ID festlegen. Da ich veranschaulichen möchte, wie dieses Framework reagieren kann, stelle ich die Breite in Prozent ein, wodurch Fließsäulen entstehen (verwenden Sie eine festgelegte Breite, wenn Sie keine Fließsäulen möchten).
Jetzt kommt der magische Teil, in dem wir ein mehrspaltiges Layout so einfach einrichten, dass Sie zum Weinen gebracht werden. Wir wissen, dass unser Inhalt vier Spalten hat, ich werde mit einer Marge von 4% werfen, und dies ist der Code, den wir brauchen!
Dies gibt uns ein perfektes, fließendes Layout mit vier Spalten und es waren nur wenige Codezeilen nötig!
Eine weitere Zeile hinzufügen
Lassen Sie uns fortfahren und unserem Layout eine weitere Zeile hinzufügen. Diesmal fügen wir eine Fußzeile mit zwei Spalten ein, von denen die erste eine große Spalte mit der Breite von drei einzelnen Spalten ist. Hier ist der HTML-Code (wenn Sie generische Klassennamen verwenden möchten, können Sie die zuvor erstellte einspaltige Klasse wiederverwenden).
Das CSS
Als erstes wollen wir in unserem CSS die generischen Stile für die Fußzeile festlegen. Dies ist dasselbe wie im Hauptabschnitt, sodass wir unseren Code einfach wie folgt aktualisieren können:
In ähnlicher Weise können wir einfach die footerColumn-Klasse zum Code für die mainColumn-Klasse hinzufügen (oder einfach einen generischen Namen für beide verwenden).
Schließlich haben wir unsere Klasse so eingerichtet, dass die ersten drei Spalten kombiniert werden.Wir verwenden immer noch das vierspaltige Layout und einen Rand von 4%. Wir verwenden jedoch einen @combine-Wert von drei, um die Breite der ersten drei Spalten zusammenzuführen.
Damit haben wir jetzt eine zweite Reihe, die wir praktisch ohne Aufwand komplett anpassen können. Wir mussten auch nicht aus siebenundvierzig voreingestellten Klassen wählen, wir haben uns auf dem Weg nur ein eigenes zusammengestellt!
Reaktionsfähig machen
Da das gesamte Gitter, das wir eingerichtet haben, fließend ist, reagiert es bereits gut auf unterschiedliche Fenstergrößen. Unglücklicherweise fängt das prozentuale Margin-System an, kleine Spalten auf recht kleinen Spalten zu erzeugen.
Die Behebung dieses Problems ist mit einer kleinen Abfragemagie sehr einfach. Sie können die Stile beliebig anpassen, damit sie für verschiedene Bildschirmgrößen am besten geeignet sind (alle unsere LESS-Funktionen funktionieren dennoch einwandfrei). Hier ist ein kurzes Beispiel, bei dem einfach alles in einer einzigen Spalte zusammengefasst wird, wenn der Wert unter 700px liegt.
Sehen Sie es in Aktion
Nun, da Sie wissen, wie es funktioniert, ist es Zeit, einen Blick zu werfen! Bitte beachten Sie noch einmal, dass dies eine sehr fortlaufende Idee ist. Wenn es also nicht in etwas funktioniert, das nicht Webkit oder Mozilla ist, bin ich nicht überrascht.
Demo: Klicken Sie hier oder auf das Bild unten, um zu starten. Stellen Sie sicher, dass Sie die Größe der Seite ändern und beobachten, wie sich das Layout an die Änderungen anpasst.
Warum ist es langsam?
Ich habe die LESS-Version absichtlich hochgeladen, damit Sie einen Überblick über das Geschehen erhalten können. Dies ist jedoch ziemlich träge und eigentlich nur für Testzwecke gedacht. Wenn Sie dies über die Datei LESS.app ausführen, erhalten Sie eine kompilierte Version, die aus rein altmodischem CSS besteht, und führt zu einer viel schnappenderen Seite.
Demo: Klicken Sie hier, um die kompilierte CSS-Version anzuzeigen.
Fazit
Ich bin wahrscheinlich nicht der erste, der versucht, LESS zu verwenden, um ein Layout-Framework zu erstellen (obwohl ich noch nie eines gesehen habe), aber ich habe versucht, in meinem Denkprozess hier völlig originell zu bleiben, und wollte etwas Neues bauen Überlegungen und Verwendung von mehrspaltigen Layouts in CSS.
Meine ausführliche Erklärung macht das kompliziert, aber in Wahrheit ist es ein sehr einfaches System, das nur zwei kurze vorgefertigte Mixins erfordert (die ich eher mit Funktionen eingerichtet habe), die Sie direkt in Ihren Code kopieren und einfügen können. Von da an erstellen Sie Ihre Seite, wie Sie möchten, indem Sie ein Mixin aufrufen, wann immer Sie es brauchen, und Ihre eigenen Werte einfügen.
Hinterlasse einen Kommentar und lass mich wissen, was du von meinem Frankenstein Framework hältst. Denken Sie, dass es den Layout-Prozess erfolgreich vereinfacht? Wie würdest du es ändern?