Revision as of 17:57, 20 March 2013

Nota Bene

this a spot to jot down guidelines of varying types, largely for front end developers & designers. This includes code style, theming style, and whatever else will help us produce a consistent, shiny produce faster. If you have questions about this page, please ping :ally in #windev.

Message Dialogs
- Use message dialogs to present blocking questions that require the user's input.
- Use message dialogs for rror messages that apply to the overall app context[1]
Flyout [2]
- Show a flyout only in response to a user tap or click, and you should always dismiss the flyout when the user taps outside of it
- Size: The Flyout should be as small as possible given its content. It doesn't need extra padding beyond what is provided by the Flyout itself. If a control isn't absolutely necessary, then don't include it.
- Position: The Flyout should always be positioned near its point of invocation. Flyouts should never be positioned in non-contextual places such as the center of the screen. [3]
Context Menu [4]
- A maximum width that equates to approximately 50 characters.
- Show the fewest number of commands possible, up to the six-command limit
- Use sentence capitalization for each command name
- Use a separator to distinguish groups of related commands
- Order custom commands in the context menu by importance, with the most important commands at the bottom

Typography
- Use "Title Case" only for heading text. For other text (including button labels, menu items, etc.) use "Sentence case" [5][6].

Generally we use Mozilla Coding Style, with a few exceptions:
- You don't need to wrap lines to 80 characters. Use longer lines (up to around 120 characters; use your judgement) if it improves readability.
Consistency is king, and supersedes any particular rule.

Coding Style exceptions:
- Put the opening brace on the same line as the "function" keyword (rather than on a separate line by itself).
https://developer.mozilla.org/en-US/docs/JavaScript_Tips

if you create an attribute and it has only one value, do not set it to true/false. Remove the attribute in the case of false. This produces cleaner, more concise css, without imperiling js readability.

@@ Line 6: / Line 6: @@
 ** Use message dialogs to present <strong>blocking questions</strong> that require the user's input.
 ** Use message dialogs for rror messages that apply to the <strong>overall app context</strong>[http://msdn.microsoft.com/en-us/library/windows/apps/hh738363.aspx]
-*Flyout
+*Flyout [http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx#flyouts]
-** Show a flyout only in response to a user tap or click, and you should always dismiss the flyout when the user taps outside of it [http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx#flyouts]
+** Show a flyout only in response to a user tap or click, and you should always dismiss the flyout when the user taps outside of it
 **<strong>Size</strong>: The Flyout should be as small as possible given its content. It doesn't need extra padding beyond what is provided by the Flyout itself. If a control isn't absolutely necessary, then don't include it.
 **<strong>Position</strong>: The Flyout should always be positioned near its point of invocation. Flyouts should never be positioned in non-contextual places such as the center of the screen. [http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx]
-*Context Menu
+*Context Menu [http://msdn.microsoft.com/en-us/library/windows/apps/hh465308.aspx]
 ** A maximum width that equates to approximately <strong>50 characters</strong>.
 ** Show the fewest number of commands possible, up to the <strong>six-command limit</strong>