Confirmed users
154
edits
Firefox/Windows 8 Metro Style Guides: Difference between revisions
Jump to navigation
Jump to search
Firefox/Windows 8 Metro Style Guides (view source)
Revision as of 17:55, 20 March 2013
, 20 March 2013→Design/Theming guidelines
| Line 10: | Line 10: | ||
**<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>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] | **<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 | |||
** A maximum width that equates to approximately 50 characters. When command names are too long, they are truncated automatically and an ellipse ("…") replaces the missing 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 | |||
** Position the context menu close to the object your user wants to act on. | |||
*Typography | *Typography | ||
** Use "Title Case" only for heading text. For other text (including button labels, menu items, etc.) use "Sentence case" [http://msdn.microsoft.com/en-us/library/windows/apps/hh465308.aspx][http://msdn.microsoft.com/en-us/library/windows/desktop/aa511453.aspx]. | ** Use "Title Case" only for heading text. For other text (including button labels, menu items, etc.) use "Sentence case" [http://msdn.microsoft.com/en-us/library/windows/apps/hh465308.aspx][http://msdn.microsoft.com/en-us/library/windows/desktop/aa511453.aspx]. | ||