docs: ✏️ added general getting started files

packages/components/docs/getStarted.adoc

@@ -0,0 +1,199 @@
+# Getting started as a Web Developer
+
+## Purpose
+
+You're a Web Developer and you want to use DB UI Components in your own application, whether it's integrating HTML or using our provided Angular, Vue and React components.
+
+In case of the latter, you could directly head over to our JavaScript framework components description:
+
+ * link:howto-angular.md[Angular]
+ * link:howto-vue.md[Vue]
+ * link:howto-react.md[React]
+
+## Options
+
+There are multiple options how to use DB UI Components:
+
+* Manually copy the artifacts to your project
+* Use npm package
+
+## How to use
+
+Download `@db-ui/components` package to get the compiled CSS and 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`](https://github.com/nvm-sh/nvm).
+
+### Use _npmjs.com_ or _yarn_ (installing npm package, recommended)
+
+In case you'd like to use DB UI Components as a dependency in your (frontend) build process and you even also care about handling DB UI Components 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.
+
+[source,bash]
+----
+npm i --save @db-ui/components
+----
+
+This should add a new entry to your `package.json` file:
+[source,json]
+----
+"dependencies": {
+	…
+	"@db-ui/components": "^x.y.z"
+}
+----
+
+* You will find the relevant files at `node_modules/@db-ui/components`
+
+* Copy the `assets` folder from `node_modules/@db-ui/foundations/assets` and the `styles` folder from `node_modules/@db-ui/components/build/styles/` to your application directory or link them. Most of the build tools support automatic copying.
+
+### 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/components
+
+### Integration
+
+The integration depends on your tech stack and varies from copying the files from `node_modules/@db-ui/components/build`, through using a bundler like webpack or rollup to using a framework that totally abstracts that part away from your workflow.
+
+#### Via HTML stylesheet include
+
+[source,html]
+----
+<link rel="stylesheet" href="<PATH>/db-ui-42.css" type="text/css">
+----
+
+#### Via SCSS import
+
+[source,scss]
+----
+@use "@db-ui/components/build/styles/db-ui-42";
+----
+
+### SCSS: node_modules include path / load path
+
+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 link:https://github.com/twbs/bootstrap-npm-starter/blob/main/package.json#L18[Bootstrap] are handling this):
+
+#### link:https://npmjs.com/sass[`sass` compiler]
+
+[source,json]
+----
+{
+	"scripts": {
+    	"css-compile": "sass --load-path=node_modules style.scss:style.css",
+	}
+}
+----
+
+#### link:https://npmjs.com/node-sass[`node-sass` Compiler]
+
+[source,json]
+----
+{
+	"scripts": {
+    	"css-compile": "node-sass --include-path node_modules style.scss -o assets/css/",
+	}
+}
+----
+
+
+
+
+## Example: how to use DB UI Components in Angular
+
+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:
+
+[source,json]
+----
+"assets": [
+	"src/favicon.ico",
+	"src/assets",
+	"src/site.webmanifest",
+	{ "glob": "**/*", "input": "node_modules/@db-ui/components/build", "output": "." }
+],
+"stylePreprocessorOptions": {
+    "includePaths": [
+        "node_modules/"
+    ]
+}
+----
+
+On `npm build` it will copy the content of `node_modules/@db-ui/components/build` 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 Components. 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`
+
+### Use scss files:
+
+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.
+
+#### Webpack based bundlers (e.g. Angular or Vue CLI)
+
+[source,scss]
+----
+@use "@db-ui/components/build/styles/db-ui-42-webpack";
+----
+
+Please keep in mind, that you would need to set your include path within the `angular.json` configuration file, like this:
+
+[source,json]
+----
+"stylePreprocessorOptions": {
+    "includePaths": [
+        "node_modules/"
+    ]
+}
+----
+
+Or within your `vue.config.js` (for Vue 2 or 3 CLI):
+
+[source,json]
+----
+module.exports = {
+  (...)
+  css: {
+    loaderOptions: {
+      sass: {
+        sassOptions: {
+          includePaths: [path.resolve(__dirname, "node_modules")],
+        },
+      },
+    },
+  },
+};
+----
+
+#### Rollup based bundlers (e.g. Vue with Vite)
+
+For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:
+
+[source,scss]
+----
+@use "@db-ui/components/build/styles/db-ui-42-rollup";
+----
+
+
+### Use css files:
+
+If you want to use the compiled CSS directly, you can reference the css files in your index.html like this:
+
+[source,html]
+----
+<link rel="stylesheet" href="styles/db-ui-42.css" type="text/css">
+----
+
+## Example 2: how to use DB UI Components in Create React app
+
+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_.
+
+[source,scss]
+----
+@use "@db-ui/components/build/styles/db-ui-42-webpack";
+----

packages/components/docs/howto-angular.md

@@ -0,0 +1,133 @@
+# Get started with Angular
+
+## Purpose
+
+You are an Application Developer and you want to use DB UI Components in your own Angular app.
+
+## Install via npm
+
+```bash
+npm i -save @db-ui/ngx-components
+```
+
+As a result you should have three new folders in your `node_modules`:
+
+```javascript
+@db-ui
+  /components // DB UI Components stylings
+  /foundations // assets, Design Tokens and sources
+  /ngx-components // Angular framework components
+```
+
+### Integrate in your app
+
+1. Import the DB UI Components Angular library into your `app.modules.ts` file:
+
+```typescript
+...
+import { DBButtonModule } from '@db-ui/ngx-components';
+
+@NgModule({
+  ...
+  imports: […, DBButtonModule]
+})
+export class AppModule {}
+```
+
+2. Use a component inside an `.html` file:
+
+```html
+<DBButton (click)="doSomething()">it works!</DBButton>
+```
+
+### Bundle your App
+
+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.
+
+By adding `{ "glob": "**/*", "input": "node_modules/@db-ui/foundations/assets/", "output": "." }` to your config file `npm build` we copy the content of _node_modules/@db-ui/foundations/assets_ folder to _assets_ folder in the Angular app, that is deployed on `ng serve` and this will give you access to assets like images, icons, etc. provided by DB UI Foundations. 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`
+
+Inside your `angular.json` file you have a "build" step. Under "options" you need to add your style like this:
+
+#### SCSS
+
+```json
+"options":{
+...
+ "assets": [
+              "src/favicon.ico",
+              "src/assets",
+			  { "glob": "**/*", "input": "node_modules/@db-ui/foundations/assets/", "output": "." }
+            ],
+"stylePreprocessorOptions": {
+    "includePaths": [
+        "node_modules/"
+    ]
+},
+...
+}
+```
+
+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.
+
+```scss
+@use "@db-ui/components/build/styles/db-ui-42-webpack";
+```
+
+#### CSS
+
+```json
+"options":{
+...
+ "assets": [
+              "src/favicon.ico",
+              "src/assets",
+			  { "glob": "**/*", "input": "node_modules/@db-ui/foundations/assets/", "output": "." }
+            ],
+"styles":  [
+              "src/styles.css",
+              "node_modules/@db-ui/components/build/styles/db-ui-42-webpack.css"
+            ],
+...
+}
+```
+
+---
+
+### Events
+
+There are 3 ways to use Events in Angular:
+
+**[ngModel](https://angular.io/api/forms/NgModel)**
+
+```html
+<DBInput label="Inputfield" name="input-name" [(ngModel)]="input"></DBInput>
+```
+
+**[FormControl](https://angular.io/api/forms/FormControl)**
+
+```html
+<DBInput
+	label="Inputfield"
+	name="input-name"
+	[formControl]="inputControl"
+></DBInput>
+```
+
+**[change](https://developer.mozilla.org/de/docs/Web/API/HTMLElement/change_event)**
+
+```html
+<DBInput
+	label="Inputfield"
+	name="input-name"
+	(change)="input = $event.target.value"
+></DBInput>
+```
+
+### Example
+
+[Angular current version Showcase GitHub](https://github.com/db-ui/mono/tree/main/showcases/angular-current-showcase)
+
+[Angular LTS Showcase GitHub](https://github.com/db-ui/mono/tree/main/showcases/angular-lts-showcase)