diff --git a/docs/app/css/style.css b/docs/app/css/style.css
index 106d228043d..7b21db7411c 100644
--- a/docs/app/css/style.css
+++ b/docs/app/css/style.css
@@ -874,3 +874,12 @@ table.attributes  tr  td:last-child {
 table.md-api-table  tr  td:first-child {
   font-weight: bold;
 }
+
+
+.layout_note {
+  font-size: 0.9em;
+    margin: -5px 40px 0px 20px;
+    color: rgb(1, 57, 114);
+    background-color: rgba(156, 204, 101,0.4);
+    padding: 20px;
+}
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
index fddd7247e1b..51d7e07b8ec 100644
--- a/docs/app/js/app.js
+++ b/docs/app/js/app.js
@@ -22,7 +22,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
       }
     })
     .when('/layout/', {
-      redirectTo:  '/layout/container'
+      redirectTo:  '/layout/introduction'
     })
     .when('/demo/', {
       redirectTo: DEMOS[0].url
@@ -248,23 +248,32 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind
       name: 'Layout',
       type: 'toggle',
       pages: [{
-        name: 'Container Elements',
+        name: 'Introduction',
+        id: 'layoutIntro',
+        url: 'layout/introduction'
+      }
+        ,{
+        name: 'Layout Containers',
         id: 'layoutContainers',
         url: 'layout/container'
-      },{
-        name: 'Layout System',
+        }
+      ,{
+        name: 'Layout Children',
         id: 'layoutGrid',
-        url: 'layout/grid'
-      },{
+        url: 'layout/children'
+      }
+      ,{
         name: 'Child Alignment',
         id: 'layoutAlign',
         url: 'layout/alignment'
-      },{
+      }
+      ,{
         name: 'Options',
         id: 'layoutOptions',
         url: 'layout/options'
-      },{
-        name: 'Tips & Tricks', // Possibly rename to Troubleshooting
+      }
+      ,{
+        name: 'Troubleshooting',
         id: 'layoutTips',
         url: 'layout/tips'
       }]
diff --git a/docs/app/partials/getting-started.tmpl.html b/docs/app/partials/getting-started.tmpl.html
index 7aa17f4a242..50fef1cd01c 100644
--- a/docs/app/partials/getting-started.tmpl.html
+++ b/docs/app/partials/getting-started.tmpl.html
@@ -1,38 +1,84 @@
 <div ng-controller="GuideCtrl" class="doc-content">
   <md-content>
-    <p><em>New to Angular.js? Before getting into Angular Material, it might be helpful to
-      <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
-         title="Link opens in a new window">read about the framework</a>.</em></p>
+    <p><em>New to Angular? Before getting into Angular Material, it might be helpful to:</em>
+    <ul>
+      <li>watch the videos about <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
+               title="Link opens in a new window">Angular.js framework</a></li>
+      <li>
+        read the
+          <a href="https://www.google.com/design/spec/material-design/introduction.html" target="_blank"
+                 title="Link opens in a new window">Material Design </a> specifications for components, animations, styles, and layouts.
+      </li>
+    </ul>
 
-    <h2>How do I start?</h2>
+    <p></p>
+    <h2>How do I start with Angular Material?</h2>
     <ul style="margin-bottom: 2em;">
-      <li><a href="http://codepen.io/collection/AxKKgY/" target="_blank"
-             title="Link opens in a new window">Fork a Codepen</a></li>
+      <li><a href="https://codepen.io/collection/AxKKgY/" target="_blank"
+             title="Link opens in a new window">Visit CodePen Community </a></li>
+
+      <li><a href="https://github.com/angular/material-start/tree/es5-tutorial" target="_blank"
+                   title="Link opens in a new window">Learn using an 8-step Tutorial</a></li>
       <li><a href="https://github.com/angular/material-start" target="_blank"
-             title="Link opens in a new window">Clone a Github Starter Project</a></li>
-    </ul>
+             title="Link opens in a new window">Use the Github Starter Project</a></li>
 
-    <h3>Including Angular Material and its dependencies</h3>
-    <ul style="margin-bottom: 2em;">
-      <li><a href="https://github.com/angular/material#bower">Using Bower</a></li>
-      <li><a href="https://github.com/angular/material#cdn">Using a CDN</a> (example below)</li>
+      <li style="font-weight: 400;color: #106CC8;">Use 'Edit on CodePen' button on any of our Demos<br/>
+        <img src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png" style="width:75%;margin: 10px 30px 0 0">
+      </li>
+
+      <li>Easily build a Material application from scratch (below)</li>
     </ul>
 
-    <iframe height='412' scrolling='no'
-            src='//codepen.io/team/AngularMaterial/embed/JYvaxJ/?height=412&theme-id=20485&default-tab=result'
-            frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
-      See the Pen <a href='http://codepen.io/team/AngularMaterial/pen/JYvaxJ/'>Angular Material Basic App</a>
-      by Angular Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on
-      <a href='http://codepen.io'>CodePen</a>.
+    <p></p>
+    <h3>Build a Material Application (blank shell)</h3>
+
+    See this example application on CodePen that loads
+    the Angular Material library from the Google CDN:
+
+    <p></p>
+
+    <iframe height='777' scrolling='no'
+            src='//codepen.io/team/AngularMaterial/embed/RrbXyW/?height=777&theme-id=21180&default-tab=html'
+            frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
+        href='http://codepen.io/team/AngularMaterial/pen/RrbXyW/'>Angular Material - Blank Starter</a> by Angular
+      Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a
+          href='http://codepen.io'>CodePen</a>.
     </iframe>
-    <br/>
+
+
+    <p>Now just you add your Angular Material components and other HTML content to your Blank starter app.</p>
+
     <br/>
 
+        <hr>
 
-    <h3>Include Optional Dependencies</h3>
+        <h3>Our CodePen Community</h3>
     <p>
-      Angular Material integrates with some additional libraries which you may optionally include:
+      You can also visit our <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
+                     title="Link opens in a new window">CodePen Community</a> to explore more samples and ideas.
     </p>
+      <div layout-align="center" style="width: 100%">
+      <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
+                     title="Link opens in a new window" style="text-decoration:none; border: 0 none;">
+      <img  src="https://cloud.githubusercontent.com/assets/210413/11569469/ada7de16-99b7-11e5-91b5-cf252a7d9122.png" style="text-decoration:none; border: 0 none;">
+      </a>
+      </div>
+
+
+    <br/><br/>
+
+    <hr>
+
+    <h3>Installing the Angular Material Libraries</h3>
+
+    <br/>
+    You can install the Angular Material library (and it's dependent library) in your local project using either
+    <a href="https://github.com/angular/bower-material/#installing-angular-material">NPM, JSPM, or Bower</a>.
+
+    <p>
+      Angular Material also integrates with some additional, optional libraries which you may elect to include:
+    </p>
+
     <ul style="margin-bottom: 2em;">
       <li>
         <a href="https://docs.angularjs.org/api/ngMessages">ngMessages</a>
@@ -49,14 +95,18 @@ <h3>Include Optional Dependencies</h3>
       </li>
     </ul>
 
+    <br/>
+    <hr>
+
     <h3>Unsupported Integrations</h3>
     <p>
-      Angular Material v1.0 has a few known integration issues with the following libraries:
+      Angular Material v1.0 has a few known integration issues
+      with the following libraries:
     </p>
     <ul style="margin-bottom: 2em;">
       <li>
-        <a href="https://docs.angularjs.org/api/ngTouch">ngTouchs</a>
-        - This module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices.
+        <a href="https://docs.angularjs.org/api/ngTouch">ngTouch</a>
+        - This Angular.js Touch module interferes with ngMaterial's click, tap, and swipe support for touch-enabled devices.
       </li>
 
       <li>
diff --git a/docs/app/partials/layout-alignment.tmpl.html b/docs/app/partials/layout-alignment.tmpl.html
index c9c4cc3a9eb..4402c81e2ef 100644
--- a/docs/app/partials/layout-alignment.tmpl.html
+++ b/docs/app/partials/layout-alignment.tmpl.html
@@ -1,50 +1,75 @@
 <div ng-controller="LayoutCtrl" class="layout-content" ng-cloak>
 
   <p>
-    The <code>layout-align</code> attribute takes two words.
-    The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>
+    The <code>layout-align</code> directive takes two words.
+    The first word says how the children will be aligned in the lay3ut's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.</p>
 
-    <p>Only one word is required for the attribute. For example, <code>layout="row" layout-align="center"</code> would make the elements center horizontally and use the default behavior vertically.</p>
+    <p>Only one value is required for this directive.
+    For example, <code>layout="row" layout-align="center"</code> would make the elements
+    center horizontally and use the default behavior vertically.</p>
 
     <p><code>layout="column" layout-align="center end"</code> would make
     children align along the center vertically and along the end (right) horizontally. </p>
+  
+  
   <table class="md-api-table">
+         <thead>
+           <tr>
+             <th>API</th>
+             <th>Sets child alignments within the layout container</th>
+           </tr>
+         </thead>
+          <tr>
+            <td>layout-align</td>
+            <td>Sets default alignment unless overridden by another breakpoint.</td>
+          </tr>
     <tr>
-      <td>layout-align</td>
-      <td>Sets child alignment.</td>
-    </tr>
-    <tr>
-      <td>layout-align-sm</td>
-      <td>Sets child alignment on devices less than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>layout-align-gt-sm</td>
-      <td>Sets child alignment on devices greater than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>layout-align-md</td>
-      <td>Sets child alignment on devices between 600px and 960px wide.</td>
-    </tr>
-    <tr>
-      <td>layout-align-gt-md</td>
-      <td>Sets child alignment on devices greater than 960px wide.
-    </tr>
-    <tr>
-      <td>layout-align-lg</td>
-      <td>Sets child alignment on devices between 960px and 1200px wide.</td>
-    </tr>
-    <tr>
-      <td>layout-align-gt-lg</td>
-      <td>Sets child alignment on devices greater than 1200px wide.</td>
-    </tr>
-  </table>
+           <td>layout-align-xs</td>
+           <td>width &lt; <b>600</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-gt-xs</td>
+           <td>width &gt;= <b>600</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-sm</td>
+           <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-gt-sm</td>
+           <td>width &gt;= <b>960</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-md</td>
+           <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-gt-md</td>
+           <td>width &gt;= <b>1280</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-lg</td>
+           <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-gt-lg</td>
+           <td>width &gt;= <b>1920</b>px</td>
+         </tr>
+         <tr>
+           <td>layout-align-xl</td>
+           <td>width &gt;= <b>1920</b>px</td>
+         </tr>
+        </table>
+
+  <br/>
+
   <p>
-   See below for more examples:
+   Below is an interactive demo that lets you explore the visual results of the different settings:
   </p>
 
   <section class="layout-panel-parent">
     <div ng-panel="layoutDemo">
-      <docs-demo demo-title='layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}"'
+      <docs-demo demo-title='layout="{{layoutDemo.direction}}" &nbsp; &nbsp; &nbsp; layout-align="{{layoutAlign()}}"'
                  class="small-demo colorNested" interpolate-code="true">
         <demo-file name="index.html">
           <div layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}">
diff --git a/docs/app/partials/layout-children.tmpl.html b/docs/app/partials/layout-children.tmpl.html
new file mode 100644
index 00000000000..15400b0c843
--- /dev/null
+++ b/docs/app/partials/layout-children.tmpl.html
@@ -0,0 +1,322 @@
+<div ng-controller="LayoutCtrl" class="layout-content" ng-cloak>
+
+  <h3>Children within a Layout Container</h3>
+
+  <p>
+    To customize the size and position of elements in a layout <b>container</b>, use the
+    <code>flex</code>, <code>flex-order</code>, and <code>flex-offset</code> attributes on the container's <u>child</u> elements:
+  </p>
+
+  <docs-demo demo-title="Flex Directive" class="small-demo colorNested">
+    <demo-file name="index.html">
+      <div layout="row">
+        <div flex="20">
+          [flex="20"]
+        </div>
+        <div flex="70">
+          [flex="70"]
+        </div>
+        <div flex hide-sm hide-xs>
+          [flex]
+        </div>
+      </div>
+    </demo-file>
+  </docs-demo>
+
+  <p>
+    Add the <code>flex</code> directive to a layout's child element and the element will flex (grow or shrink) to fit
+    the area unused by other elements. <code>flex</code> defines how the element will ajust its size with respect to its
+    <u>parent</u> container and the other elements within the container.
+  </p>
+
+  <docs-demo demo-title="Flex Percent Values" class="small-demo colorNested-noPad">
+    <demo-file name="index.html">
+      <div layout="row" layout-wrap>
+        <div flex="30">
+          [flex="30"]
+        </div>
+        <div flex="45">
+          [flex="45"]
+        </div>
+        <div flex="25">
+          [flex="25"]
+        </div>
+        <div flex="33">
+          [flex="33"]
+        </div>
+        <div flex="66">
+          [flex="66"]
+        </div>
+        <div flex="50">
+          [flex="50"]
+        </div>
+        <div flex>
+          [flex]
+        </div>
+      </div>
+    </demo-file>
+  </docs-demo>
+
+
+  <p>
+    A layout child's <code>flex</code> directrive can be given an integer value from 0-100.
+    The element will stretch to the percentage of available space matching the value. Currently, the <code>flex</code>
+    directive value is restricted to multiples of five, 33 or 66.
+  </p>
+
+  <p> For example: <code>flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100"</code>.</p>
+
+  <docs-demo demo-title="Responsive Flex Directives" class="small-demo colorNested-noPad">
+    <demo-file name="index.html">
+      <div layout="row">
+        <div flex-gt-sm="66" flex="33">
+          flex 33% on mobile, <br/>and 66% on gt-sm devices.
+        </div>
+        <div flex-gt-sm="33" flex="66">
+          flex 66%  on mobile, <br/>and 33% on gt-sm devices.
+        </div>
+      </div>
+    </demo-file>
+  </docs-demo>
+
+
+  <p>
+    See the <a href="layout/options">layout options page</a> for more information on responsive flex directives like
+    <code>hide-sm</code> and <code>layout-wrap</code> used in the above examples.
+  </p>
+
+  <br/>
+  <hr>
+  <br/>
+
+  <h3>Additional Flex Values</h3>
+
+  <p>
+    There are additional flex values provided by Angular Material to improve flexibility and to make the API
+    easier to understand.
+  </p>
+
+  <docs-demo demo-title="Other Flex Values" class="small-demo colorNested-noPad">
+    <demo-file name="index.html">
+      <div layout="row" layout-wrap>
+        <div flex="0">
+          [flex="0"]
+        </div>
+        <div flex="none">
+          [flex="none"]
+        </div>
+        <div flex>
+          [flex]
+        </div>
+        <div flex="grow">
+          [flex="grow"]
+        </div>
+        <div flex="auto">
+          [flex="auto"]
+        </div>
+        <div flex="auto">
+          [flex="auto"]
+        </div>
+        <div flex="initial">
+          [flex="initial"]
+        </div>
+      </div>
+    </demo-file>
+  </docs-demo>
+
+
+  <table class="md-api-table">
+    <tr>
+      <td>flex</td>
+      <td>Will grow and shrink as needed. Starts with a size of 0%. Same as <code>flex="0"</code>.</td>
+    </tr>
+    <tr>
+      <td>flex="none"</td>
+      <td>Will not grow or shrink. Sized based on it's <code>width</code> and <code>height</code> values.</td>
+    </tr>
+    <tr>
+      <td>flex="initial"</td>
+      <td>Will shrink as needed. Starts with a size based on it's <code>width</code> and <code>height</code> values.</td>
+    </tr>
+    <tr>
+      <td>flex="auto"</td>
+      <td>Will grow and shrink as needed. Starts with a size based on it's <code>width</code> and <code>height</code> values.</td>
+    </tr>
+    <tr>
+      <td>flex="grow"</td>
+      <td>Will grow and shrink as needed. Starts with a size of 100%. Same as <code>flex="100"</code>.</td>
+    </tr>
+  </table>
+
+
+  <br/>
+  <hr>
+  <br/>
+
+  <h3>Ordering HTML Elements</h3>
+
+  <p>
+    Add the <code>flex-order</code> directive to a layout child to set its
+    order position within the layout container. Any integer value from -20 to 20 is accepted.
+  </p>
+
+  <docs-demo demo-title="Flex-Order Directive" class="small-demo colorNested">
+    <demo-file name="index.html">
+      <div layout="row">
+        <div flex flex-order="-1">
+          <p>[flex-order="-1"]</p>
+        </div>
+        <div flex flex-order="1" flex-order-gt-md="3">
+          <p hide-gt-md>[flex-order="1"]</p>
+          <p hide show-gt-md>[flex-order-gt-md="3"]</p>
+        </div>
+        <div flex flex-order="2">
+          <p>[flex-order="2"]</p>
+        </div>
+        <div flex flex-order="3" flex-order-gt-md="1">
+          <p hide-gt-md>[flex-order="3"]</p>
+          <p hide show-gt-md>[flex-order-gt-md="1"]</p>
+        </div>
+      </div>
+    </demo-file>
+  </docs-demo>
+
+  <table class="md-api-table">
+      <thead>
+        <tr>
+          <th>API</th>
+          <th>Device <b>width</b> when breakpoint overrides default</th>
+        </tr>
+      </thead>
+       <tr>
+         <td>flex-order</td>
+         <td>Sets default layout order unless overridden by another breakpoint.</td>
+       </tr>
+    <tr>
+        <td>flex-order-xs</td>
+           <td>width &lt; <b>600</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-gt-xs</td>
+           <td>width &gt;= <b>600</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-sm</td>
+           <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-gt-sm</td>
+           <td>width &gt;= <b>960</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-md</td>
+           <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-gt-md</td>
+           <td>width &gt;= <b>1280</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-lg</td>
+           <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-gt-lg</td>
+           <td>width &gt;= <b>1920</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-order-xl</td>
+           <td>width &gt;= <b>1920</b>px</td>
+         </tr>
+     </table>
+  
+
+  <p>
+    See the <a href="layout/options">layout options page</a> for more information on directives like
+    <code>hide</code>, <code>hide-gt-md</code>, and <code>show-gt-md</code> used in the above examples.
+  </p>
+
+  <br/>
+  <hr>
+  <br/>
+
+  <h3>Add Offsets to the Preceding HTML Elements</h3>
+
+  <p>
+    Add the <code>flex-offset</code> directive to a layout child to set its
+    offset percentage within the layout container. Values must be multiples
+    of <code>5</code> or <code>33</code> / <code>66</code>. These offsets establish a <code>margin-left</code>
+    with respect to the preceding element or the containers left boundary.
+  </p>
+
+  <p>
+      When using <code>flex-offset</code> the margin-left offset is applied... regardless of your choice of <code>flex-order</code>.
+      or if you use a <code>flex-direction: reverse</code>.
+    </p>
+
+  <docs-demo demo-title="Flex-Offset Directive" class="small-demo colorNested">
+    <demo-file name="index.html">
+      <div layout="row">
+        <div flex="66" flex-offset="15">
+          [flex-offset="15"]
+          [flex="66"]
+        </div>
+        <div flex>
+          [flex]
+        </div>
+      </div>
+    </demo-file>
+  </docs-demo>
+
+  <table class="md-api-table">
+        <thead>
+          <tr>
+            <th>API</th>
+            <th>Device width when breakpoint overrides default</th>
+          </tr>
+        </thead>
+         <tr>
+           <td>flex-offset</td>
+           <td>Sets default margin-left offset (<b>%-based</b>) unless overridden by another breakpoint.</td>
+         </tr>
+    <tr>
+           <td>flex-offset-xs</td>
+           <td>width &lt; <b>600</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-gt-xs</td>
+           <td>width &gt;= <b>600</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-sm</td>
+           <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-gt-sm</td>
+           <td>width &gt;= <b>960</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-md</td>
+           <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-gt-md</td>
+           <td>width &gt;= <b>1280</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-lg</td>
+           <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-gt-lg</td>
+           <td>width &gt;= <b>1920</b>px</td>
+         </tr>
+         <tr>
+           <td>flex-offset-xl</td>
+           <td>width &gt;= <b>1920</b>px</td>
+         </tr>
+       </table>
+
+
+</div>
+
diff --git a/docs/app/partials/layout-container.tmpl.html b/docs/app/partials/layout-container.tmpl.html
index 2552b5218d4..3a2f35b9f4e 100644
--- a/docs/app/partials/layout-container.tmpl.html
+++ b/docs/app/partials/layout-container.tmpl.html
@@ -1,28 +1,11 @@
 <div ng-controller="LayoutCtrl" class="layout-content" ng-cloak>
 
-  <h3>Overview</h3>
-  <p>
-    Angular Material's responsive CSS layout is built on
-    <a href="http://www.w3.org/TR/css3-flexbox/">flexbox</a>.
-  </p>
+  <h3>Layout and Containers</h3>
 
   <p>
-    The layout system is based upon element attributes rather than CSS classes.
-    Attributes provide an easy way to set a value (eg. <code>layout="row"</code>) and
-    help us separate concerns: attributes define layout, and classes define styling.
-  </p>
-  <p>
-    <i>
-      Note: Due to performance problems related to attribute selectors in IE11, our attributes are converted
-      to class selectors at runtime. You should continue to use layout attribute selectors in your code.
-    </i>
-  </p>
-
-  <h3>Layout Attribute</h3>
-  <p>
-    Use the <code>layout</code> attribute on an element to arrange its children
+    Use the <code>layout</code> directive on a container element to specify the layout direction for its children:
     horizontally in a row (<code>layout="row"</code>) or vertically in a column (<code>layout="column"</code>).
-    Row layout is the default if you specify the <code>layout</code> attribute without a value.
+    Note that <code>row</code> is the default layout direction if you specify the <code>layout</code> directive without a value.
   </p>
 
   <table>
@@ -36,7 +19,9 @@ <h3>Layout Attribute</h3>
     </tr>
   </table>
 
-  <docs-demo demo-title="Layout Attribute" class="small-demo colorNested">
+  <br/>
+
+  <docs-demo demo-title="Layout Directive" class="small-demo colorNested">
     <demo-file name="index.html">
     <div layout="row">
       <div flex>First item in row</div>
@@ -50,6 +35,111 @@ <h3>Layout Attribute</h3>
   </docs-demo>
 
   <p>
-    See the <a href="layout/options">layout options page</a> for information on responsive layouts and other options.
+      Note that <code>layout</code> only affects the flow direction for that container's <b>immediate</b> children.
+    </p>
+
+  <hr>
+
+  <br/>
+  <h3>Layouts and Responsive Breakpoints</h3>
+
+  <p>
+    As discussed in the <a href="layout/introduction">Layout Introduction page</a> you can
+    make your layout change depending upon the device view size by using <b>breakpoint alias</b> suffixes.
+   </p>
+
+  <p>
+    To make your layout automatically change depending upon the device screen size, use one to the following <code>layout</code>
+    APIs to set the layout direction for devices with view widths:
   </p>
-</div>
+
+   <table class="md-api-table">
+    <thead>
+      <tr>
+        <th>API</th>
+        <th>Device width when breakpoint overrides default</th>
+      </tr>
+    </thead>
+     <tr>
+       <td>layout</td>
+       <td>Sets default layout direction unless overridden by another breakpoint.</td>
+     </tr>
+     <tr>
+       <td>layout-xs</td>
+       <td>width &lt; <b>600</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-gt-xs</td>
+       <td>width &gt;= <b>600</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-sm</td>
+       <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-gt-sm</td>
+       <td>width &gt;= <b>960</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-md</td>
+       <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-gt-md</td>
+       <td>width &gt;= <b>1280</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-lg</td>
+       <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-gt-lg</td>
+       <td>width &gt;= <b>1920</b>px</td>
+     </tr>
+     <tr>
+       <td>layout-xl</td>
+       <td>width &gt;= <b>1920</b>px</td>
+     </tr>
+   </table>
+   <br/>
+
+  <p><a
+      href="https://camo.githubusercontent.com/ad81ae92f8b4285747ce4e48007bf3f104dd5630/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f7075626c6973682f6d6174657269616c5f765f342f6d6174657269616c5f6578745f7075626c6973682f3042386f6c5631354a3761625053474678656d46695156527462316b2f6c61796f75745f61646170746976655f627265616b706f696e74735f30312e706e67"
+      target="_blank" style="text-decoration: none;border: 0 none;">
+      <img
+      src="https://camo.githubusercontent.com/ad81ae92f8b4285747ce4e48007bf3f104dd5630/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f7075626c6973682f6d6174657269616c5f765f342f6d6174657269616c5f6578745f7075626c6973682f3042386f6c5631354a3761625053474678656d46695156527462316b2f6c61796f75745f61646170746976655f627265616b706f696e74735f30312e706e67"
+      alt=""
+      style="max-width:100%;text-decoration: none;border: 0 none;"></a>
+  </p>
+
+
+  <p>
+    For the demo below, as you shrink your browser window width notice the flow direction changes to <code>column</code>
+    for mobile devices (<code>xs</code>). And as you expand it will reset to <code>row</code>
+    for <code>gt-sm</code> view sizes.
+
+  </p>
+
+  <docs-demo demo-title="Responsive Layouts" class="small-demo colorNested">
+    <demo-file name="index.html">
+      <div layout="row" layout-xs="column">
+        <div flex>
+          I'm above on mobile, and to the left on larger devices.
+        </div>
+        <div flex>
+          I'm below on mobile, and to the right on larger devices.
+        </div>
+      </div>
+    </demo-file>
+  </docs-demo>
+
+
+
+  <p>
+    See the <a href="layout/options">Layout Options page</a> for more options such as padding, alignments, etc.
+  </p>
+
+
+
+ </div>
+
diff --git a/docs/app/partials/layout-grid.tmpl.html b/docs/app/partials/layout-grid.tmpl.html
deleted file mode 100644
index 04e921be4c6..00000000000
--- a/docs/app/partials/layout-grid.tmpl.html
+++ /dev/null
@@ -1,232 +0,0 @@
-<div ng-controller="LayoutCtrl" class="layout-content" ng-cloak>
-
-  <p>
-    To customize the size and position of elements in a layout, use the
-    <code>flex</code>, <code>flex-order</code>, and <code>flex-offset</code> attributes.
-  </p>
-
-  <docs-demo demo-title="Flex Attribute" class="small-demo colorNested">
-    <demo-file name="index.html">
-      <div layout="row">
-        <div flex>
-          [flex]
-        </div>
-        <div flex>
-          [flex]
-        </div>
-        <div flex hide-sm>
-          [flex]
-        </div>
-      </div>
-    </demo-file>
-  </docs-demo>
-  <p>
-    Add the <code>flex</code> attribute to a layout's child element and the element will flex (grow or shrink) to fit
-    the area unused by other elements. <code>flex</code> defines how the element will ajust its size with respect to its
-    parent container and the other other elements within the container.
-  </p>
-
-  <docs-demo demo-title="Flex Percent Values" class="small-demo colorNested-noPad">
-    <demo-file name="index.html">
-      <div layout="row" layout-wrap>
-        <div flex="30">
-          [flex="30"]
-        </div>
-        <div flex="45">
-          [flex="45"]
-        </div>
-        <div flex="25">
-          [flex="25"]
-        </div>
-        <div flex="33">
-          [flex="33"]
-        </div>
-        <div flex="66">
-          [flex="66"]
-        </div>
-        <div flex="50">
-          [flex="50"]
-        </div>
-        <div flex>
-          [flex]
-        </div>
-      </div>
-    </demo-file>
-  </docs-demo>
-
-  <p>
-    A layout child's <code>flex</code> attribute can be given an integer value from 0-100.
-    The element will stretch to the percentage of available space matching the value.
-    <br/><br/>
-    Currently, the <code>flex</code> attribute value is restricted to multiples of five and 33 or 66.
-    <br/>
-    For example: <code>flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100"</code>.
-  </p>
-  <p>
-    See the <a href="layout/options">layout options page</a> for more information on responsive flex attributes like
-    <code>hide-sm</code> and <code>layout-wrap</code> used in the above examples.
-  </p>
-
-  <docs-demo demo-title="Other Flex Values" class="small-demo colorNested-noPad">
-    <demo-file name="index.html">
-      <div layout="row" layout-wrap>
-        <div flex="0">
-          [flex="0"]
-        </div>
-        <div flex="none">
-          [flex="none"]
-        </div>
-        <div flex>
-          [flex]
-        </div>
-        <div flex="grow">
-          [flex="grow"]
-        </div>
-        <div flex="auto">
-          [flex="auto"]
-        </div>
-        <div flex="auto">
-          [flex="auto"]
-        </div>
-        <div flex="initial">
-          [flex="initial"]
-        </div>
-      </div>
-    </demo-file>
-  </docs-demo>
-
-  <p>
-    There are additional flex values provided by Angular Material to improve flexibility and to make the API
-    easier to understand.
-  </p>
-  <table class="md-api-table">
-    <tr>
-      <td>flex</td>
-      <td>Will grow and shrink as needed. Starts with a size of 0%. Same as <code>flex="0"</code>.</td>
-    </tr>
-    <tr>
-      <td>flex="none"</td>
-      <td>Will not grow or shrink. Sized based on it's <code>width</code> and <code>height</code> values.</td>
-    </tr>
-    <tr>
-      <td>flex="initial"</td>
-      <td>Will shrink as needed. Starts with a size based on it's <code>width</code> and <code>height</code> values.</td>
-    </tr>
-    <tr>
-      <td>flex="auto"</td>
-      <td>Will grow and shrink as needed. Starts with a size based on it's <code>width</code> and <code>height</code> values.</td>
-    </tr>
-    <tr>
-      <td>flex="grow"</td>
-      <td>Will grow and shrink as needed. Starts with a size of 100%. Same as <code>flex="100"</code>.</td>
-    </tr>
-  </table>
-
-  <docs-demo demo-title="Flex Order Attribute" class="small-demo colorNested">
-    <demo-file name="index.html">
-      <div layout="row">
-        <div flex flex-order="-1">
-          <p>[flex-order="-1"]</p>
-        </div>
-        <div flex flex-order="1" flex-order-gt-md="3">
-          <p hide-gt-md>[flex-order="1"]</p>
-          <p hide show-gt-md>[flex-order-gt-md="3"]</p>
-        </div>
-        <div flex flex-order="2">
-          <p>[flex-order="2"]</p>
-        </div>
-        <div flex flex-order="3" flex-order-gt-md="1">
-          <p hide-gt-md>[flex-order="3"]</p>
-          <p hide show-gt-md>[flex-order-gt-md="1"]</p>
-        </div>
-      </div>
-    </demo-file>
-  </docs-demo>
-  <p>
-    Add the <code>flex-order</code> attribute to a layout child to set its
-    position within the layout. Any value from -9 to 9 is accepted.
-  </p>
-  <table class="md-api-table">
-    <tr>
-      <td>flex-order</td>
-      <td>Sets element order.</td>
-    </tr>
-    <tr>
-      <td>flex-order-sm</td>
-      <td>Sets element order on devices less than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-order-gt-sm</td>
-      <td>Sets element order on devices greater than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-order-md</td>
-      <td>Sets element order on devices between 600px and 960px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-order-gt-md</td>
-      <td>Sets element order on devices greater than 960px wide.
-    </tr>
-    <tr>
-      <td>flex-order-lg</td>
-      <td>Sets element order on devices between 960px and 1200px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-order-gt-lg</td>
-      <td>Sets element order on devices greater than 1200px wide.</td>
-    </tr>
-  </table>
-  <p>
-    See the <a href="layout/options">layout options page</a> for more information on attributes like
-    <code>hide</code>, <code>hide-gt-md</code>, and <code>show-gt-md</code> used in the above examples.
-  </p>
-
-  <docs-demo demo-title="Flex Offset Attribute" class="small-demo colorNested">
-    <demo-file name="index.html">
-      <div layout="row">
-        <div flex flex-offset="33">
-          [flex offset="33"]
-        </div>
-        <div flex>
-          [flex]
-        </div>
-      </div>
-    </demo-file>
-  </docs-demo>
-  <p>
-    Add the <code>flex-offset</code> attribute to a layout child to set its
-    offset percentage within the layout. Values must be multiples 
-    of <code>5</code> or <code>33</code> / <code>66</code>.
-  </p>
-  <table class="md-api-table">
-    <tr>
-      <td>flex-offset</td>
-      <td>Sets element offset.</td>
-    </tr>
-    <tr>
-      <td>flex-offset-sm</td>
-      <td>Sets element offset on devices less than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-offset-gt-sm</td>
-      <td>Sets element offset on devices greater than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-offset-md</td>
-      <td>Sets element offset on devices between 600px and 960px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-offset-gt-md</td>
-      <td>Sets element offset on devices greater than 960px wide.
-    </tr>
-    <tr>
-      <td>flex-offset-lg</td>
-      <td>Sets element offset on devices between 960px and 1200px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-offset-gt-lg</td>
-      <td>Sets element offset on devices greater than 1200px wide.</td>
-    </tr>
-  </table>
-</div>
-
diff --git a/docs/app/partials/layout-introduction.tmpl.html b/docs/app/partials/layout-introduction.tmpl.html
new file mode 100644
index 00000000000..34c02df1bcf
--- /dev/null
+++ b/docs/app/partials/layout-introduction.tmpl.html
@@ -0,0 +1,373 @@
+<div ng-controller="LayoutCtrl" class="layout-content" ng-cloak>
+
+  <h3>Overview</h3>
+  <p>
+    Angular Material's Layout features provide sugar to enable developers to more easily create modern,
+    responsive layouts on top of CSS3 <a href="http://www.w3.org/TR/css3-flexbox/">flexbox</a>.
+    The layout API consists of a set of Angular directives that can
+    be applied to any of your application's HTML content.
+  </p>
+
+
+  <p>
+    Using <b> HTML Directives</b> as the API provides an easy way to set a value (eg. <code>layout="row"</code>) and
+    helps with separation of concerns: Attributes define layout while CSS classes assign styling.
+  </p>
+
+
+  <table class="md-api-table">
+    <thead>
+    <tr>
+      <th>HTML Markup API</th>
+      <th>Allowed values (raw or interpolated)</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>layout</td>
+      <td><code>row | column</code></td>
+    </tr>
+    <tr>
+      <td>flex</td>
+      <td> integer (increments of 5 for 0%->100%)</td>
+    </tr>
+    <tr>
+      <td>flex-order</td>
+      <td>integer values from -20 to 20</td>
+    </tr>
+    <tr>
+      <td>flex-offset</td>
+      <td>integer (increments of 5 for 0%->100%, 100%/3, 200%/3)</td>
+    </tr>
+    <tr>
+      <td>layout-align</td>
+      <td><code>start|center|end|space-around|space-between</code> <code>start|center|end|stretch</code></td>
+    </tr>
+    <tr>
+      <td>layout-fill</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>layout-wrap</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>layout-nowrap</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>layout-margin</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>layout-padding</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>show</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>hide</td>
+      <td></td>
+    </tr>
+    </tbody>
+  </table>
+
+
+  <p>And if we use Breakpoints as specified in Material Design:</p>
+  <p><a
+      href="https://camo.githubusercontent.com/ad81ae92f8b4285747ce4e48007bf3f104dd5630/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f7075626c6973682f6d6174657269616c5f765f342f6d6174657269616c5f6578745f7075626c6973682f3042386f6c5631354a3761625053474678656d46695156527462316b2f6c61796f75745f61646170746976655f627265616b706f696e74735f30312e706e67"
+      target="_blank"><img
+      src="https://camo.githubusercontent.com/ad81ae92f8b4285747ce4e48007bf3f104dd5630/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f7075626c6973682f6d6174657269616c5f765f342f6d6174657269616c5f6578745f7075626c6973682f3042386f6c5631354a3761625053474678656d46695156527462316b2f6c61796f75745f61646170746976655f627265616b706f696e74735f30312e706e67"
+      alt=""
+      style="max-width:100%;"></a>
+  </p>
+
+
+  <p>We can associate breakpoints with mediaQuery definitions using breakpoint <strong>alias(es)</strong>:</p>
+
+  <table class="md-api-table">
+    <thead>
+    <tr>
+      <th>Breakpoint</th>
+      <th>MediaQuery (pixel range)</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td>xs</td>
+      <td>'(max-width: <b>599</b>px)'</td>
+    </tr>
+    <tr>
+      <td>gt-xs</td>
+      <td>'(min-width: <b>600</b>px)'</td>
+    </tr>
+    <tr>
+      <td>sm</td>
+      <td>'(min-width: <b>600</b>px) and (max-width: <b>959</b>px)'</td>
+    </tr>
+    <tr>
+      <td>gt-sm</td>
+      <td>'(min-width: <b>960</b>px)'</td>
+    </tr>
+    <tr>
+      <td>md</td>
+      <td>'(min-width: <b>960</b>px) and (max-width: <b>1279</b>px)'</td>
+    </tr>
+    <tr>
+      <td>gt-md</td>
+      <td>'(min-width: <b>1280</b>px)'</td>
+    </tr>
+    <tr>
+      <td>lg</td>
+      <td>'(min-width: <b>1280</b>px) and (max-width: <b>1919</b>px)'</td>
+    </tr>
+    <tr>
+      <td>gt-lg</td>
+      <td>'(min-width: <b>1920</b>px)'</td>
+    </tr>
+    <tr>
+      <td>xl</td>
+      <td>'(min-width: <b>1920</b>px)'</td>
+    </tr>
+    </tbody>
+  </table>
+
+  <br/>
+  <hr>
+  <h3>
+    API with Responsive Breakpoints
+  </h3>
+
+  <p>Now we can combine the breakpoint <code>alias</code> with the Layout API to easily support Responsive breakpoints
+    with our simple Layout markup convention. The <code>alias</code> is simply used as <b>suffix</b> extensions to the Layout
+    API keyword.
+    <br/>e.g.
+  </p>
+
+  <p>
+    This notation results in, for example, the following table for the <code>layout</code> and <code>flex</code> APIs:
+  </p>
+
+  <table class="md-api-table">
+      <thead>
+      <tr>
+        <th>layout API</th>
+        <th>flex API</th>
+        <th>Activates when device</th>
+      </tr>
+      </thead>
+      <tr>
+        <td>layout</td>
+        <td>flex</td>
+        <td>Sets default layout direction &amp; flex unless overridden by another breakpoint.</td>
+      </tr>
+      <tr>
+        <td>layout-xs</td>
+        <td>flex-xs</td>
+        <td>width &lt; <b>600</b>px</td>
+      </tr>
+      <tr>
+        <td>layout-gt-xs</td>
+        <td>flex-gt-xs</td>
+        <td>width &gt;= <b>600</b>px</td>
+      </tr>
+      <tr>
+        <td>layout-sm</td>
+        <td>flex-sm</td>
+        <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
+      </tr>
+      <tr>
+        <td>layout-gt-sm</td>
+        <td>flex-gt-sm</td>
+        <td>width &gt;= <b>960</b>px</td>
+      </tr>
+      <tr>
+        <td>layout-md</td>
+        <td>flex-md</td>
+        <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
+      </tr>
+      <tr>
+        <td>layout-gt-md</td>
+        <td>flex-gt-md</td>
+        <td>width &gt;= <b>1280</b>px</td>
+      </tr>
+      <tr>
+        <td>layout-lg</td>
+        <td>flex-lg</td>
+        <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
+      </tr>
+      <tr>
+        <td>layout-gt-lg</td>
+        <td>flex-gt-lg</td>
+        <td>width &gt;= <b>1920/b>px</td>
+      </tr>
+      <tr>
+        <td>layout-xl</td>
+        <td>flex-xl</td>
+        <td>width &gt;= <b>1920</b>px</td>
+      </tr>
+    </table>
+
+  <p>Below is an example usage of the Responsive Layout API:</p>
+
+  <hljs lang="html">
+    <div layout='column' class="zero">
+
+      <div flex="33" flex-md="{{ vm.box1Width }}" class="one"></div>
+      <div flex="33" layout="{{ vm.direction }}" layout-md="row" class="two">
+
+        <div flex="22" flex-md="10" hide-lg class="two_one"></div>
+        <div flex="30px" show hide-md="{{ vm.hideBox }}" flex-md="25" class="two_two"></div>
+        <div flex="20" flex-md="65" class="two_three"></div>
+
+      </div>
+      <div flex class="three"></div>
+
+    </div>
+  </hljs>
+
+  <br/>
+
+  <p>
+  This Layout API means it is much easier to set up and maintain flexbox layouts vs. defining everything via CSS.
+  The developer uses the Layout HTML API to specify <b><i>intention</i></b> and the Layout engine handles all the issues of CSS flexbox styling.
+  </p>
+
+  <p class="layout_note">
+    The Layout engine will log console warnings when it encounters conflicts or known issues.
+  </p>
+
+
+  <br/><br/>
+  <hr>
+  <br/>
+
+  <h3>Under-the-Hood</h3>
+
+  <p>
+    Due to performance problems when using Attribute Selectors with <b>Internet Explore</b> browsers; see the following for more details:
+  </p>
+
+  <ul>
+    <li><a href="https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers" target="_blank">FlexBugs</a></li>
+    <li><a href="http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/" target="_blank">Normalizing Cross-browser Flexbox Bugs</a></li>
+    <li><a href="http://caniuse.com/#search=flex" target="_blank">Can I Use <code>flex</code>: see the <code>Known Issues</code> tab.</a></li>
+  </ul>
+
+  <p>
+    Layout directives dynamically generate class selectors at runtime. And the Layout CSS classNames and styles have each been
+    predefined in the <code>angular-material.css</code> stylesheet.
+  </p>
+
+  <p class="layout_note">
+    Developers should continue to use Layout directives in the HTML
+    markup as the classes may change between releases.
+  </p>
+
+  <p>
+    Let's see how this directive-to-className transformation works. Consider the simply use of the <code>layout</code> and <code>flex</code> directives (API):
+  </p>
+
+  <hljs lang="html">
+    <div>
+
+      <div layout="row">
+
+        <div flex>First item in row</div>
+        <div flex="20">Second item in row</div>
+
+      </div>
+      <div layout="column">
+
+        <div flex="66">First item in column</div>
+        <div flex="33">Second item in column</div>
+
+      </div>
+
+    </div>
+  </hljs>
+
+
+  <p>
+    At runtime, these attributes are transformed to CSS classes.
+  </p>
+
+  <hljs lang="html">
+    <div>
+
+      <div class="ng-scope layout-row">
+
+        <div class="flex">First item in row</div>
+        <div class="flex-20">Second item in row</div>
+
+      </div>
+      <div class="ng-scope layout-column">
+
+        <div class="flex-33">First item in column</div>
+        <div class="flex-66">Second item in column</div>
+
+      </div>
+
+    </div>
+  </hljs>
+
+  <p>
+    Using the style classes above defined in <code>angular-material.css</code>
+  </p>
+
+  <hljs lang="css">
+
+    .flex {
+      -webkit-flex: 1 1 0%;
+          -ms-flex: 1 1 0%;
+              flex: 1 1 0%;
+      box-sizing: border-box;
+    }
+    .flex-20 {
+      -webkit-flex: 1 1 20%;
+          -ms-flex: 1 1 20%;
+              flex: 1 1 20%;
+      max-width: 20%;
+      max-height: 100%;
+      box-sizing: border-box;
+    }
+
+    .layout-row .flex-33 {
+      -webkit-flex: 1 1 33%;
+          -ms-flex: 1 1 33%;
+              flex: 1 1 33%;
+      box-sizing: border-box;
+    }
+
+    .layout-row  .flex-66 {
+      -webkit-flex: 1 1 66%;
+          -ms-flex: 1 1 66%;
+              flex: 1 1 66%;
+      box-sizing: border-box;
+    }
+
+
+    .layout-row .flex-33 {
+      max-width: calc(100% / 3);
+      max-height: 100%;
+    }
+
+    .layout-row  .flex-66 {
+      max-width: calc(200% / 3);
+      max-height: 100%;
+    }
+
+    .layout-column .flex-33 {
+      max-width: 100%;
+      max-height: calc(100% / 3);
+    }
+
+    .layout-column  .flex-66 {
+      max-width: 100%;
+      max-height: calc(200% / 3);
+    }
+  </hljs>
+
+</div>
diff --git a/docs/app/partials/layout-options.tmpl.html b/docs/app/partials/layout-options.tmpl.html
index 6af5cda68cd..954d75f13d5 100644
--- a/docs/app/partials/layout-options.tmpl.html
+++ b/docs/app/partials/layout-options.tmpl.html
@@ -15,45 +15,69 @@
 
   <p>
     See the <a href="layout/container">Container Elements</a> page for a basic explanation
-    of layout attributes.
+    of layout directives.
     <br/>
     To make your layout change depending upon the device screen size, there are
-    other <code>layout</code> attributes available:
+    other <code>layout</code> directives available:
   </p>
 
   <table class="md-api-table">
+    <thead>
+    <tr>
+      <th>API</th>
+      <th>Activates when device</th>
+    </tr>
+    </thead>
     <tr>
       <td>layout</td>
-      <td>Sets the default layout on all devices.</td>
+      <td>Sets default layout direction unless overridden by another breakpoint.</td>
+    </tr>
+    <tr>
+      <td>layout-xs</td>
+      <td>width &lt; <b>600</b>px</td>
+    </tr>
+    <tr>
+      <td>layout-gt-xs</td>
+      <td>width &gt;= <b>600</b>px</td>
     </tr>
     <tr>
       <td>layout-sm</td>
-      <td>Sets the layout on devices less than 600px wide (phones).</td>
+      <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
     </tr>
     <tr>
       <td>layout-gt-sm</td>
-      <td>Sets the layout on devices greater than 600px wide (bigger than phones).</td>
+      <td>width &gt;= <b>960</b>px</td>
     </tr>
     <tr>
       <td>layout-md</td>
-      <td>Sets the layout on devices between 600px and 960px wide (tablets in portrait).</td>
+      <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
     </tr>
     <tr>
       <td>layout-gt-md</td>
-      <td>Sets the layout on devices greater than 960px wide (bigger than tablets in portrait).</td>
+      <td>width &gt;= <b>1280</b>px</td>
     </tr>
     <tr>
       <td>layout-lg</td>
-      <td>Sets the layout on devices between 960 and 1200px wide (tablets in landscape).</td>
+      <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
     </tr>
     <tr>
       <td>layout-gt-lg</td>
-      <td>Sets the layout on devices greater than 1200px wide (computers and large screens).</td>
+      <td>width &gt;= <b>1920</b>px</td>
+    </tr>
+    <tr>
+      <td>layout-xl</td>
+      <td>width &gt;= <b>1920</b>px</td>
     </tr>
   </table>
   <br/>
 
   <br/>
+  <hr>
+  <br/>
+
+  <h3>Layout Margin, Padding, Wrap and Fill</h3>
+  <br/>
+
 
   <docs-demo demo-title="Layout Margin, Padding, and Fill" class="small-demo colorNested-noPad">
     <demo-file name="index.html">
@@ -73,16 +97,17 @@
   </docs-demo>
 
   <p>
-    <code>layout-margin</code> adds margin around each <code>flex</code> child. It also adds a margin to the layout container itself.
+    <code>layout-margin</code> adds margin around each <code>flex</code> child. It also adds a margin to the layout
+    container itself.
     <br/>
-    <code>layout-padding</code> adds padding inside each <code>flex</code> child. It also adds padding to the layout container itself.
+    <code>layout-padding</code> adds padding inside each <code>flex</code> child. It also adds padding to the layout
+    container itself.
     <br/>
     <code>layout-fill</code> forces the layout element to fill its parent container.
   </p>
 
-  <br/>
 
-  <br/>
+  <p>Here is a non-trivial group of <code>flex</code> elements using <code>layout-wrap</code></p>
 
   <docs-demo demo-title="Wrap" class="small-demo colorNested-noPad">
     <demo-file name="index.html">
@@ -97,77 +122,38 @@
       </div>
     </demo-file>
   </docs-demo>
+
   <p>
-    <code>layout-wrap</code> allows <code>flex</code> children to wrap within the container if the elements use more than 100%.
+    <code>layout-wrap</code> allows <code>flex</code> children to wrap within the container if the elements use more
+    than 100%.
     <br/>
   </p>
 
   <br/>
 
   <br/>
+    <hr>
+    <br/>
 
-  <docs-demo demo-title="Responsive Flex Attributes" class="small-demo colorNested-noPad">
-    <demo-file name="index.html">
-      <div layout="row">
-        <div flex="66" flex-sm="33">
-          I flex to one-third of the space on mobile, and two-thirds on other devices.
-        </div>
-        <div flex="33" flex-sm="66">
-          I flex to two-thirds of the space on mobile, and one-third on other devices.
-        </div>
-      </div>
-    </demo-file>
-  </docs-demo>
+    <h3>Show &amp; Hide </h3>
 
-  <p>
-    See the <a href="layout/grid">Layout System</a> page for a basic explanation
-    of flex and offset attributes.
+  <p>Use the <code>show</code> <code>hide</code> APIs to responsively show or hide elements. While these work similar
+  to <code>ng-show</code> and <code>ng-hide</code>, these Angular Material Layout directives are mediaQuery-aware.
   </p>
 
-  <table class="md-api-table">
-    <tr>
-      <td>flex</td>
-      <td>Sets flex.</td>
-    </tr>
-    <tr>
-      <td>flex-sm</td>
-      <td>Sets flex on devices less than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-gt-sm</td>
-      <td>Sets flex on devices greater than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>flex-md</td>
-      <td>Sets flex on devices between 600px and 960px wide..</td>
-    </tr>
-    <tr>
-      <td>flex-gt-md</td>
-      <td>Sets flex on devices greater than 960px wide.
-    </tr>
-    <tr>
-      <td>flex-lg</td>
-      <td>Sets flex on devices between 960px and 1200px.</td>
-    </tr>
-    <tr>
-      <td>flex-gt-lg</td>
-      <td>Sets flex on devices greater than 1200px wide.</td>
-    </tr>
-  </table>
-
-  <br/>
-
-  <docs-demo demo-title="Hide and Show Attributes" class="small-demo colorNested">
+  <docs-demo demo-title="Hide and Show Directives" class="small-demo colorNested">
     <demo-file name="index.html">
       <div layout="row">
         <div hide show-gt-sm flex>
-          Hidden on small and shown on larger devices.
+          Only show on gt-sm devices.
         </div>
         <div hide-gt-sm flex>
-          Shown on small and hidden on larger devices.
+          Shown on small and medium.<br/>
+          Hidden on gt-sm devices.
         </div>
-        <div hide-gt-md flex>
-          Shown on small and medium size devices.
+        <div show hide-gt-md flex>
+          Shown on small and medium size devices.<br/>
+          Hidden on gt-md devices.
         </div>
         <div hide show-md flex>
           Shown on medium size devices only.
@@ -180,62 +166,59 @@
   </docs-demo>
   <br/>
   <table class="md-api-table">
+    <thead>
+      <tr>
+        <th>hide (display: none)</th>
+        <th>show (negates hide)</th>
+        <th>Activates when:</th>
+      </tr>
+    </thead>
     <tr>
-      <td>hide</td>
-      <td><code>display: none</code></td>
+      <td>hide-xs</td>
+      <td>show-xs</td>
+      <td>width &lt; <b>600</b>px</td>
+    </tr>
+    <tr>
+      <td>hide-gt-xs</td>
+      <td>show-gt-xs</td>
+      <td>width &gt;= <b>600</b>px</td>
     </tr>
     <tr>
       <td>hide-sm</td>
-      <td><code>display: none</code> on devices less than 600px wide.</td>
+      <td>show-sm</td>
+      <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
     </tr>
     <tr>
       <td>hide-gt-sm</td>
-      <td><code>display: none</code> on devices greater than 600px wide.</td>
+      <td>hide-gt-sm</td>
+      <td>width &gt;= <b>960</b>px</td>
     </tr>
     <tr>
       <td>hide-md</td>
-      <td><code>display: none</code> on devices between 600px and 960px wide.</td>
+      <td>show-md</td>
+      <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
     </tr>
     <tr>
       <td>hide-gt-md</td>
-      <td><code>display: none</code> on devices greater than 960px wide.
+      <td>show-gt-md</td>
+      <td>width &gt;= <b>1280</b>px</td>
     </tr>
     <tr>
       <td>hide-lg</td>
-      <td><code>display: none</code> on devices between 960px and 1200px.</td>
+      <td>show-lg</td>
+      <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
     </tr>
     <tr>
       <td>hide-gt-lg</td>
-      <td><code>display: none</code> on devices greater than 1200px wide.</td>
-    </tr>
-    <tr>
-      <td>show</td>
-      <td>Negates hide.</td>
-    </tr>
-    <tr>
-      <td>show-sm</td>
-      <td>Negates hide on devices less than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>show-gt-sm</td>
-      <td>Negates hide on devices greater than 600px wide.</td>
-    </tr>
-    <tr>
-      <td>show-md</td>
-      <td>Negates hide on devices between 600px and 960px wide..</td>
-    </tr>
-    <tr>
-      <td>show-gt-md</td>
-      <td>Negates hide on devices greater than 960px wide.
-    </tr>
-    <tr>
-      <td>show-lg</td>
-      <td>Negates hide on devices between 960px and 1200px.</td>
+      <td>show-gt-lg</td>
+      <td>width &gt;= <b>1920/b>px</td>
     </tr>
     <tr>
-      <td>show-gt-lg</td>
-      <td>Negates hide on devices greater than 1200px wide.</td>
+      <td>hide-xl</td>
+      <td>show-xl</td>
+      <td>width &gt;= <b>1920</b>px</td>
     </tr>
   </table>
 
+
 </div>
diff --git a/package.json b/package.json
index 05ac1d005d4..6efcf67e300 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "dgeni-packages": "^0.10.3",
     "esprima": "^1.2.2",
     "glob": "~4.0.2",
-    "gulp": "^3.8.11",
+    "gulp": "^3.9.0",
     "gulp-autoprefixer": "^1.0.1",
     "gulp-concat": "^2.2.0",
     "gulp-connect": "^2.2.0",
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
index abe8ef5fe8f..14371b9207c 100644
--- a/src/components/autocomplete/autocomplete.scss
+++ b/src/components/autocomplete/autocomplete.scss
@@ -181,6 +181,7 @@ md-autocomplete {
       }
     }
   }
+  // IE Only
   @media screen and (-ms-high-contrast: active) {
     $border-color: #fff;
 
@@ -230,6 +231,7 @@ md-autocomplete {
   }
 }
 
+// IE Only
 @media screen and (-ms-high-contrast: active) {
   md-autocomplete,
   .md-autocomplete-suggestions {
diff --git a/src/components/bottomSheet/bottom-sheet.scss b/src/components/bottomSheet/bottom-sheet.scss
index 4c0d40f19a3..8dbf7749436 100644
--- a/src/components/bottomSheet/bottom-sheet.scss
+++ b/src/components/bottomSheet/bottom-sheet.scss
@@ -125,11 +125,11 @@ md-bottom-sheet {
         @include grid-items-per-row(3, true);
       }
 
-      @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
+      @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
         @include grid-items-per-row(4);
       }
 
-      @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
+      @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
         @include grid-items-per-row(6);
       }
 
@@ -178,6 +178,7 @@ md-bottom-sheet {
   }
 }
 
+// IE only
 @media screen and (-ms-high-contrast: active) {
   md-bottom-sheet {
     border: 1px solid #fff;
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index bbb4592c0ee..25a22bf58f4 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -224,6 +224,7 @@ button.md-button::-moz-focus-inner {
     border-radius: 0px 2px 2px 0px;
   }
 }
+// IE only
 @media screen and (-ms-high-contrast: active) {
   .md-button.md-raised,
   .md-button.md-fab {
diff --git a/src/components/chips/chips.scss b/src/components/chips/chips.scss
index 73fd29ed962..67143b31403 100644
--- a/src/components/chips/chips.scss
+++ b/src/components/chips/chips.scss
@@ -183,6 +183,7 @@ $contact-chip-name-width: rem(12) !default;
     }
   }
 }
+// IE only
 @media screen and (-ms-high-contrast: active) {
   .md-chip-input-container,
   md-chip {
diff --git a/src/components/chips/demoContactChips/style.scss b/src/components/chips/demoContactChips/style.scss
index f221e2c0fd2..a0f1089fa01 100644
--- a/src/components/chips/demoContactChips/style.scss
+++ b/src/components/chips/demoContactChips/style.scss
@@ -33,7 +33,8 @@ md-content.autocomplete {
       overflow: hidden;
     }
   }
-  @media (min-width: 900px) {
+
+  @media screen and (min-width: 960px) {
     float: left;
     width: 33%;
   }
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 24c3cd42424..5e76b64e98d 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -120,10 +120,10 @@ md-dialog {
   }
 }
 
-@media (max-width: $layout-breakpoint-sm) {
+@media (max-width: $layout-breakpoint-sm - 1) {
   md-dialog.md-dialog-fullscreen {
     min-height: 100%;
     min-width: 100%;
     border-radius: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/menu/demoMenuPositionModes/index.html b/src/components/menu/demoMenuPositionModes/index.html
index 63c5feb1748..d293547f07b 100644
--- a/src/components/menu/demoMenuPositionModes/index.html
+++ b/src/components/menu/demoMenuPositionModes/index.html
@@ -1,10 +1,12 @@
 <div class="md-menu-demo" ng-controller="PositionDemoCtrl as ctrl" ng-cloak style="min-height:350px;">
-  <div class="menu-demo-container" layout-align="center center" layout="column">
-    <h2 class="md-title">Position Mode Demos</h2>
-    <p>The <code>md-position-mode</code> attribute can be used to specify the positioning along the <code>x</code> and <code>y</code> axis.</p>
-    <hr/>
-    <h3 class="md-subhead">Target-Based Position Modes</h3>
-    <div class="menus"  layout-wrap layout="row" layout-fill layout-align="space-between center">
+  <div class="menu-demo-container" layout-align="start center" layout="column" >
+    <div layout-align="start center" layout="column" style="min-height:150px;" >
+      <h2 class="md-title">Position Mode Demos</h2>
+      <p>The <code>md-position-mode</code> attribute can be used to specify the positioning along the <code>x</code> and <code>y</code> axis.</p>
+      <hr/>
+      <h3 class="md-subhead">Target-Based Position Modes</h3>
+    </div>
+    <div class="menus"  layout-wrap layout="row" layout-fill layout-align="space-between center" style="min-height:200px;">
       <div layout="column" flex="33" flex-sm="100" layout-align="center center">
         <p>Target Mode Positioning (default)</p>
         <md-menu>
diff --git a/src/components/menu/demoMenuWidth/index.html b/src/components/menu/demoMenuWidth/index.html
index 528c427e0dc..f031614db68 100644
--- a/src/components/menu/demoMenuWidth/index.html
+++ b/src/components/menu/demoMenuWidth/index.html
@@ -1,8 +1,10 @@
-<div class="md-menu-demo" ng-controller="WidthDemoCtrl as ctrl" style="min-height: 400px" ng-cloak>
-  <div class="menu-demo-container" layout-align="center center" layout="column">
+<div class="md-menu-demo" ng-controller="WidthDemoCtrl as ctrl" style="min-height:350px" ng-cloak>
+  <div class="menu-demo-container" layout-align="start center" layout="column">
+    <div layout-align="start center" layout="column" style="min-height:70px;" >
     <h2 class="md-title">Different Widths</h2>
     <p><code>md-menu-content</code> may specify a <code>width</code> attribute which will follow the <a href="http://www.google.com/design/spec/components/menus.html#menus-specs">official spec</a>.</p>
-    <div class="menus" layout-wrap layout="row" layout-fill layout-align="space-between center">
+    </div>
+    <div class="menus" layout-wrap layout="row" layout-fill layout-align="space-between center" style="min-height:100px;">
       <div layout="column" flex="33" flex-sm="100" layout-align="center center">
         <p>Wide menu (<code>width=6</code>)</p>
         <md-menu md-offset="0 -7">
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index 0c8eb9e258b..8e9ca525d50 100644
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -139,6 +139,7 @@ md-toolbar {
     }
   }
 }
+
 @media (min-width: $layout-breakpoint-sm) {
   md-menu-content {
     min-width: 96px;
@@ -149,3 +150,4 @@ md-toolbar {
     }
   }
 }
+
diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss
index e628decaa59..ae12de6590a 100644
--- a/src/components/toast/toast.scss
+++ b/src/components/toast/toast.scss
@@ -88,7 +88,7 @@ md-toast {
   }
 }
 
-@media (max-width: $layout-breakpoint-sm) {
+@media (max-width: $layout-breakpoint-sm - 1) {
   md-toast {
     left: 0;
     right: 0;
@@ -157,4 +157,4 @@ md-toast {
 // While animating, set the toast parent's overflow to hidden so scrollbars do not appear
 .md-toast-animating {
   overflow: hidden !important;
-}
\ No newline at end of file
+}
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index a100f35770d..5a0d717f7f3 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -132,8 +132,7 @@ md-toolbar {
 }
 
 // Handle mobile portrait
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and
-  (orientation: portrait) {
+@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {
   md-toolbar {
     min-height: $toolbar-height-mobile-portrait;
   }
@@ -145,8 +144,7 @@ md-toolbar {
 }
 
 // Handle mobile landscape
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and
-  (orientation: landscape) {
+@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {
   md-toolbar {
     min-height: $toolbar-height-mobile-landscape;
   }
diff --git a/src/core/services/layout/layout.attributes.scss b/src/core/services/layout/layout.attributes.scss
index 3b034dc9163..16ec7148c1c 100644
--- a/src/core/services/layout/layout.attributes.scss
+++ b/src/core/services/layout/layout.attributes.scss
@@ -41,7 +41,7 @@ $layout-breakpoint-lg:     1920px !default;
     }
   }
 
-  @for $i from 0 through 19 {
+  @for $i from -20 through 20 {
     $order : '';
     $suffix : '';
 
@@ -421,11 +421,14 @@ $layout-breakpoint-lg:     1920px !default;
 
 @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
   // SMALL SCREEN
-  [hide-sm], [hide] {
-    &:not([show-sm]):not([show]) {
+  [hide-sm], [hide-gt-xs] {
+    &:not([show-gt-xs]):not([show-sm]):not([show]) {
       display: none;
     }
   }
+  [hide-sm]:not([show-sm]):not([show]) {
+    display: none;
+  }
   @include layouts_for_breakpoint(sm);
 }
 
@@ -437,14 +440,14 @@ $layout-breakpoint-lg:     1920px !default;
 
 @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
   // MEDIUM SCREEN
-  [hide], [hide-gt-sm] {
-    &:not([show-gt-sm]):not([show-md]):not([show]) {
+  [hide], [hide-gt-xs], [hide-gt-sm] {
+      &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
+        display: none;
+      }
+    }
+    [hide-md]:not([show-md]):not([show]) {
       display: none;
     }
-  }
-  [hide-md]:not([show-md]):not([show]) {
-    display: none;
-  }
   @include layouts_for_breakpoint(md);
 }
 
@@ -455,8 +458,8 @@ $layout-breakpoint-lg:     1920px !default;
 
 @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
   // LARGE SCREEN
-  [hide], [hide-gt-sm], [hide-gt-md] {
-      &:not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
+  [hide],[hide-gt-xs], [hide-gt-sm], [hide-gt-md] {
+      &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
         display: none;
       }
     }
@@ -469,18 +472,18 @@ $layout-breakpoint-lg:     1920px !default;
 
 @media (min-width: $layout-breakpoint-lg) {
   // BIGGER THAN LARGE SCREEN
-  [hide-gt-sm], [hide-gt-md], [hide-gt-lg], [hide] {
-    &:not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
+  @include layouts_for_breakpoint(gt-lg);
+  @include layouts_for_breakpoint(xl);
+
+  // BIGGER THAN LARGE SCREEN
+  [hide], [hide-gt-xs], [hide-gt-sm], [hide-gt-md], [hide-gt-lg] {
+    &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
       display: none;
     }
   }
-  [hide-xl]:not([show-xl]):not([show]) {
+  [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
     display: none;
   }
-
-
-  // BIGGER THAN LARGE SCREEN
-  @include layouts_for_breakpoint(gt-lg);
-  @include layouts_for_breakpoint(xl);
 }
 
+
diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
index 3c983e83f7f..efa5525d21e 100644
--- a/src/core/services/layout/layout.js
+++ b/src/core/services/layout/layout.js
@@ -265,7 +265,8 @@
    * any attribute value
    */
   function attributeWithoutValue(className) {
-    return ['$interpolate', function(_$interpolate_, _$log_) {
+    return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {
+      $mdUtil = _$mdUtil_;
       $interpolate = _$interpolate_;
       $log = _$log_;
 
@@ -276,8 +277,6 @@
           if (config.enabled) {
             // immediately replace static (non-interpolated) invalid values...
 
-            validateAttributeUsage(className, attr, element, $log);
-
             validateAttributeValue( className,
               getNormalizedAttrValue(className, attr, ""),
               buildUpdateFn(element, className, attr)
@@ -458,17 +457,21 @@
     return found;
   }
 
-  function extractAlignAxis(config) {
+  function extractAlignAxis(attrValue) {
     var axis = {
       main : "start",
       cross: "stretch"
     }, values;
 
-    config = (config || "");
-    if ( config.indexOf("-") == 0 ) config = "none" + config;
+    attrValue = (attrValue || "");
+    if ( attrValue.indexOf("-") == 0 ) {
+      // For missing main-axis values
+      attrValue = "none" + attrValue;
+    }
 
-    values = config.toLowerCase().trim().replace(WHITESPACE, "-").split("-");
-    if ( values[0] === "space" ) {
+    values = attrValue.toLowerCase().trim().replace(WHITESPACE, "-").split("-");
+    if ( values.length && (values[0] === "space") ) {
+      // for main-axis values of "space-around" or "space-between"
       values = [ values[0]+"-"+values[1],values[2] ];
     }
 
diff --git a/src/core/services/layout/layout.scss b/src/core/services/layout/layout.scss
index 853566fe183..cea340ae8e2 100644
--- a/src/core/services/layout/layout.scss
+++ b/src/core/services/layout/layout.scss
@@ -31,7 +31,7 @@
     }
   }
 
-  @for $i from 0 through 19 {
+  @for $i from -20 through 20 {
     $order : '';
     $suffix : '';
 
@@ -47,6 +47,7 @@
     }
   }
 }
+
 @mixin offset-for-name($sizes:null) {
   @if $sizes == null { $sizes : ''; }
 
@@ -443,12 +444,15 @@
 }
 
 @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
-  // SMALL SCREEN
-  .hide-sm, .hide {
-    &:not(.show-sm):not(.show) {
+  .hide, .hide-gt-xs {
+    &:not(.show-gt-xs):not(.show-sm):not(.show) {
       display: none;
     }
   }
+  .hide-sm:not(.show-sm):not(.show) {
+    display: none;
+  }
+
   @include layouts_for_breakpoint(sm);
 }
 
@@ -460,8 +464,8 @@
 
 @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
   // MEDIUM SCREEN
-  .hide, .hide-gt-sm {
-    &:not(.show-gt-sm):not(.show-md):not(.show) {
+  .hide, .hide-gt-xs, .hide-gt-sm {
+    &:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show) {
       display: none;
     }
   }
@@ -478,32 +482,30 @@
 
 @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
   // LARGE SCREEN
-  .hide, .hide-gt-sm, .hide-gt-md {
-      &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
-        display: none;
-      }
-    }
-    .hide-lg:not(.show-lg):not(.show) {
+  .hide,.hide-gt-xs, .hide-gt-sm, .hide-gt-md {
+    &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
       display: none;
     }
+  }
+  .hide-lg:not(.show-lg):not(.show) {
+    display: none;
+  }
 
   @include layouts_for_breakpoint(lg);
 }
 
 @media (min-width: $layout-breakpoint-lg) {
+  @include layouts_for_breakpoint(gt-lg);
+  @include layouts_for_breakpoint(xl);
+
   // BIGGER THAN LARGE SCREEN
-  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
-    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) {
+  .hide, .hide-gt-xs, .hide-gt-sm, .hide-gt-md, .hide-gt-lg {
+    &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) {
       display: none;
     }
   }
-  .hide-xl:not(.show-xl):not(.show) {
+  .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show) {
     display: none;
   }
 
-
-  // BIGGER THAN LARGE SCREEN
-  @include layouts_for_breakpoint(gt-lg);
-  @include layouts_for_breakpoint(xl);
 }
-