diff options
Diffstat (limited to 'docs/html/design/downloads/index.jd')
| -rw-r--r-- | docs/html/design/downloads/index.jd | 98 |
1 files changed, 49 insertions, 49 deletions
diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index 4111bca..0b9f59f 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -9,8 +9,8 @@ and implementation.</p> <h2 id="stencils">Phone & Tablet Stencils</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <p>Drag and drop your way to beautifully designed Android apps. The stencils feature the @@ -19,13 +19,13 @@ phone and tablet outlines to frame your creations. Source files for icons and co available.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_stencils.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="notice-designers-material" style="width:218px;" href="http://www.google.com/design/spec/resources/layout-templates.html"> @@ -36,7 +36,7 @@ available.</p> </a> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="notice-designers-material" style="width:218px;" href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> @@ -47,7 +47,7 @@ available.</p> </a> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');" href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe® Photoshop® Stencils and Sources</a> @@ -63,8 +63,8 @@ available.</p> <h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <p>Action bar icons are graphic buttons that represent the most important actions people can take within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p> @@ -73,13 +73,13 @@ use with the Holo Light and Holo Dark themes. The package also includes unstyled modify to match your theme, plus source files.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/iconography_actionbar_style.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="notice-designers-material" style="width:218px;" href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> @@ -90,7 +90,7 @@ modify to match your theme, plus source files.</p> </a> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');" @@ -106,18 +106,18 @@ modify to match your theme, plus source files.</p> <h2 id="Wear">Android Wear Materials</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>UI toolkit</h4> <p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');" href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe® Illustrator® Toolkit</a> @@ -127,18 +127,18 @@ modify to match your theme, plus source files.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Sample user flow patterns</h4> <p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');" href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe® Illustrator® App Patterns</a> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');" @@ -147,99 +147,99 @@ modify to match your theme, plus source files.</p> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Sample app design mocks</h4> <p>Stream cards and UI elements for some example apps in fully editable PSD format. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');" href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe® Photoshop® mocks</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Watch faces UI toolkit</h4> <p>Detailed specifications and measurements for the the background canvas, notification cards, and system indicators. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');" href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Slide watch face</h4> <p>Example of a watch face design in AI format. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');" href="{@docRoot}downloads/design/Slide.ai">Adobe® Illustrator® Design</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Slide watch face specifications</h4> <p>Design specifications for the Slide watch face in PSD format. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" href="{@docRoot}downloads/design/Slide.psd">Adobe® Photoshop® Specifications</a> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Watch face icon example</h4> <p>Template for creating watch face icons for the carousel on Android Wear devices. </p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150" style="width:150px;margin:0 auto;display:block"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe® Photoshop® Icon</a> </div> @@ -250,8 +250,8 @@ system indicators. <h2 id="style">Style</h2> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4 id="roboto">Roboto</h4> <p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the @@ -262,13 +262,13 @@ requirements of UI and high-resolution screens.</p> <p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="notice-designers-material" style="width:218px;" href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html"> @@ -279,7 +279,7 @@ requirements of UI and high-resolution screens.</p> </a> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" @@ -291,8 +291,8 @@ requirements of UI and high-resolution screens.</p> </div> </div> -<div class="layout-content-row"> - <div class="layout-content-col span-5"> +<div class="cols"> + <div class="col-5"> <h4>Color</h4> <p>In Android's color palette, each color has a corresponding darker @@ -300,13 +300,13 @@ shade that can be used as a complement when needed.</p> <p><a href="{@docRoot}design/style/color.html">More on Color</a></p> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <img src="{@docRoot}design/media/downloads_color_swatches.png"> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <a class="notice-designers-material" style="width:218px;" href="http://www.google.com/design/spec/resources/color-palettes.html"> @@ -317,7 +317,7 @@ shade that can be used as a complement when needed.</p> </a> </div> - <div class="layout-content-col span-4"> + <div class="col-4"> <p> <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');" |