Grundlegende Designwerte & -elemente der Phoenix Reisen GmbH in Bonn
Dokumentation (mehr als weniger automatisch generiert)

Prinzipien

Neue & bestehende Frontends werden inhouse auf Basis folgender Prinzipien entwickelt.

mobile first
Open Source Welcome
weniger ist mehr, außer es ist zu wenig
wie sieht das in Türkis aus?

Anwendung

Das Design-System kommt für die Entwicklung der Reiseverwaltung Mein Phoenix zum Einsatz als auch zur Entwicklung diverser Intranetanwendungen.

Open Source to the rescue!

Folgende designprägende 3rd party Styles werden customized ins Design-System importiert, erleichtern das Leben und verkürzen die Entwicklungszeit.

KSS Knyle Style Sheets - CSS Dokumentationsgenerator für in der Haube
Tachyons - funktionales CSS Framework für unter der Haube
Animate.css - Animationssammlung für auf der Haube
Fort Awesome - hippe Icon Schriftart
Driver - smoothe Page Tour
Pikaday - cooler Datepicker
Swiper - fancy touch Slider

Selbstentwickelte Komponenten werden natürlich auch - so gut es geht - wiederverwendet.

Typografie

Grundschriftart ist Titillium Web (Website)
mit einer Basisgröße von 16px (18px ab großen Auflösungen).

Für Icons aller Art kommt Fort Awesome (Website) zum Einsatz.
SVG-Icons nur, wenn sie nicht durch Fort Awesome abgedeckt sind.

Responsivität

Folgende Breakpoints werden für grundsätzliche gerätespezifische Responsivität eingesetzt. Darüber hinaus werden aber auch Breakpoints so gesetzt, wie es für die jeweilige Designstelle optimal ist.

$XS: 320px;
$S: 480px;
$M: 640px;
$L: 960px;
$XL: 1400px;

Weitere Variablen

Farben

Corporate Identity (CI)

CI Phoenix Blau (primary)

$primary

#009EB4

CI Phoenix Blau (primary dark)

$primary-dark

#00377A

Links

Hyperlink

$link

$primary

Hyperlink - hovered

$link--hover

darken($link, 5%)

Hyperlink - active

$link--active

darken($link, 15%)

Grautöne & -abstufungen

Grau I

$gray1

#333333

Grau II

$gray2

#666666

Grau III

$gray3

#7d7d7e

Grau IIII

$gray4

#cdcdce

Grau V

$gray5

#DCE0E7

Grau VI

$gray6

#EEEEF4

Weiß-Grau

$whitegray

#fafafa

Grau-Weiß

$graywhite

#edf1f5

Status-Farben

Erfolg

$success

#1CB841

Info

$info

#1F8DD6

Warnung

$warning

#FF6700

Krasse Warnung / Fehler

$danger

#CA3C3C

Sonstige Farben

Schwarz

$black

#000000

Weiß

$white

#ffffff

Gelb

$yellow

#face49

Weitere Variablen

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6

Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Kopfzelle	Kopfzelle
Tabellenzelle	Tabellenzelle

Unnummerierter Listenpunkt
Unnummerierter Listenpunkt

Nummerierter Listenpunkt
Nummerierter Listenpunkt

  Preformatted

Zitat