73c5d1a5856c34c7d01f126fdc656d5f35084852 Merge parents b186692 47fe642 kate Mon Jan 23 12:08:13 2017 -0800 Merge branch 'staticPg-inc-rel' into staticPages diff --cc src/hg/htdocs/template.html index 807fd17,9f2ce31..e743481 --- src/hg/htdocs/template.html +++ src/hg/htdocs/template.html @@@ -1,110 -1,75 +1,116 @@@ <!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 2 spaces 5. Special characters: Don't use entity references (set editor to UTF-8), except < & +6. Limit lines to a maximum of 100 characters --> <!-- Page header --> - <!--#set var="TITLE" value="GB Static Page Template" --> - <!--#include virtual="/gbPageStart.html"--> + <!--#set var="title" value="GB Static Page Template" --> + + <!-- Boilerplate to support mirror sites with non-standard GB docs install --> + <!--#if expr="$GB_DOCUMENT_ROOT" --> + <!--#include virtual="/gbDocs/inc/gbPageStart.html" --> + <!--#else --> + <!--#include virtual="/inc/gbPageStart.html" --> + <!--#endif --> <!-- Page content --> -<h1>Sample Genome Browser Static Page</h1> +<h1>Sample Genome Browser Static Page (h1)</h1> <p> -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. +This is a standard paragraph ('p' tag) of explanatory text. +The next part of the page demonstrates how to create a multi-column layout +using the grid layout feature of bootstrap.css, a widely used stylesheet which is now +included in the browser static pages. </p> <!-- Sections --> <!-- In this example, two of same size, so use 6 columns of 12 total in grid --> <div class="row"> <!-- Left column --> <div class="col-md-6"> - <h2>Page section</h2> + <h2>Page section (h2)</h2> <p> - 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. + This is one of two subsections, formatted as equal-sized columns. + The bootstrap 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. + </p> + <p> + NOTE: The two columns are displayed only on wide screens. On small screens, the sections will be + stacked vertically (a feature of bootstrap responsive layout). </p> -<!-- Preformatted code example --> + + <h3>Subsection (h3)</h3> <p> - Here is some code: + This is the next level, a subsection. Use an 'h3' tag for this. To structure content + below this level use a list, table, or titled paragraph: </p> -<pre><code>sudo -i -bash browserSetup.sh install</code></pre> + + <h6>Titled paragraph</h6> + <p> + Use the 'h6' tag at any level in the section hierarchy to precede a paragraph with a bolded title. + </p> + + <h3>Lists</h3> +<p> +The description of lists below is formatted as an HTML definition list. Use this format when defining terms or phrases. (You will not see this much in our current pages -- instead, this type of text was usually styled ad-hoc using 'strong' and 'br' tags). +</p> +<dl> +<dt>Definition list</dt> +<dd> +Use the 'dl' tag to enclose the full list, then 'dt' for each item term, and 'dd' for each item definition. +</dd> +<dt>Bulleted list</dt> +Use the 'ul' (unordered list tag) to enclose the full list, then 'li' for each list item. +<dd> +<dd> +<dt>Numbered list</dt> +<dd> +Use the 'ol' (ordered list) tag to enclose the full list, then 'li' for each list item. +</dd> + +</dl> + </div> + +<!-- Right column --> + <div class="col-md-6"> + <h2>Another section</h2> + +<!-- Subsections --> + <h3>List Examples</h3> + <p> + Here is a bulleted list ('ul' and 'li' elements). To suppress the 'bullet' add the + class 'gbsNoBullet' to the 'ul' tag. + </p> +<!-- Bulleted list example --> + <ul> + <li>red</li> + <li>white</li> + <li>blue</li> + </ul> +<p> <!-- Numbered list example --> <p> Here is a numbered list ('ol' and 'li' elements): </p> <ol> <li> <strong>chrom</strong> - The name of the chromosome (e.g. chr3, chrY, chr2_random) or scaffold (e.g. scaffold10671).</li> <li> <strong>chromStart</strong> - The starting position of the feature in the chromosome or scaffold. The first base in a chromosome is numbered 0.</li> <li> <strong>chromEnd</strong> - The ending position of the feature in the chromosome or scaffold. The <em>chromEnd</em> base is not included in the display of the feature. @@@ -124,49 -103,40 +130,54 @@@ <th>Total</th> </tr> <tr> <td>Chromosomes</td> <td>261</td> </tr> <tr> <td>Haplotypes</td> <td>261</td> </tr> <tr> <td>Unlocalized contigs</td> <td>1270</td> </tr> </table> - </div> -</div> + +<!-- Preformatted code example --> + <h3>Code</h3> + <p> + Here is some code in a preformatted section ('pre' and 'code' tags): + </p> + +<pre><code>sudo -i +bash browserSetup.sh install</code></pre> + +<p> +And here is some text with a <code>bit of code</code> embedded (just the 'code' tag).. +</p> + + </div> <!-- end column --> +</div> <!-- end row --> <h2>Section with a picture and caption</h2> <p> Use the 'img' tag to include the picture file, which is typically in .jpg or .png format. -Images should normally have their 'width' and 'height' attributes set in the 'img' tag. +Images should normally have their 'width' and 'height' attributes set in the 'img' lement. To right-align the image add the 'gbsAlignRight' class. The caption is a 'p' element, which is assigned the 'gbsCaption' class. </p> <div class="row"> <div class="col-md-12"> <img src= "images/gbstaff16.jpg" width=499 height=299 alt="Genome Browser staff"> <p class="gbsCaption"> Browser staff in native habitat. </p> </div> </div> - <!--#include virtual="/gbPageEnd.html"--> + <!--#if expr="$GB_DOCUMENT_ROOT" --> + <!--#include virtual="/gbDocs/inc/gbPageEnd.html" --> + <!--#else --> + <!--#include virtual="/inc/gbPageStart.html" --> + <!--#endif --> +