From a1ee6bcd79aff428722acbcfbca4f80f19f57e47 Mon Sep 17 00:00:00 2001 From: Addy Osmani Date: Fri, 26 Jun 2015 14:52:48 +0100 Subject: [PATCH] Add revised layout documentation (Closes #494) --- src/layout/README.md | 548 +++++++++++++++++++++++-------------------- 1 file changed, 300 insertions(+), 248 deletions(-) diff --git a/src/layout/README.md b/src/layout/README.md index ec0118da..498e95c3 100644 --- a/src/layout/README.md +++ b/src/layout/README.md @@ -1,278 +1,330 @@ -## Basic Example +##Introduction +The Material Design Lite (MDL) **layout** component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and devices. +Appropriate and accessible layout is a critical feature of all user interfaces, regardless of a site's content or function. Page design and presentation is therefore an important factor in the overall user experience. See the layout component's [Material Design specifications page](http://www.google.com/design/spec/layout/principles.html) for details. + +Use of MDL layout principles simplifies the creation of scalable pages by providing reusable components and encourages consistency across environments by establishing recognizable visual elements, adhering to logical structural grids, and maintaining appropriate spacing across multiple platforms and screen sizes. MDL layout is extremely powerful and dynamic, allowing for great consistency in outward appearance and behavior while maintaining development flexibility and ease of use. + +##Basic use +To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `` section of the page, as described in the MDL Introduction. + +###To include a basic MDL **layout** component: + + 1. Code a `
` element. This is the "outer" div that holds the entire layout. Add MDL classes as indicated, separated by spaces, to the div using the `class` attribute. ```html -
+
+
+``` + + 2. Inside the div, code a `
` element. This holds the header row with navigation links that is displayed on large screens, and the menu icon that opens the navigation drawer for smaller screens. Add the MDL class to the header using the `class` attribute. +```html +
+
+
+``` + + 3. Inside the header, add a `
` to produce the menu icon, and include the MDL class as indicated. The div has no content of its own. +```html +
+
+
+
+
+``` + + 4. Still inside the header, add another `
` to hold the header row's content, and include the MDL class as indicated. +```html +
+
+
- - Material Design Lite - +
+
+
+``` + + 5. Inside the header row div, add a span containing the layout title, and include the MDL class as indicated. +```html +
+
+
+
+ Simple Layout +
+
+
+``` + + 6. Following the span, add a `
` to align the header's navigation links to the right, and include the MDL class as indicated. +```html +
+
+
+
+ Simple Layout +
+
+
+
+``` + + 7. Following the spacer div, add a `