Design-Referenz

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:

Bootstrap 3 Dokumentation öffnen

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:

FontAwesome Icon-Liste öffnen

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

Art des Abstands Die Richtung in der ein Abstand
eingefügt werden soll
Wie groß soll der Abstand sein?
p = Padding / Innenabstand
m = Margin / Außenabstand
Ohne Angabe = Rundherum / in alle Richtungen
t = Top / Oben
b = Bottom / Unten
l = Left / Links
r = Right / Rechts
x = X-Achse / Horizontal (Links und Rechts)
y = Y-Achse / Vertikal (Oben und Unten)
0 = Kein Abstand
1 = 12 Pixel Horizontal / 6 Pixel Vertikal
2 = 24 Pixel Horizontal / 12 Pixel Vertikal
3 = 36 Pixel Horizontal / 18 Pixel Vertikal
4 = 48 Pixel Horizontal / 24 Pixel Vertikal
5 = 60 Pixel Horizontal / 30 Pixel Vertikal
6 = 72 Pixel Horizontal / 36 Pixel Vertikal

Beispiele:

HTML-Code Ergebnis
<div class="p-3">
Innenabstand von 36 Pixel Horizontal / 18 Pixel Vertikal
</div>
Innenabstand von 36 Pixel Horizontal / 18 Pixel Vertikal
<div class="mt-2">
Außenabstand von 12 Pixel oberhalb des Elements
</div>
Außenabstand von 12 Pixel oberhalb des Elements
<div class="ml-1 p-1">
Außenabstand von 12 Pixel Links und
Innenabstand von 12 Pixel Horizontal / 6 Pixel Vertikal
</div>
Außenabstand von 12 Pixel Links und Innenabstand von 12 Pixel Horizontal / 6 Pixel Vertikal

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:

Klasse "text-muted"

Klasse "text-primary"

Klasse "text-success"

Klasse "text-info"

Klasse "text-warning"

Klasse "text-danger"

Klasse "text-white"
(mit Klasse "bg-black" für schwarzen Hintergrund)

Klasse "text-black"

Klasse "text-red"

Klasse "text-green"

Klasse "text-blue"

Klasse "text-yellow"

Hintergrund-Farben

Hintergrund-Farben nach dem Bootstrap-Farbschema:

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

Klasse
"bg-muted"
Klasse
"bg-primary"
Klasse
"bg-success"
Klasse
"bg-info"
Klasse
"bg-warning"
Klasse
"bg-danger"
Hintergrund-Farben für Grundfarben:
Klasse
"bg-black"
Klasse
"bg-white"
Klasse
"bg-red"
Klasse
"bg-green"
Klasse
"bg-blue"
Klasse
"bg-yellow"

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:

Die Richtung in der ein Rahmen
hinzugefügt werden soll
Farbe des Rahmens
Siehe auch im Abschnitt "Farben"
Wie dick soll der Rahmen sein? Art der Linie
Ohne Angabe = Rundherum / in alle Richtungen
t = Top / Oben
b = Bottom / Unten
l = Left / Links
r = Right / Rechts
x = X-Achse / Horizontal (Links und Rechts)
y = Y-Achse / Vertikal (Oben und Unten)
muted = Leichtes Grau
primary = Primärfarbe
(Standardmäßig Orange)
success = Erfolgs-Meldungen
(Standarmäßig Grün)
info = Info-Meldungen
(Standardmäßig Blau)
warning = Warn-Hinweise
(Standardmäßig Gelb)
danger = Fehler/Gefahren
(Standardmäßig Rot)
black = Schwarz
grey = Grau
white = Weiß
red = Rot
green = Grün
blue = Blau
yellow = Gelb
Ohne Angabe = Durchgehend
solid = Durchgehend
dashed = Gestrichelt
Ohne Angabe = 1 Pixel
1 = 1 Pixel
2 = 2 Pixel
3 = 3 Pixel

Beispiele:

HTML-Code Ergebnis
<div class="border-red bg-red">
Roter Rahmen (1px alle Seiten)<br>
Roter Hintergrund
</div>
Roter Rahmen (1px alle Seiten)
Roter Hintergrund
<div class="border-green-dashed-2 bg-green">
Grüner Rahmen (2px alle Seiten, gestichelt)<br>
Grüner Hintergrund
</div>
Grüner Rahmen (2px alle Seiten, gestrichelt)
Grüner Hintergrund
<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>
Blauer Rahmen (2px Links/Rechts)
Schwarzer Rahmen (2px Oben, gestichelt)
Blauer Hintergrund

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:

Geräte-Typ Anzahl Elemente pro Zeile
xs = Sehr kleine Geräte
(Handys / kleine Tablets, <768px Display-Breite)
sm = Kleine Geräte
(Tablets / Netbooks, >=768px Display-Breite)
md = Mittelgroße Geräte
(Kleinere Desktops / Laptops, >=992px Display-Breite)
lg = Große Geräte
(Hochauflösende Desktops / Laptops, >=1200px Display-Breite)
1 = Ein Element pro Zeile
2 = Zwei Elemente pro Zeile
3 = Drei Elemente pro Zeile
4 = Vier Elemente pro Zeile
[ ... ]
11 = Elf Elemente pro Zeile
12 = Zwölf Elemente pro Zeile

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>
Ergebnis:
1. Element
2. Element
3. Element
4. Element
5. Element
6. Element
7. Element
8. Element
9. Element
10. Element
11. Element
12. Element

Beispiele / Schnell-Referenz

Buttons

Text-Farben

Klasse "text-muted"

Klasse "text-primary"

Klasse "text-success"

Klasse "text-info"

Klasse "text-warning"

Klasse "text-danger"

Klasse "text-white"
(mit Klasse "bg-black" für schwarzen Hintergrund)

Klasse "text-black"

Klasse "text-red"

Klasse "text-green"

Klasse "text-blue"

Klasse "text-yellow"

Container, Rahmen und Farben

design-content-box mb-5
bg-muted border-muted text-muted
bg-primary border-primary text-primary
bg-success border-success text-success
bg-info border-info text-info
bg-warning border-warning text-warning
bg-danger border-danger text-danger
design-content-box-nested mt-5
bg-black border-white text-white
bg-white border-black text-black
bg-red border-red text-red
bg-green border-green text-green
bg-blue border-blue text-blue
bg-yellow border-yellow text-yellow
border-x-blue-2 border-top-black-dashed bg-blue mt-5 p-1