Erstellen Sie moderne Layouts einfach mit dem Gridlex CSS-Rastersystem
Die Entwicklung des Frontends hat sich mit der Einführung von CSS-Flexbox. Das macht es viel einfacher Erstellen Sie Raster & Spalten das natürlich für responsive Layouts verschieben.
Anstatt Ihr eigenes Flexbox-Gitter von Grund auf neu zu codieren, ist die Verwendung eines Tools wie z. B. viel einfacher Gridlex. Diese kostenlose Open Source Flexbox-Bibliothek ist verfügbar super leicht und sehr einfach anzupassen.
Alles was Sie tun ist Fügen Sie das Gridlex-Stylesheet hinzu zu Ihrer Webseite und Arbeit mit seinen Gitterklassen. Interne Spalten nehmen eine Klasse .col und Sie wickeln all diese in ein .Gitter Container. Dies definiert jede Spalte bei gleicher Breite und schafft eine einheitliche Schnittstelle.
Diese Standardeinstellung kann überschrieben werden beim Hinzufügen Größenklassen zu jeder Spalte. Auf diese Weise können Sie eine Spalte mit 70% Breite und eine weitere Spalte mit 30% Breite haben (z. B. Inhalt / Seitenleiste)..
Sie finden Tonnen von Rasterproben auf der Gridlex-Homepage mit Live-Demos und Code Ausschnitte zum Kopieren / Einfügen in Ihre Site. Es ist eine riesige Bibliothek mit so vielen optionale Klassen um Ihnen beim Aufbau der einfachsten Raster für jede Website zu helfen.
Alle Raster addieren sich zu einem Insgesamt 12 Minisäulen, Sie können also festlegen, wie viel Platz jede Spalte beanspruchen soll. Dies mag verwirrend erscheinen, ist aber sinnvoll, wenn Sie die visuellen Demos sehen.
Hier ist ein Code-Beispiel Wird für ein größeres Gitter mit unterschiedlichen Breiten verwendet:
………
Notiere dass der .Gitter Klasse enthält alles und die Spalten versuchen es in 12 Teile aufgeteilt (Im Beispiel wäre dies jeweils ⅓ Breite). Die festen Spalten Spannweite 2 und 6 Cols jeweils die erste Spalte verwendet eine automatische Breite basierend auf was noch übrig ist.
Mit den beiden anderen Spalten können wir davon ausgehen, dass noch 4 Spalten (12-6-2) übrig sind traf insgesamt 12. Es ist alles sehr einfach, aber die Klassennamen können verwirrend sein. Sobald Sie in einem Projekt mit Gridlex spielen, können Sie das Benennungssystem schnell abrufen.
Gridlex ist derzeit in Version 2.x und sein ständig aktualisiert werden auf GitHub. Mit der zunehmenden Browserunterstützung würde ich mehr Aufmerksamkeit für Flexbox garantieren, wobei mehr Seiten dieses Modell für Seitengitter übernehmen.
Sie können sogar einen finden volle Galerie von Websites, auf denen Gridlex ausgeführt wird, um zu sehen, wie dies bei Live-Websites aussieht.
Wenn Sie Flexbox noch nie verwendet haben, kann Gridlex eine lustige Bibliothek sein, mit der Sie spielen können. Ich empfehle jedoch auch, zuerst mit Spaß-Flexbox-Spielen zu üben, um Ihr Wissen zu testen und die Grundlagen zu verstehen.
Gridlex ist kostenlos zur Verfügung im GitHub Repo oder Sie können es über npm oder Bower ziehen. Es bietet vollständige Dokumentation auf der Hauptseite, einschließlich Demos für Spalten mit unterschiedlicher Breite und Medienabfragen.
Du hast volle Kontrolle über das Flexbox-Design und nur nimmt ein paar CSS-Klassen es möglich machen! Und wenn Sie einmal eine kurze Frage haben oder eine mit Gridlex erstellte Site freigeben möchten, können Sie dem Ersteller Twitter @webdevlint mitteilen.
