Skip to content

Commit 7cf9238

Browse files
mfranzkemfranzke
authored
Merge pull request #2 from db-ui/docs-added-new-document-for-db-ux-design-system
docs: added new document for DB UX Design System
2 parents e7fde16 + 0783a97 commit 7cf9238

File tree

1 file changed

+226
-0
lines changed

1 file changed

+226
-0
lines changed

‎db-ux-design-system.html

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
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+
</head>
19+
<body class="tpl-intro">
20+
<header class="rea-header" role="banner">
21+
<div class="cmp-brand">
22+
<a href="#" title="Home" rel="home">
23+
<img
24+
src="images/db_logo.svg"
25+
alt="back to the homepage"
26+
width="100"
27+
height="70"
28+
class="elm-image is-logo"
29+
elementtiming="logo"
30+
/>
31+
</a>
32+
</div>
33+
</header>
34+
<main id="en">
35+
<section>
36+
<h1>DB UX Design System</h1>
37+
<p>
38+
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.
39+
</p>
40+
<p>Wir stellen Ihnen demnächst mit der Beta-Version öffentlich weitere Informationen zur Verfügung.</p>
41+
</section>
42+
<section class="ecosystem">
43+
<h2 class="elm-headline">Produktlandschaft</h2>
44+
45+
<ul>
46+
<li><a href="https://www.npmjs.com/package/@db-ui/foundations"><code>@db-ui/foundations</code></a></li>
47+
<li><a href="https://www.npmjs.com/package/@db-ui/components"><code>@db-ui/components</code></a></li>
48+
<li><a href="https://www.npmjs.com/package/@db-ui/ngx-components">Angular Components</a></li>
49+
<li><a href="https://www.npmjs.com/package/@db-ui/react-components">React Components</a></li>
50+
<li><a href="https://www.npmjs.com/package/@db-ui/v-components">Vue Components</a></li>
51+
</ul>
52+
</section>
53+
54+
<section>
55+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
56+
<h2 class="elm-headline">Kern Prinzipien</h2>
57+
58+
<ul class="cmp-cards">
59+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
60+
<li class="cmp-card" data-variant="banner">
61+
<figure>
62+
<svg
63+
xmlns="http://www.w3.org/2000/svg"
64+
width="64"
65+
height="64"
66+
aria-hidden="true"
67+
>
68+
<use
69+
href="icons/illustrative/devices/db_ic_il_laptop.svg#icon"
70+
></use>
71+
</svg>
72+
<figcaption>
73+
<!-- [html-validate-disable-next heading-level] -->
74+
<h3 class="elm-headline">Konsistent &amp; Konform</h3>
75+
<p>
76+
DB UI Components basiert auf dem
77+
<a
78+
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
79+
target="_blank"
80+
>DB UX Design System</a
81+
>, den Richtlinien für Kunden- und Enterprise Websites und Web Anwendungen der Deutschen Bahn.
82+
</p>
83+
</figcaption>
84+
</figure>
85+
</li>
86+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
87+
<li class="cmp-card" data-variant="banner">
88+
<figure>
89+
<svg
90+
xmlns="http://www.w3.org/2000/svg"
91+
width="64"
92+
height="64"
93+
aria-hidden="true"
94+
>
95+
<use
96+
href="icons/illustrative/action/db_ic_il_handshake.svg#icon"
97+
></use>
98+
</svg>
99+
<figcaption>
100+
<!-- [html-validate-disable-next heading-level] -->
101+
<h3 class="elm-headline">Barrierefrei</h3>
102+
<p>
103+
DB UI Components setzt auf sematisches HTML, ARIA Rollen, Zustände und
104+
Eigenschaften um die Gestaltung anzubinden, und erzwingt damit korrektes,
105+
zugängliches Markup. Zudem lassen wir unsere Arbeiten durch das
106+
<a
107+
href="https://db.de/8pei5n"
108+
target="_blank"
109+
rel="noopener noreferrer"
110+
>Team Digital Accessibility</a
111+
> testen.
112+
</p>
113+
</figcaption>
114+
</figure>
115+
</li>
116+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
117+
<li class="cmp-card" data-variant="banner">
118+
<figure>
119+
<svg
120+
xmlns="http://www.w3.org/2000/svg"
121+
width="64"
122+
height="64"
123+
aria-hidden="true"
124+
>
125+
<use
126+
href="icons/illustrative/news/db_ic_il_newspaper.svg#icon"
127+
></use>
128+
</svg>
129+
<figcaption>
130+
<!-- [html-validate-disable-next heading-level] -->
131+
<h3 class="elm-headline">Deklarativ</h3>
132+
<p>
133+
Wir verwenden beschreibende HTML Klassen-Benamungen
134+
anstelle von visuellen Helfern, sodass unsere Auszeichnungen
135+
und die Struktur schlank, performant, einfach zu aktualisieren,
136+
als auch für Menschen klar verständlich sind.
137+
</p>
138+
</figcaption>
139+
</figure>
140+
</li>
141+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
142+
<li class="cmp-card" data-variant="banner">
143+
<figure>
144+
<svg
145+
xmlns="http://www.w3.org/2000/svg"
146+
width="64"
147+
height="64"
148+
aria-hidden="true"
149+
>
150+
<use
151+
href="icons/illustrative/communication/db_ic_il_broken.svg#icon"
152+
></use>
153+
</svg>
154+
<figcaption>
155+
<!-- [html-validate-disable-next heading-level] -->
156+
<h3 class="elm-headline">Unabhängig</h3>
157+
<p>
158+
Unser Code ist entkoppelt von der JavaScript Schicht, sodass
159+
unsere Komponenten in jedem Web Technologie-Kontext
160+
implementiert werden können; zudem stellen wir für die großen
161+
JS Frameworks direkt UI Komponenten bereit.
162+
</p>
163+
</figcaption>
164+
</figure>
165+
</li>
166+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
167+
<li class="cmp-card" data-variant="banner">
168+
<figure>
169+
<svg
170+
xmlns="http://www.w3.org/2000/svg"
171+
width="64"
172+
height="64"
173+
aria-hidden="true"
174+
>
175+
<use
176+
href="icons/illustrative/feature/db_ic_il_green.svg#icon"
177+
></use>
178+
</svg>
179+
<figcaption>
180+
<!-- [html-validate-disable-next heading-level] -->
181+
<h3 class="elm-headline">Aktuell</h3>
182+
<p>
183+
Mit der Weiterentwicklung des
184+
<a
185+
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
186+
target="_blank"
187+
>DB UX Design Systems</a
188+
>
189+
stellen wir auch stets Code Aktualisierungen bereit,
190+
sodass unsere Entwickelnden lediglich die Pakete aktualisieren
191+
müssen, um den visuellen und funktionalen Neuerungen zu erhalten.
192+
</p>
193+
</figcaption>
194+
</figure>
195+
</li>
196+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
197+
<li class="cmp-card" data-variant="banner">
198+
<figure>
199+
<svg
200+
xmlns="http://www.w3.org/2000/svg"
201+
width="64"
202+
height="64"
203+
aria-hidden="true"
204+
>
205+
<use
206+
href="icons/illustrative/action/db_ic_il_tips.svg#icon"
207+
></use>
208+
</svg>
209+
<figcaption>
210+
<!-- [html-validate-disable-next heading-level] -->
211+
<h3 class="elm-headline">Gemeinschaftlich</h3>
212+
<p>
213+
DB UI versteht sich als technologische Platform für eine zentrale Basis
214+
kuratierter Komponenten; deren Entwicklung ist stark unterstützt
215+
von der Community, und adaptiert aus den Arbeiten in
216+
den Projekten sowie zahlreichen Rückmeldungen.
217+
</p>
218+
</figcaption>
219+
</figure>
220+
</li>
221+
</ul>
222+
</section>
223+
224+
</main>
225+
</body>
226+
</html>

0 commit comments

Comments
 (0)