[refs #3] Add demo content for block object

_demo/objects/block/block--flush.html

@@ -0,0 +1,17 @@
+---
+layout: demo
+title: "Block Flush"
+permalink: /demo/block--flush/
+handle: block--flush
+---
+
+<div class="o-block  o-block--flush">
+    <img class="o-block__img" src="http://placehold.it/250x150">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quasi, nihil corrupti error, eius est architecto voluptatibus
+        totam necessitatibus explicabo consequatur impedit natus
+        maiores adipisci quidem autem nostrum quam eaque quisquam
+        fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>

_demo/objects/block/block--huge.html

@@ -0,0 +1,17 @@
+---
+layout: demo
+title: "Block Huge"
+permalink: /demo/block--huge/
+handle: block--huge
+---
+
+<div class="o-block  o-block--huge">
+    <img class="o-block__img" src="http://placehold.it/250x150">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quasi, nihil corrupti error, eius est architecto voluptatibus
+        totam necessitatibus explicabo consequatur impedit natus
+        maiores adipisci quidem autem nostrum quam eaque quisquam
+        fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>

_demo/objects/block/block--large.html

@@ -0,0 +1,17 @@
+---
+layout: demo
+title: "Block Large"
+permalink: /demo/block--large/
+handle: block--large
+---
+
+<div class="o-block  o-block--large">
+    <img class="o-block__img" src="http://placehold.it/250x150">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quasi, nihil corrupti error, eius est architecto voluptatibus
+        totam necessitatibus explicabo consequatur impedit natus
+        maiores adipisci quidem autem nostrum quam eaque quisquam
+        fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>

_demo/objects/block/block--left.html

@@ -0,0 +1,17 @@
+---
+layout: demo
+title: "Block Left"
+permalink: /demo/block--left/
+handle: block--left
+---
+
+<div class="o-block  o-block--left">
+    <img class="o-block__img" src="http://placehold.it/250x150">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quasi, nihil corrupti error, eius est architecto voluptatibus
+        totam necessitatibus explicabo consequatur impedit natus
+        maiores adipisci quidem autem nostrum quam eaque quisquam
+        fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>

_demo/objects/block/block--right.html

@@ -0,0 +1,17 @@
+---
+layout: demo
+title: "Block Right"
+permalink: /demo/block--right/
+handle: block--right
+---
+
+<div class="o-block  o-block--right">
+    <img class="o-block__img" src="http://placehold.it/250x150">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quasi, nihil corrupti error, eius est architecto voluptatibus
+        totam necessitatibus explicabo consequatur impedit natus
+        maiores adipisci quidem autem nostrum quam eaque quisquam
+        fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>

_demo/objects/block/block--small.html

@@ -1,5 +1,6 @@
 ---
 layout: demo
+title: "Block Small"
 permalink: /demo/block--small/
 handle: block--small
 ---

_demo/objects/block/block--tiny.html

@@ -0,0 +1,17 @@
+---
+layout: demo
+title: "Block Tiny"
+permalink: /demo/block--tiny/
+handle: block--tiny
+---
+
+<div class="o-block  o-block--tiny">
+    <img class="o-block__img" src="http://placehold.it/250x150">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quasi, nihil corrupti error, eius est architecto voluptatibus
+        totam necessitatibus explicabo consequatur impedit natus
+        maiores adipisci quidem autem nostrum quam eaque quisquam
+        fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>

_demo/objects/block/block.html

@@ -1,12 +1,12 @@
 ---
 layout: demo
+title: "Block"
 permalink: /demo/block/
 handle: block
 ---
 
-<h3 class="u-margin-bottom-small" style="text-align: center;" class="u-margin-bottom-small">.o-block</h3>
 <div class="o-block">
-    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <img class="o-block__img" src="http://placehold.it/250x150">
     <div class="o-block__body">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
     </div>

_docs/05-objects/block.md

@@ -10,4 +10,53 @@ order: 30
 
 When you want to stack an image on top of a block of text, this object is what you need.
 
+## Usage
+
+The basic markup structure is as follows:
+
+    <div class="o-block">
+      <div class="o-block__img">
+        <img src="/path/to/image.png">
+      </div>
+      <div class="o-block__body">
+        Text-like content goes here.
+      </div>
+    </div>
+
+The only valid children of the `.o-block` node are `.o-block__img` and
+`.o-block__body`.
+
+## Default block object
+
+The default variant of the block object includes a spacing equal the amount of `$inuit-global-spacing-unit` between the image and the content.
+
+{% include demo.html variant="block" %}
+
+## Spacing variants
+
+If you want to change the spacing between the image and the content, you can vary this by adding any of the following additional modifier classes:
+
+### `.o-block--tiny`
+{% include demo.html variant="block--tiny" %}
+
+### `.o-block--small`
 {% include demo.html variant="block--small" %}
+
+### `.o-block--large`
+{% include demo.html variant="block--large" %}
+
+### `.o-block--huge`
+{% include demo.html variant="block--huge" %}
+
+### `.o-block--flush`
+{% include demo.html variant="block--flush" %}
+
+## Alignment variants
+
+You can align the image and the content either to the left or to the right by adding the respective additional modifier class:
+
+### `.o-block--right`
+{% include demo.html variant="block--right" %}
+
+### `.o-block--left`
+{% include demo.html variant="block--left" %}

_includes/demo.html

@@ -1,9 +1,7 @@
-<h2>{{ include.variant }}</h2>
+{% assign module = site.demo | where: "handle", include.variant %}
+{% for demo in module %}
+  <iframe class="c-demo  u-margin-bottom" src="/demo/{{ include.variant }}" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>
 
-<iframe class="c-demo  u-margin-bottom" src="/demo/{{ include.variant }}" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>
-
-{% assign patterns = site.demo | where: "handle", include.variant %}
-{% for demo in patterns %}
   <div>
     {% highlight html %}{{ demo.content }}{% endhighlight %}
   </div>