Download

Einsatz von linkui

Es gibt mehrere Wege linkui einzusetzen, abhägig davon ob ein bestehendes Projekt erweitert werden soll und ob eine Anpassung von linkui gewünscht ist.

Bei Verwendung eines angepassten linkuis wird Kenntnis von Webpack dringend empfohlen.

Start eines neuen Projekts mit angepasstem linkui

Um ein neues Projekt aufzusetzten haben wir einen sogenannten Seed vorbereitet. Dieser beinhaltet bereits eingerichtete Abhängigkeiten sowie ein Webpack-Buildsystem.

  1. linkui seed von GitLab in gewünschtes Verzeichnis klonen: 
    $ git clone https://gitlab.optadata-digital.de/oddc.pub/linkui-seed.git [PROJEKTNAME]
    oder von hier herunterladen
  2. in das Projektverzeichnis wecheseln: 
    $ cd [PROJEKTNAME]
  3. Da linkui nur in unserem eigenen NPM-Repository verfügbar ist, muss dieses zunächst registriert werden: 
    $ npm set @oddc-pub:registry https://npm.oddc.biz
  4. Anschließend können die Abhängigkeiten mit npm installiert werden: 
    $ npm install
  5. Anpassungen an linkui, wie zum Beispiel der Primärfarbe, können nun an der Datei src/scss/theme.scss vorgenommen werden.
  6. Zum Entwickeln kann ein Webpack-Entwicklungsserver gestartet werden. Dieser baut die Dateien bei Änderungen automatisch neu und aktualisiert sie im Browser. 
    $ npm start
  7. Um eine Dev-Version mit Sourcemaps der Seite zu bauen, diesen Befehl ausführen: 
    $ npm run build
    Die gebaute Seite befindet sich anschließend im dist-Ordner.
  8. Eine Produktivversion kann so erstellt werden: 
    $ npm run build-prod
  9. Der Ordner eueres neuen Projekts sollte natürlich in euere Versionverwaltung eingecheckt werden. Wenn der Seed von unserem Repository geklont wurde, empfielt es sich den .git-Ordner zu löschen und mit $ git init neu anlegen zu lassen.

Erweiterung eines bestehenden Projekts mit angepasstem linkui

Wenn das Projekt bereits ein Webpack-Buildsystem verwendet, kann dies relativ einfach für linkui erweitert werden. Es muss zunächst linkui als Abhängigkeit installiert werden:

  1. Da linkui nur in unserem eigenen NPM-Repository verfügbar ist, muss dieses zunächst registriert werden: 
    $ npm set @oddc-pub:registry https://npm.oddc.biz
  2. Anschließend kann dann linkui mit npm installiert werden: 
    $ npm install --save @oddc-pub/linkui
  3. Anpassungen an linkui, wie zum Beispiel der Primärfarbe, können in einer SCSS-Datei vorgenommen werden: 
    // Assign your own product color. All components are automatically adjusted... it's magic!
$base-color: #990000;

// Adjust the max-width of the main container for each breakpoint (optional)
$container-max-widths: ( xl: 1140px );

// Add your own icons. Put it in the src/svg/ folder in svg (24px x 24px) format.
//.ic-example-b {background-image:url("./svg/ic-example-b.svg") !important;}

// Loads all other link ui components
@import "~@oddc-pub/linkui/src/scss/linkui.scss";
    In eurer Entry-Point-Datei sollte diese SCSS-Datei nun importiert werden. Außerdem auch linkuis JavaScript: 
    /* import your theme */
import 'theme.scss'

/* import linkui JavaScript */
import '@oddc-pub/linkui';
  4. Es werden warscheinlich einige Anpassungen an der bestehenden Webpack-Konfiguration notwendig sein. Dazu am besten den Seed (siehe oben) herunterladen und die dort verwendeten Konfigurationen übernehmen.

Wenn das Projekt auf Webpack umgestellt werden soll, empfielt es sich ebenfalls die Konfiguration des Seeds (siehe oben) zu übernehmen.

Soll ein angepasstes linkui in einem Projekt verwendet werden, dass nicht auf Webpack umgestellt werden kann/soll, wird es etwas komplizierter. Da ohne die Hilfe von Webpack die Pfade der Abhängigkeiten nicht korrekt aufgelöst werden können, müssen diese direkt eingebunden werden. Dazu müssen die Inhalte der Dateien node_modules/@oddc-pub/linkui/src/scss/linkui.scss sowie der dortige import von Bootstrap aus der Datei node_modules/bootstrap/scss/bootstrap.scss direkt in euer Projekt übertragen werden. Anstatt von: 

@import "~@oddc-pub/linkui/src/scss/linkui.scss";
... müsst ihr nun eine eigene Datei einbinden, die in etwa so aussieht: 
$roboto-font-path: '/build/linkui/fonts'; // roboto-fontface override
@import "/node_modules/roboto-fontface/css/roboto/sass/roboto-fontface"; // load roboto-fontface styles

// custom path-prefix for the icons
$ico_path: '/build/linkui/icons';

// primary theme color
$base-color: #6a509d;

@import "/node_modules/@oddc-pub/linkui/src/scss/_theme-default";/*all user*/
@import "/node_modules/@oddc-pub/linkui/src/scss/_customize-bootstrap";

@import "/node_modules/bootstrap/scss/functions";
@import "/node_modules/bootstrap/scss/variables";
/* ... Weitere Imports aus node_modules/bootstrap/scss/bootstrap.scss ... */
@import "/node_modules/bootstrap/scss/carousel";
@import "/node_modules/bootstrap/scss/utilities";

@import "/node_modules/@oddc-pub/linkui/src/scss/_stepy";
@import "/node_modules/@oddc-pub/linkui/src/scss/_sidebar.scss";
/* ...  Weitere Imports aus node_modules/@oddc-pub/linkui/src/scss/linkui.scss ... **/
@import "/node_modules/@oddc-pub/linkui/src/scss/_checkboxes";
@import "/node_modules/@oddc-pub/linkui/src/scss/_menus";

Start oder Erweiterung eines Projekts mit standard linkui

Wenn das Projekt keine Anpassungen an linkui erfordert oder der Einsatz eines Buildsystems nicht möglich ist, besteht noch die Möglichkeit ein fertig gebautes linkui in standartkonfiguration zu verwenden.

  • Wenn der Einsatz von npm möglich ist:
    1. Da linkui nur in unserem eigenen NPM-Repository verfügbar ist, muss dieses zunächst registriert werden: 
      $ npm set @oddc-pub:registry https://npm.oddc.biz
    2. Anschließend kann dann linkui mit npm installiert werden: 
      $ npm install --save @oddc-pub/linkui
    3. Zur vollständigen Funktion muss auch jQuery installiert werden: 
      $ npm install --save jquery
    4. Zuletzt müssen die benötigten Dateien dann noch in der Seite eingebunden werden:

  • Wenn nicht, können die linkui-Dateien hier heruntergelden werden:

    Miminiertes CSS Miminiertes JavaScript

    Folgende Abhängigkeiten müssen dann bei Bedarf selber bezogen werden:

    • jQuery
    • Popper.js
    • Toastr.js
    • flatpickr
    • stepy
  • Oder linkui einfach direkt online einbinden (nicht für Produktiveinsatz empfohlen):