Doc change: merge landing page and header/footer designs.

Change-Id: Ic2f603c0215f8dadac2dfa4b871b22b2f9a027e5

8 files changed, 101 insertions, 101 deletions

diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd
index b5bb77c..5995d03 100644
--- a/docs/html/design/style/branding.jd
+++ b/docs/html/design/style/branding.jd
@@ -23,15 +23,15 @@ everyone else's. In Android, your app can shine as an extension of your brand. <
 
 <div class="vspace size-1">&nbsp;</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/branding_wallet.png" style="width:94%">
     <div class="figure-caption">
       The four colors of the Google Wallet logo provide a playful accent to the four dots
       that appear as the user enters a PIN.
     </div>
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
     <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%">
     <div class="figure-caption">
       The Google Play Music app has an orange theme color, which is used for emphasis
@@ -56,15 +56,15 @@ and app name in the action bar.</p>
 
 <div class="vspace size-1">&nbsp;</div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6" style="padding-top:24px;">
+<div class="cols">
+  <div class="col-6" style="padding-top:24px;">
         <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;">
     <div class="figure-caption" style="width:290px;margin-left:20px;">
     Google+ reinforces its brand by carrying its launcher icon through to the action bar.
     </div>
         <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;">
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
     <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;">
     <div class="figure-caption" style="width:320px;">
       Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app.
@@ -87,8 +87,8 @@ Android app as well. <strong>If you take this approach, make sure your brand sty
 applied to every single icon in your app.</strong></p>
 
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
+<div class="cols">
+  <div class="col-6">
     <p>One exception: For any icon in your existing set where the symbol is different from
     Android's, use Android's symbol but give it your brand's styling. That way, users will
     understand what the purpose of the icon is based on what they've learned in other
@@ -99,20 +99,20 @@ applied to every single icon in your app.</strong></p>
 
   </div>
 
-  <div class="layout-content-col span-6">
+  <div class="col-6">
     <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;">
     </div>
   </div>
 </div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
+<div class="cols">
+  <div class="col-6">
     <p><strong>Example</strong>:<br />
     </p>
     <p>The brand's normal icon for sharing on other platforms is a right arrow.
   </div>
 
-  <div class="layout-content-col span-6 lasyout-with-list-item-margins">
+  <div class="col-6 lasyout-with-list-item-margins">
 
     <div style="margin-bottom:1em;">
       <span class="do-dont-label bad" style="margin-left:12px">Don't</span>
diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd
index 1590363..caa77da 100644
--- a/docs/html/design/style/devices-displays.jd
+++ b/docs/html/design/style/devices-displays.jd
@@ -19,15 +19,15 @@ gracefully scale from large tablets to smaller phones.</p>
 
 <div class="vspace size-2">&nbsp;</div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
 <h4>Be flexible</h4>
 
 <p>Stretch and compress your layouts to accommodate various heights and widths.</p>
 
   </div>
-  <div class="layout-content-col span-5">
+  <div class="col-5">
 
 <h4>Optimize layouts</h4>
 
@@ -35,7 +35,7 @@ gracefully scale from large tablets to smaller phones.</p>
 multiple views to reveal more content and ease navigation.</p>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
 <h4>Assets for all</h4>
 <p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd
index e2cdf3f..8b6f3ab 100644
--- a/docs/html/design/style/iconography.jd
+++ b/docs/html/design/style/iconography.jd
@@ -53,26 +53,26 @@ effectively down-scales your HDPI assets by 1/2 to match the expected size.</p>
 user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on
 any type of background.</p>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_launcher_size.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_launcher_focal.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_launcher_style.png">
 
   </div>
 </div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <h4>Sizes &amp; scale</h4>
 
@@ -84,7 +84,7 @@ any type of background.</p>
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <h4>Proportions</h4>
 
@@ -95,7 +95,7 @@ any type of background.</p>
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
 <h4>Style</h4>
 <p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed
@@ -105,11 +105,11 @@ from above, so that users perceive some depth.</p>
 </div>
 
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
     &nbsp;
   </div>
-  <div class="layout-content-col span-7">
+  <div class="col-7">
 
     <img src="{@docRoot}design/media/iconography_launcher_example.png">
 
@@ -117,8 +117,8 @@ from above, so that users perceive some depth.</p>
   <!-- 2 free columns -->
 </div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-12">
+<div class="cols">
+  <div class="col-12">
 
     <img src="{@docRoot}design/media/iconography_launcher_example2.png">
 
@@ -160,26 +160,26 @@ files for further customization.
    href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a>
 </p>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_actionbar_size.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_actionbar_focal.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_actionbar_style.png">
 
   </div>
 </div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <h4>Sizes &amp; scale</h4>
 
@@ -189,7 +189,7 @@ files for further customization.
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <h4>Focal area &amp; proportions</h4>
 
@@ -201,7 +201,7 @@ files for further customization.
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
 <h4>Style</h4>
 <p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin,
@@ -212,8 +212,8 @@ spaces should be a minimum of 2 dp.</p>
 </div>
 
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-3">
+<div class="cols">
+  <div class="col-3">
 
 <h4>Colors</h4>
 <p>Colors: <strong>#333333</strong><br />
@@ -226,7 +226,7 @@ Enabled: <strong>80%</strong> opacity<br />
 Disabled: <strong>30%</strong> opacity</p>
 
   </div>
-  <div class="layout-content-col span-9">
+  <div class="col-9">
 
     <img src="{@docRoot}design/media/iconography_actionbar_colors.png">
 
@@ -249,26 +249,26 @@ items. For example, in the Gmail app, each message has a star icon that marks th
 important.</p>
 
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_small_size.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_small_focal.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_small_style.png">
 
   </div>
 </div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <h4>Sizes &amp; scale</h4>
 
@@ -278,7 +278,7 @@ important.</p>
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <h4>Focal area &amp; proportions</h4>
 
@@ -290,7 +290,7 @@ important.</p>
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
 <h4>Style</h4>
 <p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual
@@ -300,8 +300,8 @@ metaphor so that a user can easily recognize and understand its purpose.</p>
 </div>
 
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_small_colors.png">
 
@@ -313,7 +313,7 @@ to indicate a bookmarked message. If an icon is actionable, choose a color that
 the background.</p>
 
   </div>
-  <div class="layout-content-col span-7">
+  <div class="col-7">
 
     <img src="{@docRoot}design/media/iconography_small_example.png">
 
@@ -337,26 +337,26 @@ the background.</p>
 whenever a new notification is available.</p>
 
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_notification_size.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_notification_focal.png">
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <img src="{@docRoot}design/media/iconography_notification_style.png">
 
   </div>
 </div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
     <h4>Sizes &amp; scale</h4>
 
@@ -366,7 +366,7 @@ whenever a new notification is available.</p>
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
     <h4>Focal area &amp; proportions</h4>
 
@@ -378,7 +378,7 @@ whenever a new notification is available.</p>
     </ul>
 
   </div>
-  <div class="layout-content-col span-4">
+  <div class="col-4">
 
 <h4>Style</h4>
 <p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p>
@@ -387,14 +387,14 @@ whenever a new notification is available.</p>
 </div>
 
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-4">
+<div class="cols">
+  <div class="col-4">
 
 <h4>Colors</h4>
 <p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p>
 
   </div>
-  <div class="layout-content-col span-7">
+  <div class="col-7">
 
     <img src="{@docRoot}design/media/iconography_notification_example.png">
 
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
index d7b5f78..97915b8 100644
--- a/docs/html/design/style/metrics-grids.jd
+++ b/docs/html/design/style/metrics-grids.jd
@@ -40,13 +40,13 @@ refer to layout dimensions with <acronym title="Density-independent pixels: One
 on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</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/metrics_diagram.png">
 
   </div>
-  <div class="layout-content-col span-5">
+  <div class="col-5">
 
 <h4>Space considerations</h4>
 <p>Devices vary in the amount of density-independent pixels (dp) they can display.</p>
diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd
index 3313a2b..6c8169b 100644
--- a/docs/html/design/style/themes.jd
+++ b/docs/html/design/style/themes.jd
@@ -1,8 +1,8 @@
 page.title=Themes
 @jd:body
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-5">
+<div class="cols">
+  <div class="col-5">
 
     <img src="{@docRoot}design/media/themes_holo_light.png">
     <div class="figure-caption">
@@ -15,7 +15,7 @@ page.title=Themes
     </div>
 
   </div>
-  <div class="layout-content-col span-7">
+  <div class="col-7">
 
 
 <a class="notice-designers-material"
diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd
index b6d6407..e1fac2f 100644
--- a/docs/html/design/style/touch-feedback.jd
+++ b/docs/html/design/style/touch-feedback.jd
@@ -2,8 +2,8 @@ page.title=Touch Feedback
 page.tags=input,button
 @jd:body
 
-<div class="layout-content-row" style="margin-bottom: -100px">
-<div class="layout-content-col span-7">
+<div class="cols" style="margin-bottom: -100px">
+<div class="col-7">
 
 <a class="notice-designers-material"
   href="http://www.google.com/design/spec/animation/responsive-interaction.html">
@@ -31,7 +31,7 @@ easier because the default touch feedback works with whatever hue you choose.</l
 
 </div>
 
-<div class="layout-content-col span-6" style="float:right;">
+<div class="col-6" style="float:right;">
   <video  class="play-on-hover" width="268" height="442" autoplay style="border:1px solid #ddd;background-color:#f9f9f9;" poster="">
     <source src="{@docRoot}design/media/touch_feedback.mp4" type="video/mp4">
     <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm">
@@ -55,8 +55,8 @@ easier because the default touch feedback works with whatever hue you choose.</l
 
 <div class="vspace size-3">&nbsp;</div>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
+<div class="cols">
+  <div class="col-6">
 
     <h4>Communication</h4>
 <p>When your objects react to more complex gestures, help users
@@ -66,7 +66,7 @@ understand what the outcome will be.</p>
 begins to dim. This helps the user understand that swiping will cause the
 item to be removed.</p>
   </div>
-  <div class="layout-content-col span-7">
+  <div class="col-7">
 
     <img src="{@docRoot}design/media/touch_feedback_manipulation.png">
 
@@ -74,8 +74,8 @@ item to be removed.</p>
 </div>
 <div class="vspace size-3">&nbsp;</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/touch_feedback_communication.png">
     <p><em>If a user attempts to scroll past the last home screen panel, the screen
@@ -83,7 +83,7 @@ item to be removed.</p>
     isn’t possible.</em></p>
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
 
 <h4>Boundaries</h4>
 <p>
diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd
index 2f8e91b..af76c40 100644
--- a/docs/html/design/style/typography.jd
+++ b/docs/html/design/style/typography.jd
@@ -3,8 +3,8 @@ page.tags="textview","font"
 page.metaDescription=How to use typography in your Android apps.
 @jd:body
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-8">
+<div class="cols">
+  <div class="col-8">
 
     <img src="{@docRoot}design/media/typography_main.png">
 
@@ -19,7 +19,7 @@ page.metaDescription=How to use typography in your Android apps.
   </div>
 </a>
 
-<div class="layout-content-col span-5">
+<div class="col-5">
 
 <p>
   <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"
@@ -48,8 +48,8 @@ variant in regular and bold weights, along with an italic style for each weight.
 
 <hr>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6">
+<div class="cols">
+  <div class="col-6">
 
 <h4>Default type colors</h4>
 <p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
@@ -60,7 +60,7 @@ touch feedback states when used inside UI elements.</p>
     <img src="{@docRoot}design/media/typography_defaults.png">
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
 
 <h4>Typographic Scale</h4>
 <p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too
diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd
index 4f62253..0c62a55 100644
--- a/docs/html/design/style/writing.jd
+++ b/docs/html/design/style/writing.jd
@@ -16,8 +16,8 @@ page.tags=dialog,toast,notification
 
 <p><em>Avoid wordy, stilted text</em></p>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6 layout-with-list-item-margins">
+<div class="cols">
+  <div class="col-6 layout-with-list-item-margins">
 
     <div class="do-dont-label bad">Don't</div>
 
@@ -26,7 +26,7 @@ page.tags=dialog,toast,notification
     </td></tr></tbody></table>
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
 
     <div class="do-dont-label good">Do</div>
 
@@ -39,8 +39,8 @@ page.tags=dialog,toast,notification
 
 <p><em>Don't provide unnecessary information</em></p>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6 layout-with-list-item-margins">
+<div class="cols">
+  <div class="col-6 layout-with-list-item-margins">
 
     <div class="do-dont-label bad">From a Setup Wizard screen</div>
 
@@ -64,7 +64,7 @@ page.tags=dialog,toast,notification
     </table>
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
 
     <div class="do-dont-label good">From a Setup Wizard screen</div>
 
@@ -100,8 +100,8 @@ page.tags=dialog,toast,notification
 
 <p><em>Focus on the user's concern, not technical details</em></p>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6 layout-with-list-item-margins">
+<div class="cols">
+  <div class="col-6 layout-with-list-item-margins">
 
     <div class="do-dont-label bad">Don't</div>
 
@@ -110,7 +110,7 @@ page.tags=dialog,toast,notification
     </td></tr></tbody></table>
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
 
     <div class="do-dont-label good">Do</div>
 
@@ -123,8 +123,8 @@ page.tags=dialog,toast,notification
 
 <p><em>Put top news first</em></p>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6 layout-with-list-item-margins">
+<div class="cols">
+  <div class="col-6 layout-with-list-item-margins">
 
     <div class="do-dont-label bad">Don't</div>
 
@@ -133,7 +133,7 @@ page.tags=dialog,toast,notification
     </td></tr></tbody></table>
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
 
     <div class="do-dont-label good">Do</div>
 
@@ -146,8 +146,8 @@ page.tags=dialog,toast,notification
 
 <p><em>Put the user's goal first</em></p>
 
-<div class="layout-content-row">
-  <div class="layout-content-col span-6 layout-with-list-item-margins">
+<div class="cols">
+  <div class="col-6 layout-with-list-item-margins">
 
     <div class="do-dont-label bad">Don't</div>
 
@@ -156,7 +156,7 @@ page.tags=dialog,toast,notification
     </td></tr></tbody></table>
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
 
     <div class="do-dont-label good">Do</div>
 
@@ -178,8 +178,8 @@ page.tags=dialog,toast,notification
 </ul>
 
 <p><em>Avoid being confusing or annoying</em></p>
-<div class="layout-content-row">
-  <div class="layout-content-col span-6 layout-with-list-item-margins">
+<div class="cols">
+  <div class="col-6 layout-with-list-item-margins">
     <div class="do-dont-label bad">Don't</div>
     <table class="ui-table bad">
     <thead>
@@ -200,7 +200,7 @@ page.tags=dialog,toast,notification
     </table>
 
   </div>
-  <div class="layout-content-col span-6">
+  <div class="col-6">
     <div class="do-dont-label good">Do</div>
     <table class="ui-table good">
     <thead>