[gnome-devel-docs/gnome3-hig] hig3: additional content imported/reformatted
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs/gnome3-hig] hig3: additional content imported/reformatted
- Date: Tue, 24 Jan 2012 19:37:57 +0000 (UTC)
commit a1852434b0e5247ff2995a9c07ce1b6d69a71fb6
Author: Jakub Steiner <jimmac gmail com>
Date: Tue Jan 24 20:37:33 2012 +0100
hig3: additional content imported/reformatted
hig3/site/basics-content-area.html | 400 +++++++++++++++++++++++++++++
hig3/site/basics-primary-toolbar.html | 4 +-
hig3/site/images/figures/content-grid.png | Bin 0 -> 173082 bytes
hig3/site/images/figures/content-list.png | Bin 0 -> 77916 bytes
hig3/site/images/figures/grid-spacing.png | Bin 0 -> 10554 bytes
hig3/site/images/figures/list-spacing.png | Bin 0 -> 34347 bytes
hig3/site/stylesheets/hig.css | 2 +-
hig3/src/stylesheets/hig.scss | 2 +-
8 files changed, 405 insertions(+), 3 deletions(-)
---
diff --git a/hig3/site/basics-content-area.html b/hig3/site/basics-content-area.html
new file mode 100644
index 0000000..89735ee
--- /dev/null
+++ b/hig3/site/basics-content-area.html
@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>GNOME Human Interface Guidelines</title>
+ <link href="/stylesheets/hig.css" media="screen" rel="stylesheet" type="text/css">
+ <script language="javascript" src="javascripts/jquery.js" type="text/javascript"></script><script language="javascript" src="javascripts/hig.js" type="text/javascript"></script>
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
+ <meta charset="UTF-8">
+ </head>
+ <body>
+ <div class="gnomelink">
+ <div>
+ <a href="http://www.gnome.org";>GNOME.org</a>
+ </div>
+ </div>
+ <div class="contain">
+ <aside class="sidebar">
+ <a class="smalllogo" href="/">
+ <img alt="Gnome logo" class="foot" src="images/gnome-logo.png">
+ <div class="punchline">Human Interface Guidelines</div>
+ </a>
+ <div class="menu">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li class="current"><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ </div>
+ </aside>
+ <article class="main">
+ <h1>Primary Toolbars</h1>
+ <div class="note">
+ This is draft content for the next version of
+ <a href="http://design.gnome.org";><span class="gnome">GNOME</span> Human Interface Guidelines.</a>
+ </div>
+ <h1 id="grid-view">
+ Grid View
+ </h1>
+ <p>
+ An area that contains a grid of images that represent individual items of content. Each item typically has a label beneath it. A scrollbar enables the grid to be moved up and down when the number of items becomes too big for the available space.
+ </p>
+ <h2>
+ When to use
+ </h2>
+ <p>
+ The grid view is one of the principal ways of presenting bodies of content in <span class="gnome">GNOME 3</span> applications. It can be used to present relatively small numbers of items or very large numbers. Examples of the grid view can be seen in the Documents, Music, Clocks and Boxes apps.
+ </p>
+ <div class="columns">
+ <img alt="Content grid" src="images/figures/content-grid.png">
+ <p>
+ Since the grid view utilises an image for each item it presents, it is best suited to content that has a visual component. It is also well suited to content where each item has an image that is specific to it, rather than having images that are shared by multiple items of content.
+ </p>
+ </div>
+ <p>
+ As a general design strategy, it is worth thinking about ways in which you can generate unique images for each of the content items that you want to present. Unique images vastly help identification and can bring life to what would otherwise be a dull or uninteresting application. <span class="gnome">GNOME</span> Clocks is an excellent example of this - by marrying each world clock with an image of a city, it aids identification and provides a richer experience than would be enabled by text and numbers only.
+ </p> <h2>
+ Guidelines
+ </h2>
+ <p>
+ Be consistent with the implementations found in the core <span class="gnome">GNOME 3</span> applications. Ensure that the layout of the grid is the same.
+ </p>
+ <div class="columns">
+ <img alt="Grid spacing" src="images/figures/grid-spacing.png">
+ <ul>
+ <li>
+ Order the items in the grid according to what will be most useful to people using your application, as well as conventions for the type of application that you designing.
+ </li>
+ <li>
+ Selecting an item in the grid will typically switch to a dedicated view of it.
+ </li>
+ <li>
+ Use chunking.
+ </li>
+ <li>
+ The standard [[Design/HIG/Search|search]] design pattern should be used to allow people to filter the content of the grid.
+ </li>
+ </ul>
+ </div> <h2>
+ Elaborations
+ </h2>
+ <p>
+ The grid view is a flexible pattern that can be elaborated depending on your requirements. The following are a number of optional additions to the grid pattern that can be used:
+ </p>
+ <ul>
+ <li>
+ Use the
+ <a href="selectmode-checkmark.html">checkmark selection</a>
+ mechanism if it is necessary to provide the ability to select and modify items within the grid.
+ </li>
+ <li>
+ If the items in the grid have several useful properties, an alternative
+ <a href="#list-view">list view</a>
+ can be provided. Switching between a grid and list view is typically facilitated by a set of radio button items in the
+ <a href="basics-appmenu.html">app menu</a> .
+ </li>
+ <li>
+ Grid views can contain collections.
+ </li>
+ <li>
+ "Emblems" can indicate a variety of states, including whether an item is being shared.
+ </li>
+ <li>
+ Grid items can display a range of "status information", such as progress or whether they are active. This is particularly useful if the items in the grid have dynamic properties. <span class="gnome">GNOME</span> Boxes provides examples of a number of these states displayed within the grid design pattern.
+ </li>
+ <li>
+ Inactivity can be indicated by â
+ </li>
+ <li>
+ Progress can be indicated by â
+ </li>
+ </ul>
+ <h1 id="list-view">
+ List View
+ </h1>
+ <p>
+ An area that is populated by a list of items. A list can incorporate multiple columns of both text and images. The list can be vertically scrolled and can be filtered by using search functionality.
+ </p>
+ <h2>
+ When to use
+ </h2>
+ <p>
+ List views can be used to present and give access to bodies of content. They are appropriate if content items have a name or other text-based identifier.
+ </p>
+ <div class="columns">
+ <img alt="Content list" src="images/figures/content-list.png">
+ <p>
+ List views often accompany
+ <a href="#grid-view">grid views</a>
+ and offer a different perspective on the content that they present. In particular, a list view allows additional information about each item of content through the use of multiple columns of text.
+ </p>
+ </div> <h2>
+ Guidelines
+ </h2>
+ <p>
+ Be consistent with the list views found in the core <span class="gnome">GNOME 3</span> applications.
+ </p>
+ <img alt="List spacing" src="images/figures/list-spacing.png">
+ <div id="ul">
+ <li>
+ Specify the width of each column according to the anticipated length of its contents, but also ensure that the most important columns are prominent within the overall layout.
+ </li>
+ <li>
+ Provide a search facility in order to allow people to filter the contents of the list. See the [[Design/HIG/Search|search design pattern]] for more information on this.
+ </li>
+ <li>
+ Combine scrolling with chunking when there are a high number of items in the list view.
+ </li>
+ <li>
+ Selecting an item from the list will typically open it.
+ </li>
+ <li>
+ Ensure that you follow the guidelines on using [[/Design/HIG/TextAndLabels|text]].
+ </li>
+ <li>
+ When presenting multiple columns of text, use color to draw attention to the most important column. Making the text of less important columns lighter will make the list easier to read.
+ </li>
+ </div> <h2>
+ Elaborations
+ </h2>
+ <p>
+ Like grid views, list views can be combined with additional design patterns:
+ </p>
+ <ul>
+ <li>
+ <a href="selectmode-checkmark.html">checkmark selector</a>
+ </li>
+ </ul>
+ </article>
+ </div>
+ <div id="footerpositioner">
+ <hr class="footerart">
+ <div id="footer">
+ <div class="contain">
+ <div class="navmenu">
+ <span class="direct">
+ <h3>
+ Design Guidelines
+ </h3>
+ <ul>
+ <li class="first"><a href="design_principles.html">Principles</a></li>
+ <li><a href="design_strategies.html">Design Strategies</a></li>
+ <li><a href="system_shell.html">System Shell</a></li>
+ <li><a href="visual_layout.html">Visual Layout</a></li>
+ <li><a href="writing_style.html">Writing Style</a></li>
+ <li><a href="color.html">Color</a></li>
+ <li><a href="keyboard_input.html">Keyboard Input</a></li>
+ <li class="last"><a href="pointer_and_touch_input.html">Pointer and Touch Input</a></li>
+ </ul>
+ </span>
+ <span class="nested">
+ <h3>
+ Design Patterns
+ </h3>
+ <ul class="collapsed">
+ <li>
+ <a class="expand">
+ Application Basics
+ </a>
+ <ul>
+ <li class="first"><a href="basics-appmenu.html">Application Menu</a></li>
+ <li><a href="basics-primary-toolbar.html">Primary Toolbar</a></li>
+ <li><a href="basics-primary-windows.html">Primary Windows</a></li>
+ <li><a href="basics-notifications.html">Notifications</a></li>
+ <li class="current"><a href="basics-content-area.html">Content Area</a></li>
+ <li class="last"><a href="basics-sidebar-list.html">Sidebar List</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Presenting Content
+ </a>
+ <ul>
+ <li class="first"><a href="presenting-content-view.html">Content View</a></li>
+ <li><a href="presenting-fullscreen.html">Fullscreen</a></li>
+ <li><a href="presenting-zooming.html">Zooming</a></li>
+ <li class="last"><a href="presenting-panning.html">Panning</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Finding Content
+ </a>
+ <ul>
+ <li class="first"><a href="finding-search.html">Search</a></li>
+ <li class="last"><a href="finding-filterbuttons.html">Filter Buttons</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Selections & Actions
+ </a>
+ <ul>
+ <li class="first"><a href="selectmode-checkmark.html">Checkmark Selector</a></li>
+ <li><a href="selectmode-bottomtoolbar.html">Bottom Toolbar</a></li>
+ <li><a href="selectmode-contextmenus.html">Context Menus</a></li>
+ <li><a href="selectmode-undo.html">Undo</a></li>
+ <li class="last"><a href="selectmode-inlinetoolbars.html">Inline Toolbars</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Navigation
+ </a>
+ <ul>
+ <li class="first"><a href="navigation-back.html">Back Button</a></li>
+ <li class="last"><a href="navigation-home.html">Home Button</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other Window Types
+ </a>
+ <ul>
+ <li class="first"><a href="other-dialogwindows.html">Dialog Windows</a></li>
+ <li><a href="other-preferences.html">Utility Windows: Preferences</a></li>
+ <li class="last"><a href="other-properties.html">Utility Windows: Property</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ User Interface Components
+ </a>
+ <ul>
+ <li class="first"><a href="component-list.html">Lists</a></li>
+ <li><a href="component-menu.html">Menus</a></li>
+ <li><a href="component-switch.html">Switches</a></li>
+ <li><a href="component-entry.html">Text Entry Fields</a></li>
+ <li class="last"><a href="entry-spinbox.html">Spin Boxes</a></li>
+ </ul>
+ </li>
+ <li>
+ <a class="expand">
+ Other
+ </a>
+ <ul>
+ <li class="first last"><a href="other-assistant.html">Assistants</a></li>
+ </ul>
+ </li>
+ </ul>
+ </span>
+ </div>
+ <div class="copy">
+ <p>
+ Copyright © 2005—2012 The GNOME Project
+ </p>
+ <p>
+ Free to share and remix:
+ <a href="http://creativecommons.org/licenses/by/3.0/";>Creative Commons CC-BY.</a>
+ Optimised for standards. Hosted by
+ <a href="http://www.redhat.com";>Red Hat, Inc.</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/hig3/site/basics-primary-toolbar.html b/hig3/site/basics-primary-toolbar.html
index 4c402bf..7f90197 100644
--- a/hig3/site/basics-primary-toolbar.html
+++ b/hig3/site/basics-primary-toolbar.html
@@ -176,7 +176,9 @@
Maximizing Windows
</h2>
<p>
- If the window containing the toolbar is a maximizing window (see [[Design/HIG/PrimaryWindows|Primary Windows]]), the Primary Toolbar needs to have certain features:
+ If the window containing the toolbar is a maximizing window (see
+ <a href="basics-primary-windows.html">primary windows</a>
+ ), the Primary Toolbar needs to have certain features:
</p>
<ul>
<li>
diff --git a/hig3/site/images/figures/content-grid.png b/hig3/site/images/figures/content-grid.png
new file mode 100644
index 0000000..f7e6d54
Binary files /dev/null and b/hig3/site/images/figures/content-grid.png differ
diff --git a/hig3/site/images/figures/content-list.png b/hig3/site/images/figures/content-list.png
new file mode 100644
index 0000000..81a491f
Binary files /dev/null and b/hig3/site/images/figures/content-list.png differ
diff --git a/hig3/site/images/figures/grid-spacing.png b/hig3/site/images/figures/grid-spacing.png
new file mode 100644
index 0000000..5370717
Binary files /dev/null and b/hig3/site/images/figures/grid-spacing.png differ
diff --git a/hig3/site/images/figures/list-spacing.png b/hig3/site/images/figures/list-spacing.png
new file mode 100644
index 0000000..3d40814
Binary files /dev/null and b/hig3/site/images/figures/list-spacing.png differ
diff --git a/hig3/site/stylesheets/hig.css b/hig3/site/stylesheets/hig.css
index 55bf692..14d4b62 100644
--- a/hig3/site/stylesheets/hig.css
+++ b/hig3/site/stylesheets/hig.css
@@ -379,7 +379,7 @@ table tr td {
float: right;
}
/* line 271 */
-.columns p {
+.columns p, .columns div, .columns h1, .columns h2, .columns h3, .columns h4 {
display: inline;
float: left;
width: 280px;
diff --git a/hig3/src/stylesheets/hig.scss b/hig3/src/stylesheets/hig.scss
index 33d24bb..d7d5be4 100644
--- a/hig3/src/stylesheets/hig.scss
+++ b/hig3/src/stylesheets/hig.scss
@@ -268,7 +268,7 @@ table {
float: right;
}
- p {
+ p,div, h1,h2,h3,h4 {
@include column(5,11);
margin-bottom: 1em;
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
