You’re a Web Developer and you want to use DB UI Core in your own application. Especially for JavaScript application development, we’re recommending to have a look at DB UI Elements instead.
There are multiple options how to use DB UI Core:
-
Manually copy the artifacts to your project
-
Use npm package
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).
Previous to that you would need to have node.js installed on your local machine. In case you haven’t we recommend installing node via nvm.
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.
npm i --save @db-ui/coreThis should add a new entry to your package.json file:
"dependencies": {
…
"@db-ui/core": "^x.y.z"
}-
You will find the relevant files at
node_modules/@db-ui/core -
Copy all of the files from
node_modules/@db-ui/core/distto your app or link them. Most of the build tools support automatic copying.
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
The integration depends on your tech stack and varies from copying the files from node_modules/@db-ui/core/dist, through using a bundler like webpack or rollup to using a framework that totally abstracts that part away from your workflow.
<link rel="stylesheet" href="<PATH>/enterprise/db-ui-core.css" type="text/css">Please keep in mind, that you would need to set your include path also known as load path depending on your setup for the sass compiler to find the correct node_modules folder, e.g. like the following (this is similar to how other frameworks and libraries like Bootstrap are handling this):
{
"scripts": {
"css-compile": "sass --load-path=node_modules style.scss:style.css",
}
}{
"scripts": {
"css-compile": "node-sass --include-path node_modules style.scss -o assets/css/",
}
}First install npm package as described above. Now you can choose if you want to use compiled css files or sass files.
|
Tip
|
We recommend to import the scss files as in case of angular, the angular cli will optimize, compress and convert all assets automatically during the build process. |
Independently you need to add to angular.json a new line to assets like this:
"assets": [
"src/favicon.ico",
"src/assets",
"src/site.webmanifest",
{ "glob": "**/*", "input": "node_modules/@db-ui/core/dist", "output": "." }
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/"
]
}It will copy on npm build the content of core/dist folder to dist folder in the angular app, that is deployed on ng serve and will give you access to assets like images, icons, etc. exported by DB UI Core. Don’t forget to add it to any necessary configuration part included, like e.g. projects.PROJECTNAME.architect.build.options as well as projects.PROJECTNAME.architect.test.options
You can use the overall scss file or pick the relevant parts.
E.g. you can import the overall scss files to your src/styles.scss by adding the following imports based on your bundler in use.
For Rollup based bundlers like Vite or Parcel we’re providing the following SCSS endpoint:
@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
$icons-path: rollupAssetsPaths.$icons-path,
$images-path: rollupAssetsPaths.$images-path,
$fonts-path: rollupAssetsPaths.$fonts-path
);@use "@db-ui/core/sources/css/webpack.assets-paths" as webpackAssetsPaths;
@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
$icons-path: webpackAssetsPaths.$icons-path,
$images-path: webpackAssetsPaths.$images-path,
$fonts-path: webpackAssetsPaths.$fonts-path
);Please keep in mind, that you would need to set your include path within the angular.json configuration file, like this:
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/"
]
}Or within your vue.config.js (for Vue 2 or 3 CLI):
module.exports = {
(...)
css: {
loaderOptions: {
sass: {
sassOptions: {
includePaths: [path.resolve(__dirname, "node_modules")],
},
},
},
},
};Create React App offers only limited access to the configuration of the production build. While it uses webpack under the hood, the webpack configuration is not exposed to the user. To manage your CRA to work with SASS include Path you have to update or create your .env file:
SASS_PATH=node_modules
In addition to get the asset paths working you have to load them separately. Further description is written above within the section webpack based bundlers.
@import "@db-ui/core/sources/css/webpack.assets-paths";
@import "@db-ui/core/sources/css/enterprise/db-ui-core";Please find our Architectural Decision Records within the adr subfolder.
We’re documenting our work via AsciiDoc files: http://asciidoc.org/ / https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/
In general we’re using CSS variables / CSS Custom Properties which would need a polyfill for Microsoft Internet Explorer 11 and Edge version 12 till 14 support like ie11CustomProperties.