Merge branch 'master' into grid-templates

css/material.css

@@ -7083,6 +7083,8 @@ dt {
     width: calc(100% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell {
       width: 100%; }
+  .mdl-cell--hide-phone {
+    display: none; }
   .mdl-cell--1-col {
     width: calc(25% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell--1-col {
@@ -7188,6 +7190,8 @@ dt {
     width: calc(50% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell {
       width: 50%; }
+  .mdl-cell--hide-tablet {
+    display: none; }
   .mdl-cell--1-col {
     width: calc(12.5% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell--1-col {
@@ -7293,6 +7297,8 @@ dt {
     width: calc(33.3333333333% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell {
       width: 33.3333333333%; }
+  .mdl-cell--hide-desktop {
+    display: none; }
   .mdl-cell--1-col {
     width: calc(8.3333333333% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell--1-col {

css/material.css.template

@@ -7099,6 +7099,8 @@ dt {
     width: calc(100% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell {
       width: 100%; }
+  .mdl-cell--hide-phone {
+    display: none; }
   .mdl-cell--1-col {
     width: calc(25% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell--1-col {
@@ -7204,6 +7206,8 @@ dt {
     width: calc(50% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell {
       width: 50%; }
+  .mdl-cell--hide-tablet {
+    display: none; }
   .mdl-cell--1-col {
     width: calc(12.5% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell--1-col {
@@ -7309,6 +7313,8 @@ dt {
     width: calc(33.3333333333% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell {
       width: 33.3333333333%; }
+  .mdl-cell--hide-desktop {
+    display: none; }
   .mdl-cell--1-col {
     width: calc(8.3333333333% - 16px); }
     .mdl-grid--no-spacing > .mdl-cell--1-col {

src/grid/README.md

@@ -48,6 +48,15 @@ A cell inside the grid, with a given column size. The default is 4.
 - `mdl-cell--N-col-phone` (where N is a number between 1 and 4):
   Set the column size for the cell to N in phone mode only.
 
+- `mdl-cell--hide-desktop`:
+  Hides the cell when in desktop mode.
+
+- `mdl-cell--hide-tablet`:
+  Hides the cell when in tablet mode.
+
+- `mdl-cell--hide-phone`:
+  Hides the cell when in phone mode.
+
 - `mdl-cell--stretch`:
   Makes the cell stretch vertically to fill the parent. This is the default.
 

src/grid/_grid.scss

@@ -98,6 +98,10 @@ $grid-cell-default-columns: $grid-phone-columns;
         $grid-phone-gutter);
   }
 
+  .mdl-cell--hide-phone {
+    display: none;
+  }
+
   // Define partial sizes for columnNumber < totalColumns.
   @for $i from 1 through ($grid-phone-columns - 1) {
     .mdl-cell--#{$i}-col {
@@ -135,6 +139,10 @@ $grid-cell-default-columns: $grid-phone-columns;
         $grid-tablet-gutter);
   }
 
+  .mdl-cell--hide-tablet {
+    display: none;
+  }
+
   // Define partial sizes for columnNumber < totalColumns.
   @for $i from 1 through ($grid-tablet-columns - 1) {
     .mdl-cell--#{$i}-col {
@@ -172,6 +180,10 @@ $grid-cell-default-columns: $grid-phone-columns;
         $grid-desktop-gutter);
   }
 
+  .mdl-cell--hide-desktop {
+    display: none;
+  }
+
   // Define partial sizes for all numbers of columns.
   @for $i from 1 through $grid-desktop-columns {
     .mdl-cell--#{$i}-col {