Das Design System der Phoenix Reisen GmbH. Es stellt übergreifende CI Styles für diverse autarke Web-Applikationen von Phoenix Reisen bereit.

Zum Beispiel für:

• Mein Phoenix
• Phoenix Katalog
• Phoenix Design System
• Phoenix Kabinenpräsente (kommt)
• Phoenix Mitarbeiter Workspace (nur Intranet)

Unterstützt wird es durch diverse designprägende Drittbibliotheken, die da wären:

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

Sowie durch einige Phoenix spezifische Eigenentwicklungen.

Weitere Informationen auf design-system.phoenixreisen.net.

Die Installation erfolgt via npm.

npm install @phoenixreisen/design-system

npm install     # Abhängigkeiten installieren

npm run dev     # Startet den "dev mode". Änderungen am SCSS werden direkt transpiliert.
                # Zudem wird ein lokaler Dev-Server gestartet.

Dokumentation lokal aufrufbar unter http://localhost:3027/.

Die HTML-Dokumentation wird durch KSS auf Grundlage des Ordners template generiert. Änderungen am SCSS in src sind nach einem manuellen Reload direkt ersichtlich.

Build für Produktion in den Ordner dist:

npm run build       # reiner Build
npm run generate    # lintet den Code & generiert die Doku

Um die Änderungen für alle Projekte als neue Version zur Verfügung zu stellen, müssen sie auf npm veröffentlicht werden.

npm run generate                # baut den Code
npm version major|minor|patch   # erhöht die Version entsprechend
npm publish                     # veröffentlicht auf npm

Deployed wird über & auf Netlify, indem in den master-Branch gepusht wird.

Netlify zieht sich dazu selbstständig die Sourcen von Github und ruft danach den npm-Befehl npm run generate auf - siehe package.json.

Dieser kompiliert src nach dist und generiert mittels kss die HTML-Dokumentation (ebenfalls nach dist). Anschließend wird das Kompilat bei Netlify abgelegt und ersetzt das Bisherige.

SCSS-Änderungen im Ordner template müssen ebefalls transpiliert werden.

npm run build:docs

Für das Projekt sollte ein SCSS-Kontext eingerichtet sein. Möglichst vor den Projekt-Styles werden die Styles des Design-Systems eingebunden, um auf alle Variablen und Werte zugreifen zu können.

// SCSS Datei

// Pfad zu Images setzen
// (kann auch Projektordner sein, nur müssen dann bestimmte Bilder hinterlegt werden)
$phxDesignSystemImagePath: '~@phoenixreisen/design-system/src/images';

// Basis-Styles importieren
// enthält nur eine Auswahl der am häufigsten gebrauchten Styles
@import 'phoenixreisen/design-system/src/index.basic.scss';

// Alles importieren
// siehe index.scss falls nur Stücke importiert werden sollen
@import '@phoenixreisen/design-system/src/index.scss';

// custom styles...

Innerhalb eines mit Webpack aufgesetzten Projekts bietet das Design-System die Möglichkeit, angebotene Fonts auf folgende Weise in den Service zu inkludieren:

// JS Datei

// Bsp. für Titillium
require('@phoenixreisen/design-system/src/fonts/titillium.css');

Wird im Service die index.js des Design-System inkludiert, so sind die Font-Imports bereits enthalten.

• Fabian Marcus (f.marcus@phoenixreisen.com)
• Jan Hermanns (j.hermanns@phoenixreisen.com)
• Leon Schmitz (l.schmitz@phoenixreisen.com)