Merge pull request #172 from PalmerAL/gh-pages

add support for grid lists

Author: nt1m

css/material.css

@@ -825,7 +825,7 @@ code {
 	padding: 0;
 	list-style: none;
 }
-.list > li {
+.list > li, .grid-list > .tile > .tile-footer {
 	margin: 0;
 	padding: 0.2em 0.4em;
 	display: -webkit-flex;
@@ -853,7 +853,7 @@ code {
 	transform: translate(-50%, -50%);
 	font-size: 1.5em;
 }
-.list > li .item-text {
+.list > li .item-text, .grid-list > .tile > .tile-footer > .item-text {
 	font-size: 1em;
 	display: inline-block;
 	vertical-align: top;
@@ -867,7 +867,7 @@ code {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.list > li .secondary-text {
+.list > li .secondary-text, .grid-list >.tile > .tile-footer .secondary-text {
 	font-size: 0.875em;
 	display: block;
 	white-space: nowrap;
@@ -886,10 +886,37 @@ code {
 .list > li .item-action:first-child {
 	margin-left: 0;
 }
-.list > li i::before {
+.list > li i::before, .grid-list > .tile > .tile-footer i::before {
 	line-height: inherit !important;
 }
 
+/* specific to grid lists */
+
+.grid-list > .tile {
+	width: 11em;
+	margin: 0.25em;
+	display: inline-block;
+}
+
+.grid-list > .tile > .tile-image {
+	height: 11em;
+	width: 100%;
+	display: inline-block;
+}
+
+.grid-list > .tile > .tile-footer {
+	padding: 0.5em;
+}
+
+.grid-list > .tile > .tile-footer > .item-text {
+	padding: 0.5em;
+}
+
+.grid-list > .tile > .tile-footer .item-action {
+	font-size: 1.5em;
+	padding: 0.5em;
+}
+
 /* Dividers */
 .divider {
 	margin: 0;

index.html

@@ -1890,6 +1890,85 @@ <h2>Example</h2>
 	&lt;/li&gt;
 &lt;/ul&gt;
 	</code>
+	
+	<div class="divider"></div>
+	<h1>Grid Lists</h1>
+	
+	<div class="grid-list">
+		<div class="tile">
+			<img class="tile-image" src="demo-files/avatar.jpg"/>
+			<div class="tile-footer">
+				<span class="item-text">
+					Larry Page
+					<span class="secondary-text">
+						I love your Material design framework !
+					</span>
+				</span>
+				<i class="icon-star item-action"></i>
+			</div>
+		</div>
+		<div class="tile">
+			<img class="tile-image" src="demo-files/avatar.jpg"/>
+			<div class="tile-footer">
+				<span class="item-text">
+					Larry Page
+					<span class="secondary-text">
+						I love your Material design framework !
+					</span>
+				</span>
+				<i class="icon-star item-action"></i>
+			</div>
+		</div>
+		<div class="tile">
+			<img class="tile-image" src="demo-files/avatar.jpg"/>
+			<div class="tile-footer">
+				<span class="item-text">
+					Larry Page
+					<span class="secondary-text">
+						I love your Material design framework !
+					</span>
+				</span>
+				<i class="icon-star item-action"></i>
+			</div>
+		</div>
+		<div class="tile">
+			<img class="tile-image" src="demo-files/avatar.jpg"/>
+			<div class="tile-footer">
+				<span class="item-text">
+					Larry Page
+					<span class="secondary-text">
+						I love your Material design framework !
+					</span>
+				</span>
+				<i class="icon-star item-action"></i>
+			</div>
+		</div>
+	</div>
+
+	<div class="divider"></div>
+	<h2>Example</h2>
+	<code class="prettyprint">
+	&lt;div class=&quot;grid-list&quot;&gt;
+		&lt;div class=&quot;tile&quot;&gt;
+			&lt;img class=&quot;tile-image&quot; src=&quot;demo-files/avatar.jpg&quot;/&gt;
+			&lt;div class=&quot;tile-footer&quot;&gt;
+				&lt;span class=&quot;item-text&quot;&gt;
+					Larry Page
+					&lt;span class=&quot;secondary-text&quot;&gt;
+						I love your Material design framework !
+					&lt;/span&gt;
+				&lt;/span&gt;
+				&lt;i class=&quot;icon-star item-action&quot;&gt;&lt;/i&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+	</code>
+	<p>
+		If the tile image does not fit the size of the tile background, you will want to use background images instead to avoid stretching the image.
+	</p>
+	<code class="prettyprint">
+&lt;div class=&quot;tile-image&quot; style=&quot;background-image:url(demo-files/avatar.jpg)&quot;&gt;&lt;/div&gt; 
+	</code>
 </div>
 
 <div class="navigation-section" id="menus">