From 08d07f0a982049447af9587eb4d69e2b17f6eac6 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 7 Feb 2017 15:58:59 +0200 Subject: [PATCH] Documented media object, resolves #22 --- docs/grid.html | 63 ++++++++++++++++++++++++++++++++++++++++------- docs/v2/DEVLOG.md | 1 + 2 files changed, 55 insertions(+), 9 deletions(-) diff --git a/docs/grid.html b/docs/grid.html index 4557c77..9288454 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -521,24 +521,69 @@

Notes

- 
...
-

Do: Responsive - screen-specific...

+ 
<div class="row">
+    <div class="col-sm-1 col-md-2 col-lg-3">
+      <img src="...">
+    </div>
+    <div class="col-sm-11 col-md-10 col-lg-9">
+      <h2>Media object heading</h2>
+      <p>Media object content...</p>
+    </div>
+  </div>
+

Do: You can make your media object responsive, by adding screen-specific layout classes to its columns.

- 
...
-

Do: Nesting and the use of rows...

+ 
<div class="row">
+    <div class="col-sm-1 col-sm-last">
+      <img src="...">
+    </div>
+    <div class="col-sm">
+      <h2>Media object heading</h2>
+      <p>Media object content...</p>
+    </div>
+  </div>
+

Do: You can align the media object's content to the left of the image (instead of the other way round), using the .col-SCR_SZ-normal class, replacing SCR_SZ with the desired screen size.

- 
...
-

Do: Align right using last...

+ 
<div class="row">
+  <div class="col-sm-2">
+    <img src="...">
+  </div>
+  <div class="col-sm">
+    <div class="row">
+      <div class="col-sm">
+        <h2>Parent media object</h2>
+        <p>Parent media object content...</p>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-2">
+        <img src="...">
+      </div>
+      <div class="col-sm">
+        <h2>Child media object</h2>
+        <p>Child media object content...</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+

Do: Media objects can be easily nested. You can use .row elements in the content column of the media object to make everything align perfectly.

- 
...
-

Don't: Use of image or content as its own column...

+ 
<div class="row">
+    <img src="..." class="col-sm-1">
+    <div class="col-sm">
+      <h2>Media object heading</h2>
+      <p>Media object content...</p>
+    </div>
+  </div>
+

Don't: Do not apply a column class directly to the media element (e.g.<img>) or the content of the media object, as this can cause problems with certain elements. Wrap your media objects columns in <div> elements and apply the grid classes to them, instead.

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 5c24000..3d6b92e 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -834,3 +834,4 @@ - Minor updates to `quick_reference.html` to get size a bit lower. - Updated existing documentation for `grid` module. - Setup the `media object` section of `grid.html`, just the basic demo for now. +- Documented `media object`. Resolves #22.