From 6c9435119124d2e1e61e5542aae29b71b6886abe Mon Sep 17 00:00:00 2001
From: Sander van Leeuwen <sander@kraagjes.nl>
Date: Thu, 22 Jan 2015 23:41:09 +0100
Subject: Additional documentation

- Added checkbox example
- Form field help block example
- Button and icon usage explained
---
 README.md | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index dca6a04..5bf7093 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,8 @@ The Bootstrap grid system is used for defining columns. We've chosen the 'small'
 * Every form should have at least one 'panel' which contains the form fields. If certain fields can be grouped together, you can add multiple panels to a form.
 * A field consists of an outer wrapper `.form-group` which contains a `label` and the `input`
 * The submit button should be placed outside of the panels to prevent confusion (e.g., the save button saves the whole form and not just the last panel).
+* Checkboxes are placed within a label (see example below). The wrapping div needs an additional `.checkbox` class
+* Additional field descriptions can be placed in the `.help-block` `span`
 
 An example (which omits everything but relevant Bootstrap classes):
 
@@ -48,6 +50,15 @@ An example (which omits everything but relevant Bootstrap classes):
                 <label for="second-input" class="col-sm-2 control-label">Second label</label>
                 <div class="col-sm-10">
                     <input class="form-control" id="second-input" />
+                    <span class="help-block">What's this all about?</span>
+                </div>
+			</div>
+			<div class="form-group">
+                <label for="second-input" class="col-sm-2 control-label">Checkboxl</label>
+                <div class="col-sm-10 checkbox">
+                	<label>
+                    	<input type="checkbox" id="checkbox" /> Checkbox description
+                    </label>	
                 </div>
 			</div>
 
@@ -68,4 +79,23 @@ An example (which omits everything but relevant Bootstrap classes):
 
 * Wrap your tables in a `<div class="table-responsive">` to make them scroll horizontally on small devices.
 * Tables get a standard set of classes: `table table-striped table-hover`
-* Please add a `thead` (with corresponding `th`'s) and `tbody`
\ No newline at end of file
+* Please add a `thead` (with corresponding `th`'s) and `tbody`
+
+## Buttons
+
+Many tables have 'action' buttons per row, like 'edit', 'move' and 'delete'. The old template uses icons for these actions, but in most cases there are not sufficient different icons and / or the icons aren't very self explanatory. We've chosen to replace these icons with (small) buttons:
+
+```html
+<a class="btn btn-xs btn-primary">edit</a> <a class="btn btn-xs btn-danger">delete</a>
+```
+
+The button colours aren't set in stone, but the variants used so far are:
+
+* edit - dark blue, `btn-primary`
+* enable / disable - yellow, `btn-warning`
+* delete - red, `btn-danger`
+* copy - neutral, `btn-default`
+
+## Icons
+
+Icons are primarily used for status indications. Try to supply a legend when the icon is not 100% self explanatory. See `usr/local/www/firewall_rules.php` for an good example of icon usage and a legend.
\ No newline at end of file
-- 
cgit v1.1