[css-grid] Editorial tweaks to overview

Author: fantasai

css-grid/Overview.bs

@@ -135,6 +135,8 @@ Introduction</h2>
 <h2 id='overview'>
 Overview</h2>
 
+	<em>This section is not normative.</em>
+
 	Grid Layout controls the layout of its content
 	through the use of a <a>grid</a>:
 	an intersecting set of horizontal and vertical lines
@@ -301,6 +303,7 @@ Sizing the Grid</h3>
 	Finally each <a>grid item</a> is sized and aligned within its assigned <a>grid area</a>,
 	as specified by its own sizing and alignment properties.
 
+
 <h3 id='background'>
 Background and Motivation</h3>
 
@@ -323,11 +326,15 @@ Background and Motivation</h3>
 	It provides a mechanism for authors to divide available space for layout into columns and rows
 	using a set of predictable sizing behaviors.
 	Authors can then precisely position and size the building block elements of their application
-	into <a>grid areas</a> defined by the intersection of these columns and rows.
-	Figure 1 illustrates a basic layout which can be achieved with grid layout.
+	into the <a>grid areas</a> defined by the intersections of these columns and rows.
+
+<h3 id="overview-examples">
+Sample Use Cases</h3>
 
-<h3 id='adapting-to-available-space'>
-Adapting Layouts to Available Space</h3>
+	<em>This section is not normative.</em>
+
+<h4 id='adapting-to-available-space'>
+Adapting Layouts to Available Space</h4>
 
 	<figure class="sidefigure">
 			<img alt="Image: Five grid items arranged according to content size and available space." src="images/game-smaller.png" />
@@ -341,8 +348,8 @@ Adapting Layouts to Available Space</h3>
 		<figcaption>Growth in the grid due to an increase in available space.</figcaption>
 	</figure>
 
-	Grid layout can be used to intelligently reflow elements within a webpage.
-	Figure 2 and 3 represents a game with five major components in the layout:
+	Grid layout can be used to intelligently resize elements within a webpage.
+	The figures above represent a game with five major components in the layout:
 	the game title, stats area, game board, score area, and control area.
 	The author's intent is to divide the space for the game such that:
 
@@ -356,7 +363,7 @@ Adapting Layouts to Available Space</h3>
 		<li>
 			The bottom of the game board and bottom of the stats area align when the game has reached its minimum height.
 			In all other cases the game board will stretch to take advantage of all the space available to it.
-                <li>
+		<li>
 			The controls are centered under the game board.
 		<li>
 			The top of the score area is aligned to the top of the controls area.
@@ -366,15 +373,15 @@ Adapting Layouts to Available Space</h3>
 			The score area is aligned to the controls beneath the stats are.
 	</ul>
 
-	The following example shows how an author might achieve all the sizing, placement, and alignment rules declaratively.
+	The following grid layout example shows how an author might achieve
+	all the sizing, placement, and alignment rules declaratively.
 
 
 	<div class="example">
 		<pre class="lang-css">
 		/**
-		 * This example illustrates one that an author may use to define the position and space for each <a>grid item</a>
-		 * using the 'grid-template-rows' and 'grid-template-columns' properties on the <a>grid container</a>,
-		 * and the 'grid-row' and 'grid-column' properties on each <a>grid item</a>.
+		 * Define the space for each <a>grid item</a> by declaring the grid
+		 * on the <a>grid container</a>.
 		 */
 		#grid {
 			/**
@@ -401,10 +408,9 @@ Adapting Layouts to Available Space</h3>
 				/* 5 */ auto;
 		}
 
-		/* Each part of the game is positioned between grid lines. It's achieved by
-		 * referencing the starting grid line and then specifying, if more
-		 * than one, the number of rows or columns spanned to determine
-		 * the ending grid line, which establishes bounds for the area. */
+		/* Specify the position of each <a>grid item</a> using coordinates on
+		 * the 'grid-row' and 'grid-column' properties of each <a>grid item</a>.
+		 */
 		#title    { grid-column: 1; grid-row: 1; }
 		#score    { grid-column: 1; grid-row: 3; }
 		#stats    { grid-column: 1; grid-row: 2; align-self: start; }
@@ -427,8 +433,8 @@ Adapting Layouts to Available Space</h3>
 	and to position and size <a>grid items</a>,
 	each optimized for different scenarios.
 
-<h3 id='source-independence'>
-Source-Order Independence</h3>
+<h4 id='source-independence'>
+Source-Order Independence</h4>
 
 	<figure class="sidefigure">
 		<img alt="Image: An arrangement suitable for portrait orientation." src="images/game-portrait.png" />
@@ -523,8 +529,8 @@ Source-Order Independence</h3>
 	as a substitute for correct source ordering,
 	as that can ruin the accessibility of the document.
 
-<h3 id='grid-layering'>
-Grid Layering of Elements</h3>
+<h4 id='grid-layering'>
+Grid Layering of Elements</h4>
 
 	<figure class="sidefigure">
 		<img alt="Image: A control composed of layered HTML elements." src="images/control-layering-and-alignment.png" />