Demos

Author: cornae

_layouts/demo.html

@@ -16,13 +16,33 @@
 			   class="ueber-back-button pat-inject pat-switch">{{ page.collection | capitalize }}</a>
 		{% endif %}
 	</div>
-	<article class="pat-rich long-read">
-		<h1>{{ page.title }}</h1>
-		{% unless page.summary == nil %}
-			<p class="summary">
-				{{ page.summary }}
-			</p>
-		{% endunless %}
-		{{ content }}
+	<article class="long-read">
+
+		<div class="pat-rich">
+			<h1>
+				{{ page.title }}
+			</h1>
+
+			{% unless page.summary == nil %}
+				<p class="summary">
+					{{ page.summary }}
+				</p>
+			{% endunless %}
+		</div>
+
+		<div id="demo" 
+		     class="pattern-demo">
+		    <a href="/pat-demos/src/pat/{{ page.id | remove: '/'}}/index.html" 
+		       class="pat-inject" 
+		       data-pat-inject="target: #demo; trigger: autoload">Load demo</a>
+		</div>
+
+		<div class="pat-rich">
+		    <a href="/pat-demos/src/pat/{{page.id }}/documentation.md#documentation"
+		       class="pat-inject" 
+		       data-pat-inject="data-type: markdown; source: ##Documentation; target: self::element; trigger: autoload">Documentation</a>
+		</div>
+
 	</article>
-</div>
+</div>
+

_sass/components/_pattern-tile.scss

@@ -7,6 +7,14 @@
 	padding: 0 20px;
 	box-sizing: border-box;
 
+	@include screen-size(medium) {
+		width: 25%;
+	}
+
+	@include screen-size(small) {
+		width: 33.333332%;
+	}
+
 	&.cat-behavioural img {
 		background-color: $cat-behavioural;
 	}