[refs #3] Add demo content and provide class list

inuitcss · Sep 2, 2016 · 76b4ba4 · 76b4ba4
1 parent 967c64b
commit 76b4ba4
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 1 deletion.
diff --git a/_demo/objects/media.html b/_demo/objects/media.html
@@ -3,6 +3,7 @@
 permalink: /demo/media/
 ---
 
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-media</h3>
 <div class="o-media">
     <img class="o-media__img" src="http://placehold.it/250x150" alt="media image">
     <div class="o-media__body">
@@ -14,6 +15,7 @@
 <br>
 
 
+<h3 class="u-margin-bottom-small">.o-media--tiny</h3>
 <div class="o-media  o-media--tiny">
     <img class="o-media__img" src="http://placehold.it/250x150" alt="media image">
     <div class="o-media__body">
@@ -25,6 +27,7 @@
 <br>
 
 
+<h3 class="u-margin-bottom-small">.o-media--small</h3>
 <div class="o-media  o-media--small">
     <img class="o-media__img" src="http://placehold.it/250x150" alt="media image">
     <div class="o-media__body">
@@ -36,6 +39,7 @@
 <br>
 
 
+<h3 class="u-margin-bottom-small">.o-media--large</h3>
 <div class="o-media  o-media--large">
     <img class="o-media__img" src="http://placehold.it/250x150" alt="media image">
     <div class="o-media__body">
@@ -47,6 +51,7 @@
 <br>
 
 
+<h3 class="u-margin-bottom-small">.o-media--huge</h3>
 <div class="o-media  o-media--huge">
     <img class="o-media__img" src="http://placehold.it/250x150" alt="media image">
     <div class="o-media__body">
@@ -58,6 +63,7 @@
 <br>
 
 
+<h3 class="u-margin-bottom-small">.o-media--flush</h3>
 <div class="o-media  o-media--flush">
     <img class="o-media__img" src="http://placehold.it/250x150" alt="media image">
     <div class="o-media__body">
@@ -69,6 +75,7 @@
 <br>
 
 
+<h3 class="u-margin-bottom-small">.o-media--reverse</h3>
 <div class="o-media  o-media--reverse">
     <img class="o-media__img" src="http://placehold.it/250x150" alt="media image">
     <div class="o-media__body">

diff --git a/_docs/objects/media.md b/_docs/objects/media.md
@@ -7,10 +7,39 @@ has-sub-content: true
 sub-content: docs
 filename: "_objects.media.scss"
 demo: "media"
+classes: [
+    "o-media",
+    "o-media--tiny",
+    "o-media--small",
+    "o-media--large",
+    "o-media--huge",
+    "o-media--flush",
+    "o-media--reverse"
+]
 ---
 
 {% include file-info.html %}
 
-The media object
+{% include class-list.html %}
+
+The Media object is inuitcss’ implementation of [Nicole
+Sullivan](https://twitter.com/stubbornella)’s <cite>media object</cite>—the
+poster child of OOCSS. To find out where it all started, read [Nicole’s blog
+post](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/).
+
+
+## Usage
+
+Basic usage of the Media object uses the required classes:
+
+    <div class="o-media">
+        <img class="o-media__img" src="/path/to/image.png" alt="" />
+        <div class="o-media__body">
+            <p>Text-like content goes here.</p>
+        </div>
+    </div>
+
+The only valid children of the `.o-media` node are `.o-media__img` and
+`.o-media__body`.
 
 {% include demo-iframe.html %}
diff --git a/_includes/class-list.html b/_includes/class-list.html
@@ -0,0 +1,6 @@
+<p class="u-margin-bottom-none">Available classes:</p>
+<ul>
+    {% for class in page.classes %}
+        <li><code>.{{ class }}</code></li>
+    {% endfor %}
+</ul>
diff --git a/_includes/demo-iframe.html b/_includes/demo-iframe.html
@@ -1 +1,2 @@
+<h2>Demo</h2>
 <iframe class="c-demo  u-margin-bottom" src="/demo/{{ page.demo }}/index.html" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>