1c00cc9433bb8c5a6e5d86b5508e61debf3c1d9a
kate
  Wed Dec 14 09:53:02 2016 -0800
Explanatory text for grid layout. refs #18504

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index 94c289a..b61bd33 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -1,91 +1,58 @@
 <!DOCTYPE html>
+
 <!-- template.html: Example HTML for a Genome Browser static page -->
 
 <!-- Style recommendations
 1. Capitalization: use only lowercase for HTML element names, attributes and values
 2. Quotes: Use double quotes for attribute values
 3. Whitespace: Use a new line for every block list or table element
 4. Indentation: Indent every child element 4 (or 2 spaces)
 5. Special characters: Don't use entity references (set editor to UTF-8),  except < &
 -->
 
-<html>
-    <head>
-        <meta charset="UTF-8">
-        <title>GB Static page template</title>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:700|Lato:700,700italic,300,400,400italic">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-        <link rel="stylesheet" href="../style/bootstrap.min.css">
-        <link rel="stylesheet" href="../staticStyle/gbStatic.css">
-        <link rel="stylesheet" href="../style/gb.css">
-    </head>
-
-    <body>
-        <!-- Blue menu bar / hotlinks -->
-        <div>
-            <!--#include virtual="cgi-bin/hgMenubar"-->
-            <!-- Override nice-menu.css styling -->
-            <link rel="stylesheet" href="../style/gbAfterMenu.css">
-            <!-- Override default home link icon -->
-            <link rel="stylesheet" href="../style/gbLogoInMenu.css">
-        </div>
-
-        <!-- Grid layout from bootstrap.css -->
-        <div class="container-fluid">
-            <div class="gbPage">
-
-<!-- Customize page content below here -->
+<!--#include virtual="gbPageStart.html"-->
 
 <!-- Page header -->
 <h1>Sample Genome Browser Static Page</h1>
 
 <!-- Page content -->
 <p>
-This is a paragraph of explanatory text.  No particular formatting. 
-(The remainder of this paragraph is just filler).
+This is a standard paragraph ('p' element) of explanatory text.
+<em>The remainder of this text is just filler</em>.
 
 Follow these citation guidelines when using applications from the Genome Browser
 tool suite or data from the UCSC Genome Browser database in a research work that will
 be published in a journal or on the Internet.
 In addition to the relevant paper, please include a reference to the Genome Browser
 website in your manuscript: <a href="index.html" target=_blank>http://genome.ucsc.edu/</a>.
 Be sure to mention the release date of the genome assembly used in your work to faciliate
 the examination of your data by reviewers and the readers.
 Please do <strong>not</strong> include references to our development servers
 (such as genome-test.cse.ucsc.edu) in published links or URLs.
 </p>
 
 <!-- Subsections -->
 <!-- In this example, two of same size, so use 6 columns of 12 total in grid -->
 
 <div class="row">
     <div class="col-md-6">
         <h2>Page section</h2>
         <p>
-This is one of two subsections, formatted in two equal-sized columns in the grid layout.
-(The remainder of this section is just filler).
-<!--#include virtual="indexStory.html"-->
+This is one of two subsections, formatted as equal-sized columns via the grid layout feature of
+bootstrap.css, a commonly used style sheet.
+The grid contains 12 columns; column widths are specified using classes 'col-md-1' through 'col-md-12'.
+This example contains two divs, each assigned class 'col-md-6', within a 'row' div.
+<em>The remainder of this text is just filler</em>.
+On June 22, 2000, UCSC and the other members of the International Human Genome Project consortium
+completed the first working draft of the human genome assembly, forever ensuring
+free public access to the genome and the information it contains. 
         </p>
     </div>
     <div class="col-md-6">
         <h2>Another section</h2>
         <p>
         </p>
     </div>
 </div>
 
-<!-- Customize page content above here -->
-
-            </div>
-        </div>
-
-        <!-- Footer -->
-        <!--#include virtual="inc/gbFooter.html"-->
-    </body>
-</html>
-
-<!-- Bootstrap features
-
-* data-togggle="collapse" (modal, dropdown, tab)
-	data-parent="#"
--->
+<!--#include virtual="gbPageEnd.html"-->