Improve overview example code with comments and links. Make HTML more compact by ellipsizing parts of it.

Author: fantasai

css3-flexbox/Overview.html

@@ -206,11 +206,11 @@
 
    <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 July 2012</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 25 July 2012</h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120724/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120724/</a>-->
+     <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120725/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120725/</a>-->
 
 
     <dd><a
@@ -621,62 +621,52 @@ <h3 id=overview><span class=secno>1.1. </span> Overview</h3>
      box, regardless of the height of the description.
    </ul>
 
-   <div style="display:table;">
-    <div style="display:table-cell;">
-     <pre>
+   <pre>
 &lt;style>
 #deals {
-	display: flex;
-	flex-flow: row wrap;
+	display: flex;        /* Flex layout so items <a
+    href="#align-self"
+    title="Flex items stretch by default.">have equal height</a>  */
+	flex-flow: row wrap;  /* <a
+    href="http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property">Allow items to wrap into multiple lines</a> */
 }
 .sale-item { 
-	display: flex; 
-	flex-flow: column;
-	padding: 1em;
+	display: flex;        /* Lay out each item using flex layout */
+	flex-flow: column;    /* <a
+    href="#flex-flow-property">Lay out item's contents vertically</a>  */
 }
 .sale-item > img { 
-	order: -1;
-	align-self: center;
+	order: -1;            /* <a
+    href="#order-property">Shift image before other content (in visual order)</a> */
+	align-self: center;   /* <a
+    href="#align-self">Center the image cross-wise (horizontally)</a>         */
 }
 .sale-item > button {
-	margin: auto 5% 0;
+	margin-top: auto;     /* <a
+    href="#auto-margins">Auto top margin pushes button to bottom</a> */
 }
 &lt;/style></pre>
-    </div>
 
-    <div style="display:table-cell;">
-     <pre>
+   <pre>
 &lt;section id='deals'>
   &lt;section class='sale-item'>
     &lt;h1>Computer Starter Kit&lt;/h1>
-    &lt;p>
-      This is the best computer money can buy,
-      if you don't have much money.
+    &lt;p>This is the best computer money can buy, if you don't have much money.
     &lt;ul>
       &lt;li>Computer
       &lt;li>Monitor
       &lt;li>Keyboard
       &lt;li>Mouse
     &lt;/ul>
-    &lt;img src="images/computer.jpg"
-      alt='You get: a white computer with matching peripherals.'>
+    &lt;img src='images/computer.jpg'
+         alt='You get: a white computer with matching peripherals.'>
     &lt;button>BUY NOW&lt;/button>
   &lt;/section>
-
   &lt;section class='sale-item'>
-    &lt;h1>Printer&lt;/h1>
-    &lt;p>
-      Only capable of printing
-      ASCII art.
-    &lt;ul>
-      &lt;li>Paper and ink not included.
-    &lt;/ul>
-    &lt;img src="images/printer.jpg" alt='You get: beautiful ASCII art.'>
-    &lt;button>BUY NOW&lt;/button>
+    …
   &lt;/section>
+  …
 &lt;/section></pre>
-    </div>
-   </div>
    <figure>
    <div id=overview-example>
     <div class=col></div>

css3-flexbox/Overview.src.html

@@ -350,57 +350,44 @@ <h3 id="overview">
 				regardless of the height of the description.
 		</ul>
 
-		<div style="display:table;">
-			<div style="display:table-cell;"><pre>
+		<pre>
 &lt;style>
 #deals {
-	display: flex;
-	flex-flow: row wrap;
+	display: flex;        /* Flex layout so items <a href="#align-self" title="Flex items stretch by default.">have equal height</a>  */
+	flex-flow: row wrap;  /* <a href="http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property">Allow items to wrap into multiple lines</a> */
 }
 .sale-item { 
-	display: flex; 
-	flex-flow: column;
-	padding: 1em;
+	display: flex;        /* Lay out each item using flex layout */
+	flex-flow: column;    /* <a href="#flex-flow-property">Lay out item's contents vertically</a>  */
 }
 .sale-item > img { 
-	order: -1;
-	align-self: center;
+	order: -1;            /* <a href="#order-property">Shift image before other content (in visual order)</a> */
+	align-self: center;   /* <a href="#align-self">Center the image cross-wise (horizontally)</a>         */
 }
 .sale-item > button {
-	margin: auto 5% 0;
+	margin-top: auto;     /* <a href="#auto-margins">Auto top margin pushes button to bottom</a> */
 }
-&lt;/style></pre></div>
-			<div style="display:table-cell;"><pre>
+&lt;/style></pre>
+<pre>
 &lt;section id='deals'>
   &lt;section class='sale-item'>
     &lt;h1>Computer Starter Kit&lt;/h1>
-    &lt;p>
-      This is the best computer money can buy,
-      if you don't have much money.
+    &lt;p>This is the best computer money can buy, if you don't have much money.
     &lt;ul>
       &lt;li>Computer
       &lt;li>Monitor
       &lt;li>Keyboard
       &lt;li>Mouse
     &lt;/ul>
-    &lt;img src="images/computer.jpg"
-      alt='You get: a white computer with matching peripherals.'>
+    &lt;img src='images/computer.jpg'
+         alt='You get: a white computer with matching peripherals.'>
     &lt;button>BUY NOW&lt;/button>
   &lt;/section>
-
   &lt;section class='sale-item'>
-    &lt;h1>Printer&lt;/h1>
-    &lt;p>
-      Only capable of printing
-      ASCII art.
-    &lt;ul>
-      &lt;li>Paper and ink not included.
-    &lt;/ul>
-    &lt;img src="images/printer.jpg" alt='You get: beautiful ASCII art.'>
-    &lt;button>BUY NOW&lt;/button>
+    &hellip;
   &lt;/section>
-&lt;/section></pre></div>
-		</div>
+  &hellip;
+&lt;/section></pre>
 		<figure>
 			<div id="overview-example">
 				<div class="col"></div>