update installation and contribution for ui

docs/ui/contribution_and_installation.md

@@ -0,0 +1,61 @@
+# Installation
+
+-   see: [@fosscord/ui](https://www.npmjs.com/package/@fosscord/ui)
+
+# Contribution
+
+## Requirements
+
+You should be familiar with:
+
+-   [Git](https://git-scm.com/)
+-   [NodeJS](https://nodejs.org/)
+-   [SCSS](https://sass-lang.com/)
+
+## Getting Started
+
+```bash
+git clone https://github.com/fosscord/fosscord-ui
+cd fosscord-ui
+```
+
+```bash
+npm install
+npm run scss
+```
+
+_Open `./test/index.html` to see the test page._
+
+## Writing a component
+
+> text inside of <> has to be replaced by the corresponding values
+
+1. create a file named like the component you're creating in
+   `test/<component>.html` and `scss/<component>.scss`
+
+2. copy the content of `test/template.html` to `test/<component>.html` and
+   replace the `<h1>` content with the components name
+
+3. source the created `test/<component>.html>` in `test/index.html` as follows:
+   _append the following to `scss/index.scss` to the div with the class
+   `"grid"`_
+
+```html
+<a
+  class="Link"
+  href="<component>.html"
+  class="text link">
+
+  <component>
+</a>
+```
+
+4. source the created `scss/<component>.scss` in `scss/index.scss` as follows:
+   _append the following to `scss/index.scss`_
+
+```scss
+...
+@import "<component>.scss";
+```
+
+4.

docs/ui/installation.md

@@ -1,47 +0,0 @@
-## Requirements
-
-You should be familiar with:
-
--   [Git](https://git-scm.com/)
--   [NodeJS](https://nodejs.org/)
--   [SCSS](https://sass-lang.com/) _You could also just write plain CSS. (SCSS just adds some nice features)_
-
-and the technologies we use for the UI.
-
-## Getting Started
-
-### Step 1
-
-Clone the repository:
-
-```bash
-git clone https://github.com/fosscord/fosscord-ui
-cd fosscord-ui
-```
-
-### Step 2
-
-Install dependencies:
-
-```bash
-npm install
-```
-
-### Step 3
-
-Compile the SCSS:
-
-```
-npm run scss
-```
-
-### Step 4
-
-Open `./test/index.html` for see the test page.
-
-## Debugging
-
-### VS Code
-
-The Launch file configuration is in `./vscode/launch.json`,
-so you can just debug the server by pressing `F5` or the `> Launch Server` button

mkdocs.yml

@@ -42,8 +42,7 @@ nav:
       - gateway/structure.md
   - "Ui Framework":
       - ui/index.md
-      - ui/installation.md
-      - ui/write_a_component.md
+      - ui/contribution_and_installation.md
   - "Client":
       - client/index.md
       - plugins.md