update docs

docs/10_Description.md

+## 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
+  * ...

docs/20_Installation.md

+## 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

docs/20_page_layout.md → docs/30_Page_layout.md

 ## 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');

docs/50_Components/10_Grid.md

+## 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

docs/50_Components/Alert.md

+## 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',
+])
+```

docs/50_Components/Badge.md

+## 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',
+])
+```

docs/50_Components/_index.md

+<html>
+<div class="hero">
+
+  <h2>AdminLTE 3 :: Components</h2>
+
+</div>
+</html>

docs/_index.md

 <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>