DB UI Core

DB Personenverkehr and DB Systel have merged their Design Systems for Web with DB UX Design System v2 as their successor. Our goal is to provide a common UX based on the DB "Moderne Ikone" for customer and employee applications. To achieve an end 2 end consistence from conception to implementation, we bring you this new version of DB UI Core (npm: @db-ui/core), that is being used within a Design System by S.R (Reisendeninformation) as well.

DB UI Core provides robust HTML UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.

tl;dr: "too long" Danny replied

• Getting started
• GitHub - DB UI Core
• Hosted version of DB UI Core living styleguide
• Recommended for JavaScript application development: DB UI Elements
• Migrating guide from version 1 of DB UI Core to version 2

Core principals

Consistent & Compliant

DB UI Core is based on the DB UX Design System, that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.

Accessible

DB UI Core leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus enforcing correct, accessible markup. And we're quality checking this in partnership with the Team Digital Accessibility.

Declarative

DB UI Core uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human read- and understandable, lean, performant and so much easier to update.

Decoupled

DB UI Core is decoupled from the JavaScript layer, to implement the patterns in any Web Development technology context; and we're providing universal Web Components and native JS framework components with DB UI Elements as well.

Evergreen

As DB UX Design System evolves, so does DB UI Core, meaning apps only need to keep their DB UI Core package updated to ensure the latest look and feel.

More information

Additionally we'll provide some more information over time regrading the whole ecosystem:

• DB UX Design System documentation within the DB Marketingportal (german)
• Confluence / Base Wiki - "Technische Umsetzung des Enterprise UI Design Systems" (german, only available internally)
• Confluence - Web UI Component Library (only available internally)
• Changelog
• Architectural Decision Records
• DB UI Core 1.x Gitlab repository (only accessible internally)

Things to keep in mind

Developed for and driven by the community

This is mainly a platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community and adapted out of the work done in projects and through the huge amount of feedback that we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!

How to use

Download DB UI Core to get the compiled CSS (and the small parts of JavaScript), source code, or include it with npm package manager (repository on npmjs.com or yarn).

npmjs.com or yarn (recommended)

In case you'd like to use DB UI Core as a dependency in your (frontend) build process and you even also care about handling DB UI Core as a dependency (e.g. for updates etc.), you need to install it as a dependency to your project and then link it within your HTML (CSS file) or within your SCSS. Please have a look into the Docs / Get Started for detailed instructions.

Download or CDN references

You could as well download all of the files that you would elsewhere retrieve via the node package directly or reference them from a CDN, as provided by the several different services listed e.g. at https://yarnpkg.com/package/@db-ui/core

How to start develop / contribute

npm install
npm run build
npm run start

Please mind the conventions for git commits.

Give us your feedback!

This is only the first version of our framework and we really want your feedback - either within the DB UI Channel by Web Dev Community in Microsoft Teams (only available DB internally), or directly at [email protected]. We're particularly keen to add as many examples to the behaviours as possible, to further clarify them.

FAQ

Our scss / sass build doesn't work any more after migrating from version 1 of DB UI Core.

In case that you're retrieving any errors like the following, please check for whether you've provided the location of your node_modules folders path to your sass compiler:

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
│ @use "@csstools/normalize.css/normalize.css";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\@db-ui\core\sources\css\enterprise\db-ui-core.scss 7:1 @import
node_modules\@db-ui\core\sources\css\enterprise\db-ui-core-include.scss 4:9 @import
src\styles.scss 5:9 root stylesheet

Deutsche Bahn brand

As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound to clear guidelines and restrictions even when being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights and ownership regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license. Please have a look at our brand portal for any further questions and whom to contact on any brand issues. As these assets and visual guidelines are retrieved from our Deutsche Bahn Marketingportal, you'll agree with the "Allgemeine Nutzungsbedingungen für das DB-Marketingportal" (german) in case of using them.

For any usage outside of Deutsche Bahn websites and applications you must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.

This especially relates to the files in the directories /source/fonts/, source/images and source/samples and source/favicon.ico as well.

Contributions

Contributions are very welcome, please refer to the contribution guide.

Third party acknowledgments – many kudos for that !!!

• open privacy by opr.vc

Code of conduct

We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone – have a look at our Contributor Covenant Code of Conduct.

License

This project is licensed under Apache-2.0, Copyright 2024 by DB Systel GmbH.