From 6f38c6c5e190412f9af185865f2a60c002583d4b Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Wed, 22 Nov 2017 16:46:43 +0100
Subject: [PATCH] add styles docs

---
 frontend/styles_and_layout.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend/styles_and_layout.md b/frontend/styles_and_layout.md
index 99bfcda..5c56108 100644
--- a/frontend/styles_and_layout.md
+++ b/frontend/styles_and_layout.md
@@ -34,6 +34,10 @@ This project uses font-awesome for its icons, the following example allows for s
 </i>
 ```
 
+## Colors
+
+Coloring can be added to many elements such as icons, sections etc. Available colors are `lightgreen`, `green`, `darkgreen`, `lightblue`, `blue`, `darkblue`, `lightred`, `red`, `darkred`, `lightyellow`, `yellow`, `lightorange`, `orange`, `white`, `lightgrey`, `grey`, `black`, `lightpurple`, `purple`, `darkpurple`, `lightteal`, `teal`, `darkteal`, `lightpink`, `pink`.
+
 ## Form Elements
 
 ### Input with button
@@ -60,6 +64,25 @@ The following snippet creates a dictionary button (e.g. for opening a popup wind
 
 ## Section
 
+A section is a container for information that can and should be grouped together.
+
+```html
+<section class="box wf-100">
+    <h1>Title</h1>
+    <div class="inner">
+        ...
+    </div>
+</section>
+```
+
+Additional coloring of sections can be achieved by adding a coloring class.
+
+```html
+<section class="box green">
+    ...
+</section>
+```
+
 ## Tabs
 
 ## Tables