summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSander van Leeuwen <sander@react.nl>2015-01-22 11:22:50 +0100
committerSander van Leeuwen <sander@react.nl>2015-01-22 11:22:50 +0100
commitf180fe1a896f663d5520a3a2da8814b531714db0 (patch)
treea7b293a675484f47db80e32ac0c469142432d12a
parentf0d515620587e8ffb287991c6821b61da9c26f09 (diff)
downloadpfsense-f180fe1a896f663d5520a3a2da8814b531714db0.zip
pfsense-f180fe1a896f663d5520a3a2da8814b531714db0.tar.gz
Code style documentation for tables and forms
-rw-r--r--README.md59
1 files changed, 58 insertions, 1 deletions
diff --git a/README.md b/README.md
index 409424a..4ca46a8 100644
--- a/README.md
+++ b/README.md
@@ -11,4 +11,61 @@ We are migrating pfSense to Bootstrap. You can help! Please respect these code-g
* html attributes should be using double-quoted attribute-values. This means your php-code should probably use single-quoted strings
* we use icons for status-indication and buttons for actions
-If you feel adventurous you can sometimes rewrite some PHP & javascript code as well; but try to keep this to a minimum. \ No newline at end of file
+If you feel adventurous you can sometimes rewrite some PHP & javascript code as well; but try to keep this to a minimum.
+
+# Cleaner
+
+Before diving into a template, clean it with the supplied cleaner (`clean.sh`). This script tries to remove most of the unnecessary element attributes and does a bunch of other replaces which have to be done in every template.
+
+# Template migration conventions
+
+All migrated templates are formatted with default [Bootstrap](http://getbootstrap.com/) components. Custom CSS goes into `usr/www/bootstrap/css/pfSense.css`, but try to keep this to a minimum.
+
+The Bootstrap grid system is used for defining columns. We've chosen the 'small' breakpoint as the default breakpoint to collapse from a horizontal to vertical layout. You should define your column widths with `.col-sm-*`, unless there's a good (and documented ;) ) reason to deviate from this default.
+
+## Forms
+
+* 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 out 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).
+
+An example:
+
+```
+<form class="form-horizontal">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h2 class="panel-title">Form or panel heading</h2>
+ </div>
+ <div class="panel-body">
+ <div class="form-group">
+ <label for="input" class="col-sm-2 control-label">Labeltext</label>
+ <div class="col-sm-10">
+ <input class="form-control" id="input" />
+ </div>
+ </div>
+ <div class="form-group">
+ <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" />
+ </div>
+ </div>
+
+ <!-- And more form-groups -->
+
+ </div>
+ </div>
+
+ <!-- And more panels -->
+
+ <div class="col-sm-10 col-sm-offset-2">
+ <input type="submit" class="btn btn-primary" value="Save" />
+ </div>
+</form>
+```
+
+## Tables
+
+* 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
OpenPOWER on IntegriCloud