launchpad development|
⇤ ← Revision 1 as of 2009-07-29 15:55:55
Size: 3721
Comment:
|
Size: 2920
Comment: Removed section on auto-focusing form fields - as this is handled by the LPForm.
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| = HTML, TAL, and CSS for Launchpad = * '''Created:''' 2005-06-23 by MatthewPaulThomas * '''Contributors:''' MatthewPaulThomas |
||<tablestyle="float:right; font-size: 0.9em; width:40%; background:#F1F1ED; margin: 0 0 1em 1em;" style="padding:0.5em;"><<TableOfContents>>|| |
| Line 70: | Line 67: |
| === Autofocusing a form field === At the moment, the best way to do this is with a JavaScript snippet somewhere in the body of your page ''after the form field has been defined'', like: {{{ <script> <!-- document.forms[0].elements['field.searchtext'].focus(); //--> </script> }}} or, also spelled: {{{ <script> <!-- document.forms['formname'].id.focus(); //--> </script> }}} Here's a list of some other possible ways this can be achieved, and why we're not recommending those methods right now: 1. Setting the body {{{onLoad}}} attribute. There is no way to modify this attribute without making changes to support this in main-template.pt. 2. Setting {{{tabindex=1}}} for the relevant field. This is not always trivial to do, particularly for autogenerated forms. |
Rationale
In HTML and CSS, just as in Python, consistent style makes code more maintainable and easier to develop.
Indentation
- Indent each nesting level by two spaces. To make diffs and merges sensible, don't change indentation of otherwise-unchanged code; put a blank line between sections that are indented correctly and sections that are not.
Indent the closing tag of a container at the same level as the opening tag, unless the contents and closing tag can all fit on the same line as the > of the opening tag.
Indent the > or /> of a multi-line opening tag at the same level as the <.
TAL precedence
When an element has multiple statements, they are executed in this order:
- define
- condition
- repeat
- content or replace
- attributes
- omit-tag
HTML guidelines
Comments
Don't give away implementation details in <!-- HTML comments -->. Instead, use code like this.
<tal:comment condition="nothing"> Comment here. </tal:comment>
Tables
Use <table> with rows of <th> and <td> to produce a table of name-value data.
Use <table class="listing"> to get the standard Launchpad data table appearance (a light border between rows, and a light background for headers and footers).
Inside <table class="listing">, use <thead> around the one or more rows (<tr>s) that represent the table heading. If you don't, the cells will be crooked.
Lists
See the "Various custom list formats" section of icing/style.css for icons you can use in your list elements -- for example, <li class="add">Add something</li>. If every item in a list should have the same icon, attach the class= to the <ul> instead of every <li>.
Text and code to avoid
Defining a local macro that can be used in a page template
Use metal:define-macro like this:
<metal:define metal:define-macro="my-macro">
<ul tal:condition="foobies">
<li tal:repeat="foo foobies" tal:content="foo.name" />
</ul>
</metal:define>define-macro by itself defines the macro, but leaves the output untouched -- in other words, when processing the code snippet above the TAL engine generates an unordered list as output. You may also use names inside the macro as long as they are defined all in the contexts it is used, including its definition.
You can then access the macro from the template/macros namespace:
<metal:use metal:use-macro="template/macros/my-macro" />
Reserved form parameter names
There are certain names for form controls that are reserved; for details see ReservedQueryParameters.
