blob: cf5e3887fdafa9915480634ad4c9c5c0b5b3d6f1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
pfSense on bootstrap
====================
We are migrating pfSense to Bootstrap. You can help! Please respect these code-guidelines:
* use tabs (tabstop=4) for indenting (except the license-header which contains 3 lines that are indented with "\t ")
* no trailing whitespace
* limited echoing of HTML from php, please use proper templating syntax instead (eg. foreach/endforeach)
* limited attributes on elements; _no style attributes_
* no inline javascript
* 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.
# 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:
```html
<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`
|
