Benutzerdefinierte Responsive Grids im Inhalt
Manchmal werden Sie benutzerdefinierte, responsive Inhalte innerhalb der Grenzen eines einfachen Inhaltsbereichs erstellen wollen. Zum Beispiel innerhalb eines Artikels / Beitrags auf Ihrer Website, im Gegensatz zu dynamisch durch einen Partikel erstellt zu werden.
Die Art und Weise, wie dies in Gantry 5 geschieht, ist viel einfacher als in Gantry 4. Gantry 5 kommt mit einem integrierten und leichten CSS-Framework, das wir Nucleus genannt haben. Nucleus legt den Schwerpunkt auf die Bereitstellung eines flexiblen Layouts. Das bedeutet, dass, wenn Sie nur ein paar Regeln beim Aufbau Ihres responsiven Layouts befolgen, Sie nie ein Problem haben werden, egal wie tief Ihr Layout auch sein wird.
Für Ihre Inhalte müssen Sie nur über 3 Arten von Klassen Bescheid wissen, die mit Nucleus geliefert werden:
g-grid
Dies ist der Container Ihrer Inhaltsumgebung und der nebeneinander liegenden Spalten. Ein Gitter (oder eine Reihe) nimmt immer vollständig den Platz ein, zu dem es hinzugefügt wurde. Betrachten Sie es als ein 100% breites div.
Ein g-grid kann nur g-block Elemente enthalten, sonst nichts. Dies ist wichtig, um das Flex-Grid responsiv arbeiten zu lassen.
g-block and size-%
Dies ist der Container Ihres aktuellen Inhalts. Ein g-block ist standardmäßig 100% breit und in ihn können Sie jeden gewünschten Inhalt einfügen, egal ob es sich um ein Bild, einen Absatz oder sogar ein anderes g-grid > g-block Layout handelt.
Wenn Ihr g-block von einer size-% Klasse begleitet wird, können Sie die Standardgröße von 100% ändern. Die Größen können von 5 bis 95 mit einem Multiplikator von 5 variieren.
Die verfügbaren benutzerdefinierten Breiten sind .size-5.size-10,.size-15,.size-20,.size-25,.size-30,.size-33,.size-40,.size-50,.size-60,.size-66,.size-70,.size-75,.size-80,.size-85,.size-90.size-95.
In der mobilen Ansicht werden diese Blöcke übereinander gestapelt, während in der Tablet- oder Desktopansicht diese Blöcke entsprechend skaliert werden.
Wenn Sie mehrere Blöcke in einem Raster haben, stellen Sie sicher, dass die Größe der Blöcke 100% beträgt.
Die Struktur wird immer die gleiche sein, zuerst ein Gitter (grid), dann ein Block (block), innerhalb des Blocks geht Ihr endgültiger Inhalt, der ein anderes Gitter (grid) und einen anderen Block (block) beinhalten könnte.
.g-grid
.g-block.size-50
[Ihr Inhalt für die linke Spalte]
.g-block.size-50
[Ihr Inhalt für die rechte Spalte]
Beispiel 1
In diesem Beispiel erstellen wir eine ein- bis vierspaltige Preistabelle.
Beispiel 2
Dies ist ein einfaches Beispiel für eine ein- und vierspaltige Darstellung von abwechselnden Textinhalten und Bildern.
Die in unseren Beispielen verwendeten Bilder basieren auf Bildern, die in der Standard Joomla-Installation erscheinen. Ihre spezielle CMS / Installation kann variieren. Alle Bildverknüpfungen sollten durch solche ersetzt werden, die Ihre eigenen Dateien widerspiegeln.
Anhand dieser Bilder können Sie sehen, wie g-grid und g-block Referenzen verwendet werden. Grids bilden horizontale Räume und Blöcke sind Spalteninhalte innerhalb des Grids. Größenvariablen size-25 bestimmen, wie viel Prozent der Breite jeder Block einnimmt. So würden Sie beispielsweise einen Block der size-75 mit einer size-25 koppeln, um einen horizontalen Raum mit einer großen linken Spalte und einer kleineren rechten Spalte zu schaffen.