From f180fe1a896f663d5520a3a2da8814b531714db0 Mon Sep 17 00:00:00 2001 From: Sander van Leeuwen Date: Thu, 22 Jan 2015 11:22:50 +0100 Subject: Code style documentation for tables and forms --- README.md | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) (limited to 'README.md') 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 or panel heading

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+ + + +
+
+ + + +
+ +
+
+``` + +## Tables + +* Wrap your tables in a `
` 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 -- cgit v1.1