CSS Mocking Tool

Allgemein

Das CSS Mocking Tool ermöglicht ein individuelles Design verschiedener Elemente des Formulars. Durch die Modifizierung des von uns zur Verfügung stehenden CSS-Files kann man z.B. die Größe, Position und Farbe eines Progress Circles anpassen. Für diesen Service steht auch ein Formular bereit, welches alle möglichen Typen von Elementen beinhaltet. Somit hat man einen sehr klaren Überblick über das Design aller Elemente.

Dokumentation

Vorbedingunge

Um das Tool starten zu können, muss auf dem Gerät eine Node Version höher als 16.x.x installiert sein

CSS Mocking Tool starten

Um das CSS Mocking Tool zu starten und zu benutzen, müssen folgende Schritte durchgeführt werden

1. Arbeitsbereich öffnen
   Öffnen Sie das gewünschte Projekt in einer IDE Ihrer Wahl und navigieren Sie zur folgenden Datei portal/formgen/styling/common/variables.scss
   
   
2. Tool starten
   Öffnen Sie einen Terminal Ihrer Wahl und navigieren Sie zum folgenden Ordner

   
   
       
   
   
   
   ~ cd _YOUR_PROJECT_/portal/formgen
   
   
   
   

   > Ersetzen Sie `_YOUR_PROJECT_` durch den richtigen Namen Ihres Projekts.
   
   Danach installieren Sie die nötigen Dependencies für das CSS Mocking Tool

   
   
       
   
   
   
   ~ npm install
   
   
   
   

   Schließlich starten Sie das Tool
   

   
   
       
   
   
   
   ~ npm start
   
   
   
   

   Nach erfolgreichem Starten des Tools sollte  das Mockformular unter http://localhost:3000/static/formgen erreichbar sein.
   

Verwendung

Nach dem Starten des CSS Mocking Tools können die Werte der Variablen in der zuvor geöffneten Datei (portal/formgen/styling/common/variables.scss)nach eigenem Willen geändert werden.
Um Änderungen zu übernehmen, muss die variables.scss-Datei gespeichert werden (Strg + s oder Cmd + ⌘). Nach dem Speichern der Datei führt das Mocking Tool ein Hot Reload aus und die Änderungen sind auf http://localhost:3000/static/formgen zu sehen.

Wichtig
Ändern Sie NICHT die Datei common-style.scss

Eigene Styles

Das Mocking Tool unterstützt auch eigenes Styling, welches das Standardstyling überschreiben kann.

Das eigene Style kann in folgenden Dateien eingefügt werden

• custom-style-begin.scss unter portal/formgen/styling/custom/...
• custom-style-end.scss unter portal/formgen/styling/custom/...