Template:GLAMpage/Doku

GLAMpage Dokumentation

Unter Template: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 Dokumentationseiten wurde selbst mit dem Vorlagensatz erstellt.

Vorlagen-Systematik

Die Template:GLAMpage/top bzw. /bottom ist das wichtigste Vorlagen-Paar der Seite 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 einandere 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 Element 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 Template: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 derjeweiligen 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.

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 Navigationsstruktur in einer verschachtelten Liste im Punkt structure festgelegt. Hierbei k

{
    "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": "Template: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.