diff options
author | Sander van Leeuwen <sander@react.nl> | 2015-01-22 11:22:50 +0100 |
---|---|---|
committer | Sander van Leeuwen <sander@react.nl> | 2015-01-22 11:22:50 +0100 |
commit | f180fe1a896f663d5520a3a2da8814b531714db0 (patch) | |
tree | a7b293a675484f47db80e32ac0c469142432d12a /README.md | |
parent | f0d515620587e8ffb287991c6821b61da9c26f09 (diff) | |
download | pfsense-f180fe1a896f663d5520a3a2da8814b531714db0.zip pfsense-f180fe1a896f663d5520a3a2da8814b531714db0.tar.gz |
Code style documentation for tables and forms
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 59 |
1 files changed, 58 insertions, 1 deletions
@@ -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 |