HTML & CSS in Kivitendo

Diese Empfehlungen sind vorläufig nur ein Vorschlag und in keiner Weise definitv. Vor allem bezüglich Namen von Klassen und IDs könnten noch einige Änderungen eintreten. Ziel ist es aber, eine sinnvolle und verständliche Vereinheitlichung des HTML- und CSS-Codes in Kivitendo zu erreichen, die dem Programmierer und dem Designer die grösste Flexibilität und die meisten Freiheiten ermöglichen. Für Fragen wenden Sie sich bitte an die Autoren Hans Schläpfer und Andreas Rudin.

Grundsätzliche Schreibweise von HTML

Tags schliessen: ist in HTML ein Abschluss-Tag vorgesehen, dieses unbedingt auch einsetzen:
<option value="1">1
<option value="2">2
unbedingt ändern in
<option value="1">1</option>
<option value="2">2</option>
Abschliessende Tags elementarer Container (z.B. <div id="content"> oder <table class="t-pos-rechnung">) werden mit einem nachfolgendem Kommentar abgeschlossen. Beispiel:
</div><-- /#content --> oder
</table><-- /.t-pos-rechnung -->
Dem Namen der Klasse oder ID ein Slash voranstellen.
Blöcke mit umfangreichen, generierten Elementen (z.B. Unordered Lists in «menuv3» oder Tabellen) werden durch einen Zeilenumbruch abgeschlossen oder nach einem Zeilenumbruch eingeleitet.Beispiel:
</ul>\n<ul>
Sämtliche Seitenelemente (Blöcke) werden mit <div> gesetzt. <p> wird ausschliesslich für Inhalte innerhalb eines Blocks eingesetzt. Beispiel:
<div id="product-description">
<p>Beschrieb<p>
</div><-- /#product-description -->
Inline-Elemente wie <span> werden ausschliesslich innerhalb eines Block-Elementes wie <p> oder <li> eingesetzt, und nicht als Block-Elemente.
Keine Verschachtelung von Tabellen: einzelne Tabellen sollten in einen Block/Bereich wie <div> eingegeschlossen sein, der beliebig plaziert werden könnte. Tabellen in Tabellen sollte und darf es nicht mehr geben, da diese Art des Layoutens weniger flexibel ist und schon seit einer Dekade als veraltet bezeichnet wird.
alle wichtigen Seiten-Elemente wie <div> oder <table> sollten ein ID-Attribut enthalten oder mindestens eine oder mehrere Klassen, die auch eindeutig sein können, wie ...
<div id="layout-actionbar"> oder
<table class="t-pos t-pos-lieferschein"> (hier werden zwei Klassen angewendet)

Grundsätzliches zu Tabellen

Alle Tabellen entweder mit einer ID oder mit einer oder mehreren Klassen versehen. Beispiel:
<table class="t-pos t-pos-rechung"> oder
<table id="t-pos-lieferschein" class="t-pos">
Tabellen alle in gleichem Schema anlegen:
<table><caption><thead><tbody><tfoot>
Tabellen-Überschriften soweit möglich alle im <caption>-Container anlegen.
In Tabellen-Zellen keine Align- und Valign-Attribute sondern Klassen einsetzen:
<tr class="t-list-row">
    <td class="t-cell-right">
    </td>
    <td class="t-cell-input-button t-cell-input-button-preiskategorie">
    <td>
</tr>
Tabellenzeilen sinngemäss klassifizieren, z.B. Totalzeile mit eigener Klasse versehen:
<tr class="t-pos-row t-pos-row-total">

Attribute für Tabellenzellen (TD & TH)

Attribute für Tabellenzellen (TD und TH)
class	nur einsetzen bei besonderer Formatierung des Inhalts (z.B. right, numeric, t-cell-longdesc etc. - siehe unten)
colspan
style	nur in wenigen Ausnahmefällen als Übersteuerung der Standard-Formatierung über die Standard-CSS-Dateien

Klassen für Tabellenzellen (TD & TH)

Klassen für Tabellenzellen (TD und TH)
.right	horizontal (left ist Standard für TD)
.center	horizontal (Standard für TH ist Linksausrichtung)
.middle	vertikal (top ist Standard für alle Zellen)
.bottom	vertikal
.t-cell-numberic	Datentyp Zahl (integer, double etc.)
.t-cell-longdesc	Längere(r) Beschreibung/Text
.t-cell-f-input	Standard-Formulareingabefeld
.t-cell-f-textarea	Formular-Textarea-Feld für längere Texte
.t-cell-f-button	Formular-Schaltflächen (type=button)

Klassen für Tabellen-Zeilen (TR)

Tabellen-Typen

t-horiz-2-cols

Zweispaltige Tabelle mit Beschreibung und Inhalt (Feldzeichnung und Feldinhalt). Die erste Spalte enthält nur <TH>-Container, die zweite Spalte <TD>-Container:

<table class="t-horiz-2-cols">
    <tbody>
    <tr>
        <th>Produktname</th>
        <td>Dyson XY</td>
    </tr>
    <tr>
        <th>Lagerbestand</th>
        <td class="t-cell-right">20 Stk.</td>
    </tr>
</table><-- /.t-horiz-2-cols -->

t-list

Normale Tabelle mit Kopfzeile, normalen Tabellenzeilen und ggf. einer Total-Zeile. Diese Tabelle dient nur zur Anzeige und nicht zusätzlich zur Bearbeitung von Inhalten mit Formular-Elementen.

t-pos

Diese Tabelle enthält Positionselemente eines Belegs z.B. Rechnungspositionen. In den Zellen können auch Bearbeitungselemente wie <input>-Felder oder -Buttons enthalten sein.

Technologie

HTML

Für die Erstellung von HTML in Kivitendo gibt es keine Alternative zu den eingesetzten Programmierwerkzeugen. Da die Ausgabe an den Webbrowser weitgehend über die Templates erfolgt, sollte dort in den Templates einfachstes aber korrektes HTML eingesetzt werden.

CSS und LESS

CSS kann über einen spezialisierten oder einfachen Texteditor programmiert werden.