Projekt:Gitter

Diese Anleitung ist aus dem Stadtwiki Lünepedia übernommen, weshalb sich die Beispiele auf Lüneburg beziehen. Die Funktionen sind jedoch dieselben.

Die Verwendung eines oder mehrerer Gitter in einem Wiki-Artikel ermöglicht es, die Bildschirmfläche in beliebig viele Abschnitte zu unterteilen. So können die Text- beziehungsweise Medieninhalte übersichtlich und ästhetisch strukturiert werden. Jede der Spalten kann eine Überschrift haben, gegebenenfalls auch mit einem Icon. Der Inhalt einer Gitterspalte mit allen verfügbaren Wiki-Inhalten gefüllt werden, also neben normalem Text und Links auch mit Bildern, Videos und Karten oder sogar weiteren Gittern und Tabs. Dabei lässt sich genau festlegen, wie die Unterteilung auf kleinen Bildschirmen, also auf Tablets und Smartphones, aussehen soll.

Der einfachste Weg, ein Gitter einzufügen, ist über die Werkzeugleiste im Bearbeitungsmodus. Unter befindet sich rechts die Dropdown-Liste , um 2er- oder 3er-Gitter mit oder ohne Überschrift hinzuzufügen. Für individuell anpassbare Gitter erklärt diese Anleitung, welche Code-Segmente ihr in einen Artikel eingeben müsst und wie diese aussehen können.

Allgemeines

Für ein Gitter wird die Bildschirmfläche in 12 gleich breite Einheiten unterteilt, woraus individuell anpassbare Spalten gebildert werden können. Man könnte den Bildschirm zum Beispiel in 12 (sehr schmale) Spalten mit gleicher Breite unterteilen, oder auch in zwei Spalten, die jeweils eine Breite von 6 Einheiten haben. Ungleichmäßige Verteilungen, also zum Beispiel drei Spalten mit einer Breite von 5, 3 und 4 Einheiten sind auch möglich, solange sie in der Summe 12 Einheiten ergeben.

Gitter werden mit Hilfe der Programmiersprache HTML (Hypertext Markup Language) erstellt. Es sind jedoch keinerlei Kenntnisse in dieser oder anderen Programmiersprachen notwending, da es völlig ausreicht, die gewünschten Code-Segmente aus diesem Artikel herauszukopieren und sie im eigenen Artikel geringfügig anzupassen.

Gleichmäßige Spalten

Achtung: Die folgenden Beispiele werden nur auf dem Desktop mit der entsprechenden Unterteilung angezeigt. Die Code-Segmente erzeugen in der mobilen Ansicht Spalten, die jeweils die ganze Breite des Bildschirmes einnehmen und untereinander angeordnet sind. Diese Darstellung ist empfohlen, kann aber auch geändert werden (siehe Mobile Ansicht).

Zwei Spalten (6 - 6)

Was du eingibst:

<div class="row">
<div class="large-6 columns">
Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)
</div>
<div class="large-6 columns">
Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)
</div>
</div>

---

Wie es aussieht:

Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)

Textinhalt der ersten Spalte (könnte auch Links, Bilder, Videos, Karten, Tabs oder weitere Gitter enthalten)

Drei Spalten (4 - 4 - 4)

Was du eingibst:

<div class="row">
<div class="large-4 columns">
Inhalt der 1. Spalte
[[Datei:DEU Lüneburg COA.svg|200px|mini|links]
</div>
<div class="large-4 columns">
Inhalt der 2. Spalte
{{#ev:youtube|https://youtu.be/cKSRp9VTjQ8}}
</div>
<div class="large-4 columns">
Inhalt der 3. Spalte
{{#display_map:Lüneburg|height=200px|width=300px}}
</div>
</div>

---

Wie es aussieht:

Inhalt der 1. Spalte

Inhalt der 2. Spalte
{{#ev:youtube|https://youtu.be/cKSRp9VTjQ8}}

Inhalt der 3. Spalte
{{#display_map:Lüneburg|height=200px|width=300px}}

Ungleichmäßige Spalten

Spalten mit ungleicher Breite lassen sich auf dieselbe Weise erstellen wie gleichmäßige Spalten. Bei den obigen Beispielen ist die Breite der Spalten jeweils auf 6 beziehungsweise auf 4 gesetzt (<div class="large-6 columns"> oder <div class="large-4 columns">). Die Werte müssen aber nicht für alle Spalten innerhalb eines Gitters gleich sein, solange sie in der Summe 12 ergeben. Die Anzahl der Spalten wird dadurch bestimmt, wie viele <div class="large-? columns">Text...</div> du zwischen <div class="row">...</div> einfügst. Ein Gitter mit vier ungleichmäßigen Spalten kann zum Beispiel so aussehen:

<div class="row">
<div class="large-2 columns">
2 Einheiten
</div>
<div class="large-3 columns">
3 Einheiten
</div>
<div class="large-3 columns">
3 Einheiten
</div>
<div class="large-4 columns">
4 Einheiten
</div>
</div>

---

Wie es aussieht:

2 Einheiten

3 Einheiten

3 Einheiten

4 Einheiten

Überschriften

Spaltenüberschriften können den Inhalt zusammenfassen und zudem ein stilvolles Element sein, da sie mit dem dem Lünepedia-Blaugrün hinterlegt sind. Als Überschrift werden sie auch im Inhaltsverzeichnis angezeigt; dies lässt sich nicht verhindern.

Was du eingibst:

<div class="row">
<div class="large-4 columns">
<h3 class="subheader">Beispielüberschrift</h3>
Inhalt der 1. Spalte
</div>
<div class="large-4 columns">
<h3 class="subheader">Beispielüberschrift</h3>
Inhalt der 2. Spalte
</div>
<div class="large-4 columns">
<h3 class="subheader">Beispielüberschrift</h3>
Inhalt der 3. Spalte
</div>
</div>

---

Beispielüberschrift

Inhalt der 1. Spalte

Beispielüberschrift

Inhalt der 2. Spalte

Beispielüberschrift

Inhalt der 3. Spalte

Icons

Unser Layout unterstützt die Einbindung von Icons aus Font Awesome 4 (die aktuelle Edition Font Awesome 5 wird nicht unterstützt!). Bis auf das Icon als Hinweis auf externe Links sollte auf die Verwendung in Artikeln verzichtet werden. In Überschriften von Gitterspalten bieten sie sich hingegen an. Dafür muss lediglich folgendes Sement eingefügt werden: <span class="fa fa-name-des-icons fa-lg"></span>

Icons können in der Bibliothek von Font Awesome 4 gesucht und der Name von dort kopiert werden. Der Name des Puzzlestück-Icons lautet zum Beispiel "puzzle-piece".

Was du eingibst:

<span class="fa fa-puzzle-piece fa-lg"></span>

Was du siehst:

---

In Überschriften von Gitterspalten kann das wie folgt aussehen

Was du eingibst:

<div class="row">
<div class="large-12 columns">
<h3 class="subheader">
<span class="fa fa-paw fa-lg"></span> Überschrift mit Icon</h3>
Inhalt der Spalte
</div>
</div>

Was du siehst:

Überschrift mit Icon

Inhalt der Spalte

Mobile Ansicht

Die bisher verwendeten Code-Segmente führen zu einer Darstellung auf Smartphones und Tablets, bei denen jede Spalte jeweils die volle Bildschirmbreite einnimmt und diese untereinander angeordnet sind. Diese Darstellung ist empfohlen, weil eine Unterteilung schmaler Handybildschirme in noch schmalere Spalten schnell zur Unleserlichkeit führen kann. Es lässt sich jedoch individuell festlegen, wie Spalten auf kleinen Bildschirmen angezeigt werden sollen. Dazu wird bei der Zeile <div class="large-? columns"> der Befehl small-? ergänzt, sodass es zum Beispiel heißt:

<div class="small-6 large-4 columns">

Diese Spalte nimmt auf großen Bildschirmen 4 Einheiten ein, als ein Drittel der Fläche, und auf kleinen Bildschirmen 6 Einheiten, als die Hälfte. Ein vollständiges Gitter kann zum Beispiel so aussehen:

Überschrift

Inhalt der 1. Spalte

Überschrift

Inhalt der 2. Spalte

Überschrift

Inhalt der 3. Spalte

Der Unterschied wird erst auf kleinen Bildschirmen erkennbar oder wenn man die Breite des Browserfensters verringert.

Weblinks

• MediaWiki Pivot Skin: Grid