D1st-uisystem-base NPM

D1st Design System Base Package

Name: d1st-uisystem-base
Information: Axel Wolters, axelwol@microsoft.com
Stand: 10.09.2020 / V2.40.714
Copyright: Senatskanzlei Hamburg / MIT License.

Übersicht

Diese Paket besteht aus folgenden Teilen

build/css-bundle Paket zur Verwendung in eigenen Projekten. (Falls es selbst gebaut wird. Dann alle Unterverzeichnis mitkopieren!).
docs/ Vorlagen aus dem Design System (Adobe XD) und Beispiele.
src/ Alle Bestandteile des Design Systems in unkompilierter Form. Übersetzen mit 'npm run build-src'.
public/dist/ Alle Bestandteile als Bundle (css + js + assets) Bundle erstellen mit "npm run build" Alle Unterverzeichnis mitkopieren!
bin/ Beispiel Web-Site
public/ Beispiel Web-Site
routes/ Beispiel Web-Site
views/ Beispiel Web-Site Der Entwicklungs-Server wird mit 'npm start' gestartet und steht unter 'http://localhost:42000' zur Verfügung.

Einbinden in ein vorhandenes Projekt

Die Inhalte unter node_modules/d1st-uisystem-base/public/dist/ sind zu referenzieren. Um die Zusammenhänge zu verstehen, sollte eine Demo Web Site in einem leeren Verzeichnis erstellt und ausgeführt werden. Dies ist im nächsten Abschnitt beschrieben.

Kurzanleitung für eine Demo Web Site

Node.js (https://nodejs.org/dist/v12.16.2/node-v12.16.2-x64.msi) und GIT SCM (https://git-scm.com/downloads) installieren (falls noch nicht vorhanden).
Neues, leeres Verzeichnis erstellen und dazu wechseln.
Ausführen von:

npm install --no-optional d1st-uisystem-base

ReadMe.md lesen (liegt unter node_modules/d1st-uisystem-base/ReadMe.md).
Ausführen von (npx !):

npx d1st-uisystem-base

Ausführen von:

npm --no-optional install

Ausführen von:

npm run build-css

Ausführen von:

npm run build

Ausführen von:

npm start

Öffnen eines Browsers:

http://localhost:42000

Die Verzeichnisse /views und /public enthalten die Dateien für die Beispiel Web-Site. Die einzige Datei, welche im Header der Demo Website(!) eingebunden wird ist: '/dist/bundle.js' (aus /public s.u.). Sie enthält auch alle benötigten Styles und diebenötigten Assets. Zusätzlich sind die Verzeichnisse /Content und /Images erforderlich (ebenfalls aus /public).

Die Beispielseiten sind unter /views zu finden. Wir benutzen das Macrosystem "Handlebar", um Partials einzubinden.

Beispiel

Die Master HTML Datei sollte wie folgt beginnen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>D1st Design System Beispielseite</title>
    <title>{{title}}</title>
    <!-- This includes only jquery, bootstrap and popper -->
    <script src="/dist/bundle.js" type="text/javascript"></script>
    <!-- This includes the base CSS of the design system -->
    <link rel="stylesheet" type="text/css" href="/dist/bundled.min.css">
    <!-- This includes the Kendo CSS of the design system -->
    <!--<link rel="stylesheet" type="text/css" href="/dist/kendo-bundled.min.css">-->
   </head>
  <body>
  <!-- (...) -->
  </body>
  </html>