Firefox/Windows 8 Metro Style Guides

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.

Design/Theming guidelines

• 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
• App Bar
  • Do follow placement conventions.
    • Place the New/Add/Create button (+ icon) on the far right.
    • Group view switching buttons together and place them on the far left.
    • Place Accept, Yes, OK commands to the left of Reject, No, Cancel commands.
  • Do set the app bar's dismissal mode to sticky when displaying contextual commands.(Should applied to Firefox Start contextual app bar)
• Typography
  • Use "Title Case" only for heading text. For other text (including button labels, menu items, etc.) use "Sentence case" [5][6].
• Help Page [7]
  • Include a link to your support or home page or either embed an online page into your help page
  • Do label the entry point in the Settings pane Help to clearly identify it.
  • Don't use the Help entry point to link directly to a website. Don't launch a web browser when the user taps Help.

Coding Guidelines

• 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.

JS

• 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

CSS

• 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.

helpful references

• yuan's list of design links: https://kippt.com/yuan/designing-for-windows-8
• general coding guidelines for mozilla: https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style