Website: Dokumentation

Jede Website braucht eine Dokumentation, denn Vergesslichkeit ist eine Konstante.
Diese Doku ist Design-übergreifend.

Organisation

Der js-Ordner enthält die diversen Design-Scripte.
CSS wird in der Regel innerhalb der Design-Scripte notiert (Ein Request weniger).
Wir haben im CSS-Ordner demnach nur eine schlanke nojs.css-Datei.
Im fonts Ordner werden insbesondere die SIL OFL-Lizenztexte zu den verschiedenen lokal gehosteten Webfonts erwartet.

Vorlage Inhaltsseite

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<meta name="description" lang="de" content="Beschreibung des Seiteninhalts">
	<title>Ein Titel</title>
	<script src="../js/main.js"></script>
<!--optional
	<noscript><link rel="stylesheet" href="../css/nojs.css"></noscript>
	<meta name="date" content="2018-06-12">
	<meta name="last-modified" content="2018-07-29">

	<style>
main p {white-space:pre-wrap;}
	</style>
	<script data-initfunction="myfunc">
//script hier
	</script>
-->
</head>
<body>

<h1>Hauptüberschrift</h1>

<!-- Inhalt der Seite hier -->

</body>
</html>

Der Inhalt in body wird durch das Theme Javascript main.js in ein main-Element verschoben.

Theme-Scripte

Theme-Scripte steuern das Aussehen und die Struktur der übergreifenden Site. Das Theme-Script wird als main.js eingebunden. Derzeit verfügbare Themes:

Besondere Klassen

Icons

Icons verwenden semantische Klassen in der Form <* class="icon keyword keyword">
Eine ausführliche Referenz zum Gebrauch von Icons gibt es unter Website: Iconsets

Mehr Spalten

<* class="cols"> erzeugt 2 Spalten.

PNG Spritemap ../images/gui1.png

png spritemap aller GUI Elemente

SVG Spritemap ../images/gui.svg

svg spritemap aller GUI Elemente

<* class="float">
Die Klasse float ist auf alle Elemente anwendbar und erzeugt (abhängig vom Design und der jeweiligen Viewport-Breite) eine Float-Box, wo das möglich ist, andernfalls eine Blockbox.
Typische Anwendungsfälle sind Bilder mittlerer Grösse, kleine Tabellen, Grafiken oder Textanmerkungen in der Rolle eines aside.
Bevorzugte Elemente sind figure, table oder aside.
Das dem float Element folgende Element wird den Umfluss vollziehen. Das übernächste hat jedoch bereits die CSS-Eigenschaft clear:both.

Text

normaler Vergleichstext
<code>Program Code</code>
<tt>teletyped Text</tt> deprecated!
<var>Variablen / Mengenangaben</var>
<i>italischer Text</i>
<em>betonter Text</em>
<em class="person">betonter Text für Personennamen</em>
<em class="title">betonter Text für Werkstitel</em>
<b>fette Schrift</b>
<strong>wichtiger Text</strong>

max-wide

Manchmal braucht man die maximale Breite!

Dieser Text geht über die gesamte Breite --------------------------- ------------------ -------------------- ---------------------------- -------------------- ---------------------- --------------------- ------------ -------------------------------------------- ------------------------ -------------- --------- ----------------- --------------------- ---------------- --------- ---------------------- ------------------------

Ruler

Die Klasse <* class="ruler"> kann genutzt werden um einen optischen Divider nach oben zu erzeugen. Bevorzugte Elemente sind h2 und h3.

Alert-Boxen

class="alert-warning"

class="warning"

Tabellen

<table class="fixit"> übergibt eine Tabelle einem Script.
Dieses ergänzt scope Attribute und ergänzt Information um die Zahl der Spalten, die für das CSS genutzt werden können.
Tabellen mit der fixit Klasse können besser für alle Bildschirme dargestellt werden.

Tests für alle Bildschirme

Tabellen

<table class="fixit">
<thead>
<tr>
  <th>1/1 _____</th>
  <th>1/2</th>
  <th>1/3 ________</th>
  <th>1/4</th>
  <th>1/5</th>
  <th>1/6</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2/1</th><td>2/2 ________</td><td>2/3</td>
	<td>2/4 ________</td><td>2/5</td><td>2/6 ___________</td>
</tr>
<tr>
	<th>3/1</th><td>3/2</td><td>3/3</td><td
	>3/4</td><td>3/5 _____</td><td>3/6</td>
</tr>
</tbody>
</table>

Obiger Code wird wie folgt gerendert

1/1 _____ 1/2 1/3 ________ 1/4 1/5 1/6
2/12/2 ________2/32/4 ________2/52/6 ___________
3/13/23/33/43/5 _____3/6