Vorlage:GLAMpage
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
.
Die Farben werden bisher wie folgt verwendet:
- Dokumentation: Farbschema pink #E4007E
- KulTour und Kulturbotschaft: Farbschema orange #FF8800
- GLAM on Tour: Farbschema yellow #F29F00
- GLAM digital: Farbschema green #0EA300
- GLAM im Alpenraum: Farbschema fordgreen #003300
- Treffen: Farbschema cyan #0088B9
- Kuwiki: Farbschema blue #1448A8
- Kooperationen, WiR: Farbschema violet #860070
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/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}}
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}}
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}}
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}}
Vorlagen
Hier eine Übersicht aller Untervorlagen und Stylsheets des GLAMpage-Paket:
- GLAMpage
- GLAMpage/Button
- GLAMpage/Circle/bottom
- GLAMpage/Circle/top
- GLAMpage/Circle/top-small
- GLAMpage/Column/bottom
- GLAMpage/Column/middle
- GLAMpage/Column/top
- GLAMpage/Doku
- GLAMpage/Doku/Demo/Basis
- GLAMpage/Doku/Demo/Home
- GLAMpage/Doku/Demo/Projekt
- GLAMpage/Doku/Demo/Text
- GLAMpage/Header/Slide
- GLAMpage/Header/Slide/bottom
- GLAMpage/Header/Slide/top
- GLAMpage/Header/Text
- GLAMpage/Header/bottom
- GLAMpage/Header/top
- GLAMpage/Infoline
- GLAMpage/Logo
- GLAMpage/Section/
- GLAMpage/Section/bottom
- GLAMpage/Section/middle
- GLAMpage/Section/top
- GLAMpage/TOC
- GLAMpage/bottom
- GLAMpage/config.json
- GLAMpage/styles-blue.css
- GLAMpage/styles-cyan.css
- GLAMpage/styles-fordgreen.css
- GLAMpage/styles-green.css
- GLAMpage/styles-orange.css
- GLAMpage/styles-pink.css
- GLAMpage/styles-violet.css
- GLAMpage/styles-yellow.css
- GLAMpage/test.css
- GLAMpage/top
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.