Style Guide (DRAFT)

HTML

Do use HTML5
Do not use tables for layout. Tables may only be used when the content is actually table data.
Do not put business logic in the templates - Using PHPTAL templating engine will assist with security (automatically escaping strings to prevent XSS attacks), internationalisation and ease of template maintenance. The templates are valid XML documents and can be rendered directly in a web browser without needing to be parsed through the templating engine.

The only method allowed for including CSS styling is via including an external CSS stylesheet in the <head> of the document.
Do use a fluid layout
Do use css styles to make adjustments for browser widths
- Investigate media queries for determining width
Do support a print stylesheet which emphasizes legibility, clarity and efficient printing
Do support mobile devices screen sizes (iPhone/Android/Windows Phone 7)
- Must be optional
- Must support screen rotation
- Must not require a separate url
Do design stylesheets with rebranding in mind so that users may change colours and text effects without breaking the layouts
Do not use inline CSS styling in any HTML output.
Do not use html style attributes
Do not use inline <style>..</style> blocks in the body

The only method allowed for including Javascript is via including an external script file in the <head> of the document (or by placing all script tags just before the body closing tag as this seems to be the standard now)
The pages must be able to fully function without Javascript enabled. If Javascript is available then it can be used to replace parts of the DOM with more advanced functionality (in the same way jQuery UI operates)
Use jQuery exclusively for any javascript based features
Use only jQuery plugins with high rates of usage and active, healthy development
Do not use inline Javascript in any HTML output
- No onclick, onmouseover, etc. attributes
- No inline <script..>something();</script> blocks
- Do not use javascript:something() in hyperlink hrefs.

Maintain support for right-to-left (RLT) languages in the redesign (related to CSS)
Investigate accessibility concerns in depth to determine how the pages will work in screen readers, on browsers with extra large font sizes, for colour blind users, etc.

Don't make life hard for power users. Clean up the interface but keep the functionality readily accessible
Workflow must be as efficient as possible

App Mode – several browsers are now supporting App Mode, do we have any requirements for that? Are there standards around this?
Any requirements to have MantisBT grease monkey friendly to allow users to easily customize the page? Not sure what that means, does it mean naming fields? divs, etc?
Supported browsers / versions? What is the cut off?
1. Firefox 3.0+
2. Recent versions of Opera, Chromium, Konqueror, Safari (should almost come for free from I)
3. IE7+
4. IE6 support, if needed, can come through community contributions
Come to some sort of arrangement on how plugins will manipulate the HTML to insert their own buttons, widgets, etc as required.