diff options
Diffstat (limited to 'docs/html/design/building-blocks')
| -rw-r--r-- | docs/html/design/building-blocks/buttons.jd | 28 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/dialogs.jd | 26 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/grid-lists.jd | 18 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/lists.jd | 6 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/pickers.jd | 6 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/progress.jd | 18 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/seek-bars.jd | 12 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/spinners.jd | 6 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/tabs.jd | 6 | ||||
| -rw-r--r-- | docs/html/design/building-blocks/text-fields.jd | 16 |
10 files changed, 71 insertions, 71 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd index e698f38..713574a 100644 --- a/docs/html/design/building-blocks/buttons.jd +++ b/docs/html/design/building-blocks/buttons.jd @@ -21,27 +21,27 @@ page.tags=button,input will occur when the user touches it. A button can have an image, text, or both. </p> -<div class="layout-content-row" style="margin-top:22px"> - <div class="layout-content-col span-3"> +<div class="cols" style="margin-top:22px"> + <div class="col-3"> <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> </div> - <div class="layout-content-col span-3"> + <div class="col-3"> <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> </div> </div> -<div class="layout-content-row" style="margin-top:0;"> - <div class="layout-content-col span-3"> +<div class="cols" style="margin-top:0;"> + <div class="col-3"> <p>An image alone works best when the action can be represented by a symbol that's well understood.</p> </div> - <div class="layout-content-col span-3"> + <div class="col-3"> <p>Text alone is most appropriate for actions that would be difficult to represent visually, or are critical to convey in words to avoid any ambiguity.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <p> Both an icon and text is most appropriate when they complement each other: each carrying its own bit of information, but together making a larger whole. @@ -57,24 +57,24 @@ page.tags=button,input <h3>What about button backgrounds?</h3> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>For <strong>image-only</strong> buttons, a background isn't necessary because users are accustomed to interacting with objects.</p> - <div class="layout-content-row" style="margin-left:72px"> - <div class="layout-content-col span-2"> + <div class="cols" style="margin-left:72px"> + <div class="col-2"> <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div> <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;"> </div> - <div class="layout-content-col span-2" style="width:29px;margin-left:10px;"> + <div class="col-2" style="width:29px;margin-left:10px;"> <div class="do-dont-label good"><strong>Do</strong></div> <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;"> </div> </div> </div> -<div class="layout-content-col span-7"> +<div class="col-7"> <p> For buttons <strong>with text</strong>, a background is also usually unnecessary. To invite users to touch, phrase it as a clear action (e.g. diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd index 9c91abf..70460ba 100644 --- a/docs/html/design/building-blocks/dialogs.jd +++ b/docs/html/design/building-blocks/dialogs.jd @@ -62,13 +62,13 @@ user to adjust settings or enter text.</p> proceeding. They differ slightly in appearance based upon the severity and impact of the message conveyed.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/dialogs_w_no_title.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Alerts without title bars</h4> <p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed @@ -79,13 +79,13 @@ this conversation?") or make a clear statement whose relationship to the action </div> -<div class="layout-content-row"> - <div class="layout-content-col span-8"> +<div class="cols"> + <div class="col-8"> <img src="{@docRoot}design/media/dialogs_w_title.png"> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <h4>Alerts with title bars</h4> <p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving @@ -99,8 +99,8 @@ available based on the title and the text of the action buttons.</p> </div> <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-4"> +<div class="cols"> + <div class="col-4"> <div class="do-dont-label bad">Don't</div> <table class="ui-table bad"> <thead> @@ -112,7 +112,7 @@ available based on the title and the text of the action buttons.</p> </thead> </table> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="do-dont-label bad">Don't</div> <table class="ui-table bad"> <thead> @@ -124,7 +124,7 @@ available based on the title and the text of the action buttons.</p> </thead> </table> </div> - <div class="layout-content-col span-5"> + <div class="col-5"> <div class="do-dont-label good">Do</div> <table class="ui-table good"> <thead> @@ -151,8 +151,8 @@ advances the workflow, and simply touching outside the popup dismisses it.</p> <h2 id="toasts">Toasts</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <div class="vspace size-3"></div> @@ -177,7 +177,7 @@ continue editing later. Toasts automatically disappear after a timeout.</p> </a> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/dialogs_toasts.png"> diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd index ac3a3eb..7a1c652 100644 --- a/docs/html/design/building-blocks/grid-lists.jd +++ b/docs/html/design/building-blocks/grid-lists.jd @@ -36,13 +36,13 @@ cutting off grid items to communicate where the overflow is located.</p> <p>Avoid creating grid lists that scroll in two dimensions.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <img src="{@docRoot}design/media/gridview_vertical.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Vertical scrolling</h4> <p>Vertically scrolling grid list items are sorted in traditional western reading direction: @@ -53,13 +53,13 @@ scheme when the user rotates the screen.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <img src="{@docRoot}design/media/gridview_horizontal.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Horizontal scrolling</h4> <p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically @@ -80,13 +80,13 @@ navigation.</p> <p>Use labels to display additional contextual information for your grid list items.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-7"> +<div class="cols"> + <div class="col-7"> <img src="{@docRoot}design/media/gridview_style.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Style</h4> <p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd index 6f69feb..85753c8 100644 --- a/docs/html/design/building-blocks/lists.jd +++ b/docs/html/design/building-blocks/lists.jd @@ -15,13 +15,13 @@ well as drilldown navigation.</p> <div class="vspace size-1"> </div> -<div class="layout-content-row clearfix"> - <div class="layout-content-col span-9"> +<div class="cols clearfix"> + <div class="col-9"> <img src="{@docRoot}design/media/lists_main.png"> </div> - <div class="layout-content-col span-4 with-callouts"> + <div class="col-4 with-callouts"> <ol style="margin-bottom: 60px;"> <li> diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd index fb5e287..72da0f7 100644 --- a/docs/html/design/building-blocks/pickers.jd +++ b/docs/html/design/building-blocks/pickers.jd @@ -13,13 +13,13 @@ page.tags=datepicker,timepicker up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe gesture.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/picker_space.png"> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Space considerations</h4> <p>Pickers can be used inline on a form, but their relatively large footprint is best suited for diff --git a/docs/html/design/building-blocks/progress.jd b/docs/html/design/building-blocks/progress.jd index 2de75dc..ae81440 100644 --- a/docs/html/design/building-blocks/progress.jd +++ b/docs/html/design/building-blocks/progress.jd @@ -32,13 +32,13 @@ page.tags=progressbar,download,network <p>Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/progress_activity.png"> </div> - <div class="layout-content-col span-7 with-callouts"> + <div class="col-7 with-callouts"> <ol> <li class="value-1"><h4>Activity bar</h4> @@ -49,13 +49,13 @@ page.tags=progressbar,download,network </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/progress_activity2.png"> </div> - <div class="layout-content-col span-7 with-callouts"> + <div class="col-7 with-callouts"> <ol> <li class="value-2"><h4>Activity circle</h4> @@ -91,11 +91,11 @@ In all of the Google Play apps (Music, Books, Movies, Magazines), we wanted the <p>The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-9"> +<div class="cols"> + <div class="col-9"> <img src="{@docRoot}design/media/progress_activity_custom_app.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="figure-caption"> Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design. </div> diff --git a/docs/html/design/building-blocks/seek-bars.jd b/docs/html/design/building-blocks/seek-bars.jd index 5c42102..04446d2 100644 --- a/docs/html/design/building-blocks/seek-bars.jd +++ b/docs/html/design/building-blocks/seek-bars.jd @@ -15,13 +15,13 @@ by moving the slider thumb. The smallest value is to the left, the largest to th interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-9"> +<div class="cols"> + <div class="col-9"> <img src="{@docRoot}design/media/seekbar_example.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <div class="vspace size-2"> </div> @@ -32,8 +32,8 @@ such as volume, brightness, or color saturation.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-9"> +<div class="cols"> + <div class="col-9"> <img src="{@docRoot}design/media/seekbar_style.png"> <div class="figure-caption"> @@ -41,5 +41,5 @@ such as volume, brightness, or color saturation.</p> </div> </div> - <div class="layout-content-col span-4"> </div> + <div class="col-4"> </div> </div> diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd index 3a74ccf..31c5558 100644 --- a/docs/html/design/building-blocks/spinners.jd +++ b/docs/html/design/building-blocks/spinners.jd @@ -22,8 +22,8 @@ its currently selected value. Touching the spinner displays a dropdown menu with values, from which the user can select a new one.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <img src="{@docRoot}design/media/spinners_form.png"> @@ -34,7 +34,7 @@ fields. For example, a text field might let you edit an email address for a cont associated spinner allows you to select whether it's a Home or Work address.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/spinners_actionbar.png"> diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd index 078de92..1315a2f 100644 --- a/docs/html/design/building-blocks/tabs.jd +++ b/docs/html/design/building-blocks/tabs.jd @@ -27,14 +27,14 @@ aspects of your app, or to browse categorized data sets.</p> <h2 id="scrollable">Scrollable Tabs</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate to the next/previous view, swipe left or right.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <video width="400" class="with-shadow play-on-hover" autoplay> <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4"> diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd index 19c22f9..9403679 100644 --- a/docs/html/design/building-blocks/text-fields.jd +++ b/docs/html/design/building-blocks/text-fields.jd @@ -24,8 +24,8 @@ typing, text fields allow for a variety of other activities, such as text select paste) and data lookup via auto-completion.</p> -<div class="layout-content-row"> - <div class="layout-content-col span-12"> +<div class="cols"> + <div class="col-12"> <img src="{@docRoot}design/media/text_input_singlevsmultiline.png"> @@ -39,8 +39,8 @@ overflow text and scroll vertically when the cursor reaches the lower edge.</p> <img src="{@docRoot}design/media/text_input_typesandtypedown.png"> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <h4>Text field types</h4> <p>Text fields can have different types, such as number, message, or email address. The type determines @@ -48,7 +48,7 @@ what kind of characters are allowed inside the field, and may prompt the virtual optimize its layout for frequently used characters.</p> </div> - <div class="layout-content-col span-6"> + <div class="col-6"> <h4>Auto-complete text fields</h4> <p>Use auto-complete text fields to present real-time completions or search results in popups, so users @@ -63,13 +63,13 @@ can enter information more accurately and efficiently.</p> mode that facilitates extending the selection or choosing an action to perform on the selected text. Selection mode includes:</p> -<div class="layout-content-row"> - <div class="layout-content-col span-9"> +<div class="cols"> + <div class="col-9"> <img src="{@docRoot}design/media/text_input_textselection.png"> </div> - <div class="layout-content-col span-4 with-callouts"> + <div class="col-4 with-callouts"> <ol> <li> |