Phoenix Reisen Design System

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.

Installation

Die Installation erfolgt via npm.

npm install @phoenixreisen/design-system

Entwicklung

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.

Deployment

Build

Build für Produktion in den Ordner dist:

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

Deployment-Prozess

Code

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

Dokumentation

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.

KSS Dokumentation

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

npm run build:docs

Anwendung

Design-System ins Projekt einbinden

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...

Font innerhalb eines Service installieren

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.

Authors

• Fabian Marcus ([email protected])
• Jan Hermanns ([email protected])
• Leon Schmitz ([email protected])