Firefox/Windows 8 Metro Style Guides

From MozillaWiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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 100 characters; use your judgement) if it improves readability.
  • Consistency is king, and supersedes any particular rule.

JS

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.

XUL / XML

  • One attribute per line, aligning with the first character of the first one
  • If there is an id attribute, that should be the first attribute listed
  • Children are indented 2 spaces
  • Treat strings enclosed as children
    • In example below, &clearPrivateData.done is an enclosed string where as &clearPrivateData.button is a label, which is an attribute
  • If separate open & closing tags, tags should go on separate lines
  • No soft tabs (\t characters)
  • Try to keep the 80 character limit
    • (and if not, try really hard to keep it below a 100)
    • If your oncommand, command, or onclick code is too long, please really consider putting it in a function
  • Example
<hbox align="center">
  <button id="prefs-clear-data"
          label="&clearPrivateData.button;"
          command="cmd_sanitize"
          flex="1" />
   <spacer id="clear-notification-empty"/>
   <cssthrobber id="clearprivacythrobber">
   </cssthrobber>
   <description id="clear-notification-done">
     &clearPrivateData.done;
   </description>
</hbox>

helpful references

Retrieved from "https://wiki.mozilla.org/index.php?title=Firefox/Windows_8_Metro_Style_Guides&oldid=920294"