blob: dca6a0411a60a454f572004b13943c6b722a6ce8 (
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 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 (which omits everything but relevant Bootstrap classes):
```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`
|
