Skip to content

Commit 25018af

Browse files
mfranzkemfranzke
authored
docs: added new document for DB UX Design System
1 parent 92ed01f commit 25018af

File tree

1 file changed

+335
-0
lines changed

1 file changed

+335
-0
lines changed

‎db-ux-design-system.html

Lines changed: 335 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Overview regarding the technical components out of the DB UX Design System by Deutsche Bahn.">
8+
<title>DB UI</title>
9+
<link
10+
rel="stylesheet"
11+
href="https://db-ui.github.io/core/css/enterprise/db-ui-core.css"
12+
/>
13+
<link
14+
rel="stylesheet"
15+
href="https://db-ui.github.io/core/css/pattern-scaffolding-project-specific.css"
16+
/>
17+
<link rel="stylesheet" href="styles.css" />
18+
<link rel="alternate" href="index.html" hreflang="en" />
19+
</head>
20+
<body class="tpl-intro">
21+
<header class="rea-header" role="banner">
22+
<div class="cmp-brand">
23+
<a href="#" title="Home" rel="home">
24+
<img
25+
src="images/db_logo.svg"
26+
alt="back to the homepage"
27+
width="100"
28+
height="70"
29+
class="elm-image is-logo"
30+
elementtiming="logo"
31+
/>
32+
</a>
33+
</div>
34+
</header>
35+
<main id="en">
36+
<section>
37+
<h1>DB UX Design System</h1>
38+
<p>
39+
Willkommen beim Design System der Deutschen Bahn für digitale Produkte und Services. Mit den Komponenten in Code und Design, einer zentralen Sketch-Library, Code Components und umfassenden Guidelines helfen wir dir, Produkte und Services schneller, effizienter und konsistenter zu gestalten. Dabei basiert das System als "One Single Source of Truth" natürlich auf der Design Language der Marke und stellt so ein markenkonsistentes Design sicher.
40+
</p>
41+
<p>Wir stellen Ihnen demnächst mit der Beta-Version öffentlich weitere Informationen zur Verfügung.</p>
42+
</section>
43+
<section class="ecosystem">
44+
<h2 class="elm-headline">Produktlandschaft</h2>
45+
46+
<ul>
47+
<li><a href="https://www.npmjs.com/package/@db-ui/foundations"><code>@db-ui/foundations</code></a></li>
48+
<li><a href="https://www.npmjs.com/package/@db-ui/components"><code>@db-ui/components</code></a></li>
49+
<li><a href="https://www.npmjs.com/package/@db-ui/ngx-components">Angular Components</a></li>
50+
<li><a href="https://www.npmjs.com/package/@db-ui/react-components">React Components</a></li>
51+
<li><a href="https://www.npmjs.com/package/@db-ui/v-components">Vue Components</a></li>
52+
</ul>
53+
</section>
54+
55+
<section>
56+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
57+
<h2 class="elm-headline">Kern Prinzipien</h2>
58+
59+
<ul class="cmp-cards">
60+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
61+
<li class="cmp-card" data-variant="banner">
62+
<figure>
63+
<svg
64+
xmlns="http://www.w3.org/2000/svg"
65+
width="64"
66+
height="64"
67+
aria-hidden="true"
68+
>
69+
<use
70+
href="icons/illustrative/devices/db_ic_il_laptop.svg#icon"
71+
></use>
72+
</svg>
73+
<figcaption>
74+
<!-- [html-validate-disable-next heading-level] -->
75+
<h3 class="elm-headline">Konsistent &amp; Konform</h3>
76+
<p>
77+
DB UI Core basiert auf dem
78+
<a
79+
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
80+
target="_blank"
81+
>DB UX Design System</a
82+
>, den Richtlinien für alle Kunden- und Enterprise Websites und Web Anwendungen des DB Personenverkehrs.
83+
</p>
84+
</figcaption>
85+
</figure>
86+
</li>
87+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
88+
<li class="cmp-card" data-variant="banner">
89+
<figure>
90+
<svg
91+
xmlns="http://www.w3.org/2000/svg"
92+
width="64"
93+
height="64"
94+
aria-hidden="true"
95+
>
96+
<use
97+
href="icons/illustrative/action/db_ic_il_handshake.svg#icon"
98+
></use>
99+
</svg>
100+
<figcaption>
101+
<!-- [html-validate-disable-next heading-level] -->
102+
<h3 class="elm-headline">Barrierefrei</h3>
103+
<p>
104+
DB UI Core setzt auf sematisches HTML, ARIA Rollen, Zustände und
105+
Eigenschaften um die Gestaltung anzubinden, und erzwingt damit korrektes,
106+
zugängliches Markup. Zudem lassen wir unsere Arbeiten durch das
107+
<a
108+
href="https://db.de/8pei5n"
109+
target="_blank"
110+
rel="noopener noreferrer"
111+
>Team Digital Accessibility</a
112+
> testen.
113+
</p>
114+
</figcaption>
115+
</figure>
116+
</li>
117+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
118+
<li class="cmp-card" data-variant="banner">
119+
<figure>
120+
<svg
121+
xmlns="http://www.w3.org/2000/svg"
122+
width="64"
123+
height="64"
124+
aria-hidden="true"
125+
>
126+
<use
127+
href="icons/illustrative/news/db_ic_il_newspaper.svg#icon"
128+
></use>
129+
</svg>
130+
<figcaption>
131+
<!-- [html-validate-disable-next heading-level] -->
132+
<h3 class="elm-headline">Deklarativ</h3>
133+
<p>
134+
Wir verwenden beschreibende HTML Klassen-Benamungen
135+
anstelle von visuellen Helfern, sodass unsere Auszeichnungen
136+
und die Struktur schlank, performant, einfach zu aktualisieren,
137+
als auch für Menschen klar verständlich sind.
138+
</p>
139+
</figcaption>
140+
</figure>
141+
</li>
142+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
143+
<li class="cmp-card" data-variant="banner">
144+
<figure>
145+
<svg
146+
xmlns="http://www.w3.org/2000/svg"
147+
width="64"
148+
height="64"
149+
aria-hidden="true"
150+
>
151+
<use
152+
href="icons/illustrative/communication/db_ic_il_broken.svg#icon"
153+
></use>
154+
</svg>
155+
<figcaption>
156+
<!-- [html-validate-disable-next heading-level] -->
157+
<h3 class="elm-headline">Unabhängig</h3>
158+
<p>
159+
Unser Code ist entkoppelt von der JavaScript Schicht, sodass
160+
unsere Komponenten in jedem Web Technologie-Kontext
161+
implementiert werden können; zudem stellen wir universelle Web Components
162+
als auch "native" JS Framework Komponenten mit
163+
<a href="https://db-ui.github.io/elements/" target="_blank"
164+
>DB UI Elements</a
165+
>
166+
bereit.
167+
</p>
168+
</figcaption>
169+
</figure>
170+
</li>
171+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
172+
<li class="cmp-card" data-variant="banner">
173+
<figure>
174+
<svg
175+
xmlns="http://www.w3.org/2000/svg"
176+
width="64"
177+
height="64"
178+
aria-hidden="true"
179+
>
180+
<use
181+
href="icons/illustrative/feature/db_ic_il_green.svg#icon"
182+
></use>
183+
</svg>
184+
<figcaption>
185+
<!-- [html-validate-disable-next heading-level] -->
186+
<h3 class="elm-headline">Aktuell</h3>
187+
<p>
188+
Mit der Weiterentwicklung des
189+
<a
190+
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
191+
target="_blank"
192+
>DB UX Design Systems</a
193+
>
194+
stellen wir auch stets Code Aktualisierungen bereit,
195+
sodass unsere Entwickelnden lediglich die Pakete aktualisieren
196+
müssen, um den visuellen und funktionalen Neuerungen zu erhalten.
197+
</p>
198+
</figcaption>
199+
</figure>
200+
</li>
201+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
202+
<li class="cmp-card" data-variant="banner">
203+
<figure>
204+
<svg
205+
xmlns="http://www.w3.org/2000/svg"
206+
width="64"
207+
height="64"
208+
aria-hidden="true"
209+
>
210+
<use
211+
href="icons/illustrative/action/db_ic_il_tips.svg#icon"
212+
></use>
213+
</svg>
214+
<figcaption>
215+
<!-- [html-validate-disable-next heading-level] -->
216+
<h3 class="elm-headline">Gemeinschaftlich</h3>
217+
<p>
218+
DB UI versteht sich als technologische Platform für eine zentrale Basis
219+
kuratierter Komponenten; deren Entwicklung ist stark unterstützt
220+
von der Community, und adaptiert aus den Arbeiten in
221+
den Projekten sowie zahlreichen Rückmeldungen.
222+
</p>
223+
</figcaption>
224+
</figure>
225+
</li>
226+
</ul>
227+
</section>
228+
229+
<section>
230+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
231+
<h2 class="elm-headline">Nutzung</h2>
232+
<p>
233+
Zunächst muss DB UI Core als Abhängigkeit im Projekt installiert werden und
234+
und dann im HTML das CSS referenziert werden.<br>
235+
Hierzu haben wir im
236+
<a
237+
href="https://github.com/db-ui/core/tree/main/docs/getStarted.adoc"
238+
target="_blank"
239+
rel="noopener noreferrer"
240+
hreflang="en">Get Started(docs)</a
241+
> detailierte Informationen bereitgestellt.<br>
242+
Im Falle der Entwicklung einer JavaScript Anwendung sollte insbesondere auch
243+
<a href="https://db-ui.github.io/elements/" target="_blank"
244+
>DB UI Elements</a
245+
> in Betracht gezogen werden, das auf DB UI Core basiert und mit dem wir den
246+
Web Standard der Web Components bereitstellen für ein einfaches Einbinden
247+
in diese Technologien.
248+
</p>
249+
250+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
251+
<h2 class="elm-headline">Weitere Informationen</h2>
252+
<p>
253+
Zusätzlich stellen wir stetig weitere Informationen zu unserem Ökosystem bereit:
254+
</p>
255+
<ul class="cmp-link-list">
256+
<li>
257+
<a
258+
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
259+
class="elm-link"
260+
title=""
261+
rel="noopener noreferrer"
262+
target="_blank"
263+
>DB UX Design System Dokumentation im DB Marketingportal
264+
</a>
265+
</li>
266+
<li>
267+
<a
268+
href="https://db.de/pu8moh"
269+
class="elm-link"
270+
title=""
271+
rel="noopener noreferrer"
272+
target="_blank"
273+
>Confluence Wiki – "Technische Umsetzung des Enterprise UI
274+
Design Systems" (nur intern verfügbar)
275+
</a>
276+
</li>
277+
<li>
278+
<a
279+
href="https://db.de/1tyr73"
280+
class="elm-link"
281+
title=""
282+
rel="noopener noreferrer"
283+
target="_blank"
284+
>Confluence – Web UI Komponenten Bibliothek Library (nur intern verfügbar)
285+
</a>
286+
</li>
287+
<li>
288+
<a
289+
href="https://github.com/db-ui/core/blob/main/CHANGELOG.md"
290+
class="elm-link"
291+
title=""
292+
rel="noopener noreferrer"
293+
target="_blank"
294+
>Änderungshistorie / Changelog
295+
</a>
296+
</li>
297+
<li>
298+
<a
299+
href="https://github.com/db-ui/core/tree/main/docs/adr"
300+
class="elm-link"
301+
title=""
302+
rel="noopener noreferrer"
303+
target="_blank"
304+
>Architekturentscheidungen bzw. <abbr title="Architectural Decision Records">ADRs</abbr>
305+
</a>
306+
</li>
307+
</ul>
308+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
309+
<h2 class="elm-headline">Gebt uns Euer Feedback!</h2>
310+
<p>
311+
Durch Eure Rückmeldungen können wir uns stets weiterentwickeln – Ihr könnt uns entweder kontaktieren im
312+
<a
313+
href="https://db.de/krnm74"
314+
class="elm-link"
315+
title="Title text"
316+
rel="noopener noreferrer"
317+
target="_blank"
318+
>DB UI Kanal der Web Dev Community in Microsoft Teams (nur DB intern)
319+
</a>
320+
, oder schreibt direkt an
321+
<a
322+
href="mailto:[email protected]"
323+
class="elm-link"
324+
title="Title text"
325+
>[email protected]
326+
</a>
327+
. Bitte unterstützt uns daher auf den Wegen, die Euch möglich sind,
328+
wir freuen uns darüber sehr !<br>
329+
Wir sind eifrig dabei, möglichst viele Beispiele zu den Verhalten
330+
hinzuzufügen, um diese bestmöglich zu erklären.
331+
</p>
332+
</section>
333+
</main>
334+
</body>
335+
</html>

0 commit comments

Comments
 (0)