diff --git a/docs/10_Description.md b/docs/10_Description.md
new file mode 100644
index 0000000000000000000000000000000000000000..e3a0755dd1f91574d93c77bb593cfc3aaa4ec5eb
--- /dev/null
+++ b/docs/10_Description.md
@@ -0,0 +1,18 @@
+## What is it?
+
+AdminLTE is a Bootstrap based framework to create admin like webinterfaces.
+
+Two entry points for AdminLTE are:
+
+* source: <https://adminlte.io/themes/v3/starter.html>
+* docs: <https://adminlte.io/docs/3.2/index.html>
+
+The AdminLTE renderer class offers several methods to render
+
+* the page
+* layout elements
+* components you can use on the page
+ * navigation
+ * boxes
+ * buttons
+ * ...
diff --git a/docs/20_Installation.md b/docs/20_Installation.md
new file mode 100644
index 0000000000000000000000000000000000000000..d6c95e7e83d5636431d87c215395ee355081e558
--- /dev/null
+++ b/docs/20_Installation.md
@@ -0,0 +1,32 @@
+## Start from scratch
+
+If you have no AdminLTE page and want to jump in from point zero:
+
+* copy **public_html/vendor/** into your webroot - it contains
+ * AdminLTE framework
+ * AdminLTE plugins: Bootstrap, jQuery, Fontawesome icons
+* copy **public_html/config/00_page.tpl.php.dist** to a template directory
+
+Continue:
+
+* [Page layout](30_Page_layout.md)
+* [Navigation](40_Navigation.md)
+* [Components](50_Components/index)
+
+## Copy needed files only
+
+If you have a webapp using AdminLTE already you can profit from the rendering class.
+
+Copy these files into your class folder of your project
+
+* public_html/classes/render-adminlte.class.php
+* public_html/classes/htmlelements.class.php
+
+In your output file you need to reference it and create an instance:
+
+```php
+require_once('classes/render-adminlte.class.php');
+$renderAdminLTE=new renderadminlte();
+```
+
+Continue: [Components](50_Components/index)
\ No newline at end of file
diff --git a/docs/20_page_layout.md b/docs/30_Page_layout.md
similarity index 87%
rename from docs/20_page_layout.md
rename to docs/30_Page_layout.md
index 474275cea62c73357f52f3f9b613948f53e3bb89..15e969d8c541527ca34e53062f1496ad2e705a98 100644
--- a/docs/20_page_layout.md
+++ b/docs/30_Page_layout.md
@@ -1,11 +1,6 @@
## Page layout
-Two entry points for AdminLTE are:
-
-* source: <https://adminlte.io/themes/v3/starter.html>
-* docs: <https://adminlte.io/docs/3.2/index.html>
-
-see file public_html/config/**00_page.tpl.php** - this is a basic page created from starter page of AdminLTE with some placeholders.
+See file public_html/config/**00_page.tpl.php** - this is a basic page created from starter page of AdminLTE with some placeholders.
### Helper variables
@@ -43,28 +38,30 @@ Variable | Description
```php
require_once('classes/render-adminlte.class.php');
-
-$oHtml=new htmlelements();
$renderAdminLTE=new renderadminlte();
-...
```
The we can use `$renderAdminLTE` to render elements with its public functions.
### Define replacements
+Create an array and define all placeholders `{{MY_VALUE}}`as keys and set a value with the html content.
+
```php
$aReplace=[];
$aReplace['{{MY_VALUE}}']='Content for {{MY_VALUE}}';
```
-### Load the template into a string
+### Render the first page
+
+Next to the replacements you need to load the html template that contains the html code with the placeholders, eg.
```php
$sTemplate=file_get_contents('config/00_page.tpl.php');
```
-### First example
+... and apply the replacements.
+This is a working example to see a first page:
```php
require_once('classes/render-adminlte.class.php');
diff --git a/docs/50_Components/10_Grid.md b/docs/50_Components/10_Grid.md
new file mode 100644
index 0000000000000000000000000000000000000000..57ffc40904e26e5728ad4b9c47e435fb521fa2c5
--- /dev/null
+++ b/docs/50_Components/10_Grid.md
@@ -0,0 +1,40 @@
+## Using the grid
+
+You can use muliple rows ... and divide each row in multiple columns. The grid contains 12 rows.
+
+## Rows
+
+### Syntax
+
+```php
+$renderAdminLTE->addRow([HTML code]);
+```
+
+### Parameters
+
+* [HTML code] - {string} Html code of the visible content
+
+## Columns
+
+### Syntax
+
+```php
+$renderAdminLTE->addCol([HTML code], [Width]);
+```
+
+### Parameters
+
+* [HTML code] - {string} Html code of the visible content
+* [Width] - {integer} number of column width; values: 1..12
+
+### Example
+
+You can define a width of 1..12 to define a screen width of your cell.
+
+To divide it in 3 parts:
+
+```php
+echo $renderAdminLTE->addCol("column 1/ 3", 4 );
+echo $renderAdminLTE->addCol("column 2/ 3", 4 );
+echo $renderAdminLTE->addCol("column 3/ 3", 4 );
+```
\ No newline at end of file
diff --git a/docs/50_Components/Alert.md b/docs/50_Components/Alert.md
new file mode 100644
index 0000000000000000000000000000000000000000..80c9f4f122ab1651871ebb9b5bc28c18c179d8b4
--- /dev/null
+++ b/docs/50_Components/Alert.md
@@ -0,0 +1,32 @@
+## Badge
+
+A badge is a small counter or info next to a text info,
+
+### Syntax
+
+```php
+$renderAdminLTE->getBadge($aOptions);
+```
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Key | Description
+--- | ---
+bgcolor | optional: background color (without prefix "bg"); hint: you should prefer a "type".
+class | optional: additional css class
+id | optional: additional id attribute
+text | visible text
+title | title
+type | one of `[none]|danger|dark|info|primary|secondary|success|warning`
+
+### Example
+
+```php
+$renderAdminLTE->getBadge([
+ 'type'=>'danger',
+ 'title'=>'Errors: 5',
+ 'text'=>'5',
+])
+```
diff --git a/docs/50_Components/Badge.md b/docs/50_Components/Badge.md
new file mode 100644
index 0000000000000000000000000000000000000000..80c9f4f122ab1651871ebb9b5bc28c18c179d8b4
--- /dev/null
+++ b/docs/50_Components/Badge.md
@@ -0,0 +1,32 @@
+## Badge
+
+A badge is a small counter or info next to a text info,
+
+### Syntax
+
+```php
+$renderAdminLTE->getBadge($aOptions);
+```
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Key | Description
+--- | ---
+bgcolor | optional: background color (without prefix "bg"); hint: you should prefer a "type".
+class | optional: additional css class
+id | optional: additional id attribute
+text | visible text
+title | title
+type | one of `[none]|danger|dark|info|primary|secondary|success|warning`
+
+### Example
+
+```php
+$renderAdminLTE->getBadge([
+ 'type'=>'danger',
+ 'title'=>'Errors: 5',
+ 'text'=>'5',
+])
+```
diff --git a/docs/50_Components/_index.md b/docs/50_Components/_index.md
new file mode 100644
index 0000000000000000000000000000000000000000..8957353d008bcb0c802df8c751182bfeff68d7ae
--- /dev/null
+++ b/docs/50_Components/_index.md
@@ -0,0 +1,7 @@
+<html>
+<div class="hero">
+
+ <h2>AdminLTE 3 :: Components</h2>
+
+</div>
+</html>
diff --git a/docs/_index.md b/docs/_index.md
index f1259a2eba83d6f8afeb2ea5b652cc7693ed7660..83a6b44c83476c3a84fcad11ccfdd6cecd455d6a 100644
--- a/docs/_index.md
+++ b/docs/_index.md
@@ -1,8 +1,8 @@
<html>
<div class="hero">
- <h2>AdminLTE 3 :: Renderer</h2>
- PHP class to render elements of AdminLTE template
+ <h2>AdminLTE 3 :: Renderer</h2>
+ PHP class to render elements of AdminLTE template
</div>
</html>