Vorlage:GLAMpage

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

GLAMpage Dokumentation

Unter Vorlage:GLAMpage findet man einen Satz von Vorlagen, die einen vereinfachten Zusammenbau und ein durchgängiges Erscheinungsbild der GLAM-Seiten ermöglichen sollen. Auf der vorliegenden Seite finden sich Informationen dazu, wie man diese Vorlagen verwendet.

Diese Dokumentationseite wurde selbst mit dem Vorlagensatz erstellt.

Vorlagen-Systematik

Die Vorlage:GLAMpage/top bzw. /bottom ist das wichtigste Vorlagen-Paar der Seite, weil Sie das Stylesheet einbindet und so das Aussehen steuert. Hier kann auch über einen Parameter color=orange die Farbigkeit der jeweiligen Unterseite eingestellt werden. 

{{GLAMpage/top}}

..Alle Inhalte..

{{GLAMpage/bottom}}

Die meisten Vorlagen diese Pakets bestehen aus einem Paar aus einer /top- und einer /bottom-Untervorlage, mit der die Inhalten umschlossen und gegliedert werden können. Diese Untervorlagen müssen immer zusammen verwendet werden. D. h. jeder geöffnete Block muss auch wieder geschlossen werden – sonst gerät die Struktur durcheinander. 

{{GLAMpage/Section/top}}

  {{GLAMpage/Column/top}}
  {{GLAMpage/Column/bottom}}

  {{GLAMpage/Column/top}}
  {{GLAMpage/Column/bottom}}

{{GLAMpage/Section/bottom}}

Auf einander folgende /bottom- und /top-Bausteine können i.d.R. durch einen oder mehrere /middle-Baustein ersetzt werden, der dieselben Parameter akzeptiert: 

{{GLAMpage/Section/top}}

  {{GLAMpage/Column/top}}
  {{GLAMpage/Column/middle}}
  {{GLAMpage/Column/bottom}}

{{GLAMpage/Section/bottom}}

Das Aussehen und die Anordnung der Elemente lässt sich mit Hilfe von CSS-Klassen steuern, die über die Parameter classes (für die äußeren HTML-Elemente) und innerclasses (für die inneren) gesteuert werden können. Im Beispiel sorgt bg-grey für einen grauen Hintergrund der ganzen Section und wide dafür dass ihr Inhalt über die volle Breite gezogen wird. 

{{GLAMpage/Section/top
 |classes=bg-grey
 |innerclasses=wide}}
...

Farben

Es gibt die GLAMpage in verschiedenen Farbversionen. Diese können über den Parameter color in der Vorlage {{GLAMpage:top}} festgelegt werden. 

{{GLAMpage/top|color=cyan}}
...

Zu jeder Farbe gibt es eine CSS-Klasse c-pink, mit der man die Textfarbe, bzw. bg-pink, mit der die Hintergrundfarbe zuweisen kann. Die Hauptfarbe der jeweiligen Seite erhält man mittels c-primary bzw. bg-primary.

Mehrspaltigkeit

Eine responsive mehrspaltige Darstellung lässt sich mit Hilfe verschiedener glam-grid--CSS-Klassen erzeugen. Diese müssen als Parameter innerclasses an {{GLAMpage/Section/top}} bzw. {{GLAMpage/Section/middle}} übergeben werden. Die Mehrspaltigkeit wirkt sich auf die direkten Unterelemente dieser Vorlagen aus, egal ob diese nun mit {{GLAMpage/Column/top}} oder <div> oder irgendeiner anderen Vorlage erzeugt werden.

Volle Breite

{{GLAMpage/Section/top}}
Hauptspalte
{{GLAMpage/Section/bottom}}
Hauptspalte

Hauptspalte/Marginalspalte

{{GLAMpage/Section/top|innerclasses=glam-grid-marginal}}
{{GLAMpage/Column/top}}Hauptspalte{{GLAMpage/Column/bottom}}
{{GLAMpage/Column/top}}Marginalspalte{{GLAMpage/Column/bottom}}
{{GLAMpage/Section/bottom}}
Hauptspalte
Marginalspalte

Zweispaltigkeit

{{GLAMpage/Section/top|innerclasses=glam-grid-2}}
{{GLAMpage/Column/top}}Spalte 1{{GLAMpage/Column/bottom}}
{{GLAMpage/Column/top}}Spalte 2{{GLAMpage/Column/bottom}}
{{GLAMpage/Section/bottom}}
Spalte 1
Spalte 2

Dreisspaltigkeit

{{GLAMpage/Section/top|innerclasses=glam-grid-3}}
{{GLAMpage/Column/top}}Spalte 1{{GLAMpage/Column/bottom}}
{{GLAMpage/Column/top}}Spalte 2{{GLAMpage/Column/bottom}}
{{GLAMpage/Column/top}}Spalte 3{{GLAMpage/Column/bottom}}
{{GLAMpage/Section/bottom}}
Spalte 1
Spalte 2
Spalte 3

Vierspaltigkeit

{{GLAMpage/Section/top|innerclasses=glam-grid-4}}
{{GLAMpage/Column/top}}Spalte 1{{GLAMpage/Column/bottom}}
{{GLAMpage/Column/top}}Spalte 2{{GLAMpage/Column/bottom}}
{{GLAMpage/Column/top}}Spalte 3{{GLAMpage/Column/bottom}}
{{GLAMpage/Column/top}}Spalte 4{{GLAMpage/Column/bottom}}
{{GLAMpage/Section/bottom}}
Spalte 1
Spalte 2
Spalte 3
Spalte 4

Vorlagen

Hier eine Übersicht aller Untervorlagen und Stylsheets des GLAMpage-Paket:

Der Quelltext der Vorlagen wird auf github.com/martinkraft/GLAMpage versioniert. Alle Änderungen an den Vorlagen sollten dort commitet werden. Die CSS-Dateien wurden via Sass generiert und sollten ausschließlich auf diesem Wege bearbeitet werden.

Header

Navigation

Die Navigation der Seite wird zentral in einem JSON-Datei gesteuert. Dabei wird die config.json im Vorlagen-Ordner verwendet, es sei denn es wird explizit eine andere Datei angegeben, die dann einen neuen Navigationsbaum erzeugt: 

{{GLAMpage/top}}
{{GLAMpage/Header/top|config=irgend-eine-andere-config.json}}

In der JSON-Datei wird die Navigationsstruktur in einer verschachtelten Liste im Punkt structure festgelegt. Hierbei ... 

{
    "structure": [{
            "name": "Seitenname der Hauptseite",
            "page": "Link auf dem Logo",
            "lang": "de",
            "id": "home",
            "children": [{
                    "name": "Label das grau in der Seite angezeigt wird"
                }, {
                    "name": "Seitenname in der Navi",
                    "page": "Wikipedia:Link_auf_die_Seite",
                    "pageAliases": ["alternative", "Seitentitel", "mit gleichem Inhalt"]
                }, {
                    "hidden": true,
                    "name": "Wird nur angezeigt, wenn man sich in diesem Bereich befindet",
                    "page": "Vorlage:GLAMpage/Doku"
                }
            ]
        }
    ]
}

Text-Header

Noch zu schreiben.

Header-Slideshow

Noch zu schreiben.

Fehler vermeiden

Auf Grund der Struktur muss man etwas vorsichtig sein, dass man keine <div> offen lässt oder zu früh schließt. Insbesondere sollte man folgendes nicht tun:

  • Soweit wie möglich auf Inline-Styles style="color:#00FF00" verzichten.
  • Keine festen Pixel-Angaben 40px. Das Layout ist dynamisch und darf nicht zu so fixen Breiten aufgedrückt werden.
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Vorlage:GLAMpage&oldid=214063133“