Bootstrap

Das Design des ebiz-trader basiert auf dem CSS- und Javascript-Framework namens Bootstrap. Dieses beinhaltet bereits sehr viele Elemente, die Üblicherweise bei der Gestaltung von Webseiten verwendet werden und machen es damit deutlich einfacher Änderungen/Erweiterungen vorzunehmen.
Das aktuelle Design setzt Bootstrap in der Version 3 als Grundlage ein, zukünftig werden wir die aber auf die neuere Version 4 des Frameworks aktualisieren. Für einen Einblick welche Elemente ihnen zur Verfügung stehen und wie Sie diese einsetzen können, sehen Sie sich die nachfolgend verlinkte Dokumentation von Bootstrap 3 an:

FontAwesome

Für Symbole/Icon verwenden wir die kostenlose Variante der FontAwesome-Bibliothek, welche ihnen knapp 1500 Icons zur Verfügung stellt. Aktuell ist Version 5.5.0 von FontAwesome in das Standard-Design des ebiz-trader integriert.
Für eine Übersicht aller Icons und Informationen darüber wie diese eingebunden werden, sehen Sie sich die nachfolgend verlinkte Dokumentation von FontAwesome an:

Abstände

Um Abstände zwischen Elementen zu definieren gibt es einige Hilfs-Klassen, welche es einfacher machen diese schnell und einheitlich einzubinden.
Grundsätzlich wird hierbei zwischen dem Innenabstand ("Padding") und dem Außenabstand ("Margin") unterschieden. Für eine detailiertere Beschreibung des Unterschieds zwischen Padding und Margin können Sie diesbezüglich eine Beschreibung dessen unter selfhtml.org ansehen.

Die Klassen setzen sich jeweils aus folgenden Eigenschaften zusammen:

• Art des Abstands (Padding / Margin)
• Die Richtung in der ein Abstand eingefügt werden soll (Rundherum / Oben / Unten / Links / Rechts / ...)
• Wie groß der Abstand sein soll

Beispiele:

<div class="p-3">
Innenabstand von 36 Pixel Horizontal / 18 Pixel Vertikal
</div>

<div class="mt-2">
Außenabstand von 12 Pixel oberhalb des Elements
</div>

<div class="ml-1 p-1">
Außenabstand von 12 Pixel Links und 
Innenabstand von 12 Pixel Horizontal / 6 Pixel Vertikal
</div>

Farben

Zum einfärben von Texten und Elementen gibt es folgende CSS-Klassen, welche sich an der Version 4 von Bootstrap orientieren:

Text-Farben

Mit diesen Klassen können Sie die Farben von Texten verändern:

Hintergrund-Farben

In den meisten Fällen ist es sinnvoller hierfür die Bootstrap-Klasse "alert" mit der entsprechenden Farbvariante zu verwenden.
Bootstrap-Dokumentation zu Alerts

Schriften

Verwenden Sie folgeden h1 - h5 Tags für Überschriften

h1 - Überschift

h2 - Überschift

h3 - Überschift

h4 - Überschift

h5 - Überschift

Erweiterungen:

Sie können mit dem p-tag eine Unterüberschrift angeben.

        <h1>h1 - Überschift <p class="lead">Ich bin die Unterüberschrift</p></h1>
      

Beispiele:

h1 - Überschift

Ich bin die Unterüberschrift

Rahmen

Die nachfolgenden Klassen ermöglichen es einfach einen Rahmen um Elemente zu erstellen. Ähnlich wie bei den Abständen setzt sich der Name der CSS-Klasse aus mehreren Komponenten zusammen:

Beispiele:

<div class="border-red bg-red">
Roter Rahmen (1px alle Seiten)<br>
Roter Hintergrund
</div>

<div class="border-green-dashed-2 bg-green">
Grüner Rahmen (2px alle Seiten, gestichelt)<br>
Grüner Hintergrund
</div>

<div class="border-x-blue-2 border-top-black-2-dashed bg-blue">
Blauer Rahmen (2px Links/Rechts)<br>
Schwarzer Rahmen (2px Oben, gestichelt)<br>
Blauer Hintergrund
</div>

Grid-Boxen

In Bootstrap ist ein sogenanntes Grid-System integriert. Vereinfacht beschrieben teilt dieses die verfügbare Breite in 12 gleichgroße Segmente auf, welche dann benutzt werden können um die Größe von Elementen festzulegen.
Bootstrap-Dokumentation zum Grid-System

Um die Gestaltung von Listen einfacher zu machen, ist im ebiz-trader zusätzlich eine etwas vereinfachte und gleichzeitig flexiblere Variante des Grid-Systems vorhanden.
Die primäre CSS-Klasse dazu ist design-row. Zusätzlich geben Sie eine oder mehrere CSS-Klassen an, welche festlegen wie die Elemente aufgeteilt werden. Diese zusätzlichen Klassen setzen sich wie folgt zusammen:

Beispiel

Das folgende Beispiel zeigt eine Liste aus 12 Elementen, welche je nach Display-Größe (bzw. Größe des Browser-Fensters) eine unterschiedliche Anzahl an Elementen pro Zeile Anzeigt.

• Für Handys wird dieses Beispiel 2 Elemente pro Zeile anzeigen
• Für Tablets/Netbooks 4 Elemente pro Zeile
• Für Desktops/Laptops 6 Elemente pro Zeile

        <div class="design-row design-row-xs-2 design-row-sm-4 design-row-lg-6">

          <div class="design-row-item">1. Element</div>
          <div class="design-row-item">2. Element</div>
          <div class="design-row-item">3. Element</div>
          <div class="design-row-item">4. Element</div>
          <div class="design-row-item">5. Element</div>
          <div class="design-row-item">6. Element</div>
          <div class="design-row-item">7. Element</div>
          <div class="design-row-item">8. Element</div>
          <div class="design-row-item">9. Element</div>
          <div class="design-row-item">10. Element</div>
          <div class="design-row-item">11. Element</div>
          <div class="design-row-item">12. Element</div>
        </div>
      

Beispiele / Schnell-Referenz

Buttons

Text-Farben

Container, Rahmen und Farben