mantisbt:style_guide
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
mantisbt:style_guide [2010/10/14 21:39] – daryn | mantisbt:style_guide [2013/04/30 05:54] (current) – dregad | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== |
- | * Inline Javascript should not appear in any HTML output. | + | |
- | * Inline CSS styling should not appear in any HTML output. This ban includes all style attributes and inline < | + | |
- | * I strongly suggest looking at PHPTAL over any other templating engine I've come across. This will assist us 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. | + | |
- | * Come to some sort of arrangement on how plugins will manipulate the HTML to insert their own buttons, widgets, etc as required. | + | |
- | ====== CSS ====== | + | ===== HTML ===== |
- | * The only method allowed for including CSS styling is via including an external CSS stylesheetin the < | + | * Do use HTML5 |
- | * Use multiple stylesheets | + | * Do not use tables |
- | * Split layout and colour/text into different stylesheets. The layout stylesheet would control the layout of components on the screen | + | * Do not put business logic in the templates - //Using PHPTAL templating engine will assist with security |
- | ====== Javascript ====== | + | ===== CSS ===== |
- | * The only method allowed for including | + | * The only method allowed for including |
- | * The pages should be able to function without Javascript enabled. If Javascript is available then it can be used to replace parts of the DOM with more advanced functionality | + | * Do use a fluid layout |
- | * jQuery should | + | * Do use css styles |
+ | * 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/ | ||
+ | * 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 | ||
+ | * Do not use inline CSS styling in any HTML output. | ||
+ | * Do not use html style attributes | ||
+ | * Do not use inline < | ||
- | ====== | + | ===== Javascript |
- | * Look at supporting | + | * The only method allowed for including Javascript is via including an external script file in the < |
+ | * 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, | ||
+ | * No inline < | ||
+ | * Do not use javascript: | ||
+ | |||
+ | ===== Accessibility and Localization | ||
+ | * Maintain support for right-to-left (RLT) languages | ||
* 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. | * 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. | ||
- | ====== User Interface | + | ===== User Interface ===== |
- | * Avoid dumbing down the interface to cater for computer illiterate users (and making the interface look pretty) at the expense of making | + | * Don't make life hard for power users. |
+ | * Workflow must be as efficient as possible | ||
+ | |||
+ | |||
+ | ===== Questions for discussion ===== | ||
+ | - App Mode -- several browsers | ||
+ | - Any requirements | ||
+ | - Supported browsers / versions? | ||
+ | - Firefox 3.0+ | ||
+ | - Recent versions of Opera, Chromium, Konqueror, Safari (should almost come for free from I) | ||
+ | - IE7+ | ||
+ | - 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. | ||
+ |
mantisbt/style_guide.1287106742.txt.gz · Last modified: 2010/10/14 21:49 (external edit)