{"id":21232228,"url":"https://github.com/db-ui/core","last_synced_at":"2025-04-07T12:10:16.778Z","repository":{"id":39968876,"uuid":"489307280","full_name":"db-ui/core","owner":"db-ui","description":"Technical Frontend implementation of the DB UX Design System (Version 2).","archived":false,"fork":false,"pushed_at":"2025-04-03T01:33:42.000Z","size":197173,"stargazers_count":28,"open_issues_count":90,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-03T02:28:25.689Z","etag":null,"topics":["a11y","accessibility","css","design-system","hacktoberfest","html","html5","styleguide"],"latest_commit_sha":null,"homepage":"https://db-ui.github.io/core/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/db-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-06T10:11:27.000Z","updated_at":"2025-04-03T01:33:46.000Z","dependencies_parsed_at":"2023-09-22T16:31:46.128Z","dependency_job_id":"34717f86-be01-4096-8a50-ec39c2cd8d72","html_url":"https://github.com/db-ui/core","commit_stats":{"total_commits":314,"total_committers":9,"mean_commits":"34.888888888888886","dds":0.5063694267515924,"last_synced_commit":"8d6bbdcf85fa69cca5d9bd1ab8ed73421e1f6f12"},"previous_names":[],"tags_count":86,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ui%2Fcore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ui%2Fcore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ui%2Fcore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ui%2Fcore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/db-ui","download_url":"https://codeload.github.com/db-ui/core/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","css","design-system","hacktoberfest","html","html5","styleguide"],"created_at":"2024-11-20T23:50:10.463Z","updated_at":"2025-04-07T12:10:16.771Z","avatar_url":"https://github.com/db-ui.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-configure-file { \"MD013\": false, \"MD041\":false } --\u003e\n\n\u003c!-- markdownlint-disable MD033 --\u003e\n\n\u003cimg src=\"source/samples/images/header_image_0.guetzli.jpg\" alt=\"\" srcset=\"source/samples/images/header_image_0.guetzli.2x.jpg 2x, source/samples/images/header_image_0.guetzli.3x.jpg 3x\"\u003e \u003c!-- width=\"830\" height=\"276\" //--\u003e\n\n\u003c!-- markdownlint-enable MD033 --\u003e\n\n# DB UI Core\n\n![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n[![@db-ui/core on Npmjs](https://img.shields.io/npm/v/@db-ui/core.svg?color=rgb%28237%2C%2028%2C%2036%29 \"npm version\")](https://npmjs.com/package/@db-ui/core \"DB UI Core – on NPM\")\n![Based on DB UX Design System version 2](https://img.shields.io/badge/Based%20on-DB%20Design%20System-d7dce1.svg)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE-OF-CONDUCT.md)\n\n\u003c!-- ![Pipeline status](https://github.com/db-ui/core/badges/main/pipeline.svg?style=flat) --\u003e\n\n\u003c!-- markdownlint-disable MD033 --\u003e\n\n\u003e [!IMPORTANT]\n\u003e We've released the new stable version of the [DB UX Design System v3](https://github.com/db-ux-design-system/core-web), which is the successor to this generation of DB Design Systems.\n\u003e Especially for new projects, we strongly recommend building on [DB UX Design System v3](https://github.com/db-ux-design-system/core-web).\n\u003e The new version has some great benefits and optimisations, especially in terms of accessibility testing, further and better framework support and ongoing development.\u003cbr\u003e\n\u003e Please note that we won't be providing any new features from now on, only bug fixes until EOL at the end of 2026.\n\n\u003c!-- markdownlint-enable MD033 --\u003e\n\n\u003e [!WARNING]\n\u003e We've tried a [quick migration to newer SCSS syntax like e.g. `@use` instead of the nowadays deprecated `@import`](https://github.com/db-ui/core/issues/994), but this seems to be more complicated than expected.\n\u003e You might face several warnings on the console when using SASS with our packages regarding `@import` usage. If you'd like to prevent those, you might as well want to evaluate migrating to our newer version of the DB UX Design System: \u003chttps://github.com/db-ux-design-system/core-web\u003e\n\nDB Personenverkehr and DB Systel have merged their Design Systems for Web [with DB UX Design System v2](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components) as their successor. Our goal is to provide a common UX based on the [DB \"Moderne Ikone\"](https://marketingportal.extranet.deutschebahn.com/marketingportal/Marke-und-Design#) 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.\n\nDB 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.\n\n\u003c!-- markdownlint-disable MD033 MD010 --\u003e\n\u003cfigure\u003e\n\t\u003ccite\u003eWe’re not designing pages anymore. We’re designing systems of components.\u003c/cite\u003e\n\t\u003cfigcaption\u003e\u003ca href=\"https://bradfrost.com/blog/post/bdconf-stephen-hay-presents-responsive-design-workflow/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eStephen Hay\u003c/a\u003e. \u003ca href=\"https://vimeo.com/67476280\" title=\"Brad Frosts at beyond tellerrand conference regarding Atomic Design\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eCited in a talk by Brad Frost at beyond tellerrand conference.\u003c/a\u003e\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n## \u003cabbr title=\"too long; didn't read\"\u003etl;dr\u003c/abbr\u003e: \"too long\" Danny replied\n\n\u003c!-- markdownlint-enable MD033 MD010 --\u003e\n\n- [Getting started](docs/getStarted.adoc)\n- [GitHub - DB UI Core](https://github.com/db-ui/core/)\n- [Hosted version of DB UI Core living styleguide](https://db.de/db-ui)\n- Recommended for JavaScript application development: [DB UI Elements](https://db-ui.github.io/elements/)\n- [Migrating guide from version 1 of DB UI Core to version 2](docs/migrationGuide.adoc#user-content-db-ui-core-2-0-0-migration-guide)\n\n## Core principals\n\n### Consistent \u0026 Compliant\n\nDB UI Core is based on the [DB UX Design System v2](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components), that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.\n\n### Accessible\n\nDB 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](https://db.de/8pei5n).\n\n### Declarative\n\nDB 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.\n\n### Decoupled\n\nDB 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](https://db-ui.github.io/elements/) as well.\n\n### Evergreen\n\nAs [DB UX Design System v2](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components) 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.\n\n## More information\n\nAdditionally we'll provide some more information over time regrading the whole ecosystem:\n\n- [DB UX Design System v2 documentation within the DB Marketingportal (german)](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components)\n- [Confluence / Base Wiki - \"Technische Umsetzung des Enterprise UI Design Systems\" (german, only available internally)](https://db.de/pu8moh)\n- [Confluence - Web UI Component Library (only available internally)](https://db.de/1tyr73)\n- [Changelog](https://github.com/db-ui/core/blob/main/CHANGELOG.md)\n- [Architectural Decision Records](https://github.com/db-ui/core/tree/main/docs/adr)\n- [DB UI Core 1.x Gitlab repository (only accessible internally)](https://db.de/4cwtyn/)\n\n## Things to keep in mind\n\n### Developed for and driven by the community\n\nThis 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!\n\n## How to use\n\nDownload 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_).\n\n### _npmjs.com_ or _yarn_ (recommended)\n\nIn 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.\nPlease have a look into the [Docs / Get Started](docs/getStarted.adoc) for detailed instructions.\n\n### Download or CDN references\n\nYou 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 \u003chttps://yarnpkg.com/package/@db-ui/core\u003e\n\n## How to start develop / contribute\n\n```Bash\nnpm install\nnpm run build\nnpm run start\n```\n\nPlease mind the [conventions for git commits](/docs/conventions.adoc#user-content-git-commits-conventions).\n\n\u003c!-- markdownlint-disable MD026 --\u003e\n\n## Give us your feedback!\n\n\u003c!-- markdownlint-disable MD026 --\u003e\n\n\u003c!-- markdownlint-disable MD033 --\u003e\n\nThis is only the first version of our framework and we really want your feedback - either within the \u003ca href=\"https://db.de/krnm74\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eDB UI Channel by Web Dev Community in Microsoft Teams (only available DB internally)\u003c/a\u003e, or directly at [db-ux-designsystem@deutschebahn.com](mailto:db-ux-designsystem@deutschebahn.com).\nWe're particularly keen to add as many examples to the behaviours as possible, to further clarify them.\n\n## FAQ\n\n### Our `scss` / `sass` build doesn't work any more after migrating from version 1 of DB UI Core.\n\nIn 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](docs/migrationGuide.adoc#user-content-db-ui-core-2-0-0-migration-guide):\n\n```shell\n./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n╷\n│ @use \"@csstools/normalize.css/normalize.css\";\n│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n╵\nnode_modules\\@db-ui\\core\\sources\\css\\enterprise\\db-ui-core.scss 7:1 @import\nnode_modules\\@db-ui\\core\\sources\\css\\enterprise\\db-ui-core-include.scss 4:9 @import\nsrc\\styles.scss 5:9 root stylesheet\n```\n\n## Deutsche Bahn brand\n\nAs 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.\nPlease have a look at our [brand portal](https://marketingportal.extranet.deutschebahn.com/) 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)](https://marketingportal.extranet.deutschebahn.com/marketingportal/Nutzungsbedingungen-9702684) in case of using them.\n\nFor 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.\n\nThis especially relates to the files in the directories `/source/fonts/`, `source/images` and `source/samples` and `source/favicon.ico` as well.\n\n## Contributions\n\nContributions are very welcome, please refer to the [contribution guide](CONTRIBUTING.md).\n\n## Third party acknowledgments – many kudos for that !!!\n\n- [open privacy by opr.vc](https://opr.vc)\n\n## Code of conduct\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](CODE-OF-CONDUCT.md).\n\n## License\n\nThis project is licensed under [Apache-2.0](LICENSE), Copyright 2024 by DB Systel GmbH.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdb-ui%2Fcore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdb-ui%2Fcore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdb-ui%2Fcore/lists"}