Skip Navigation Bar

National Library of Medicine - Main Web Site - Coding Instructions

About This Page

  • This page provides instructions for developers who are creating pages that will be incorporated into the the templated pages within the NLM Main site.
  • These instructions are divided into 5 Main sections: DOC Type, Meta Data, Style Sheets, Skip Navigation, and HTML <body> tags.
    • In addition, most sections are composed of these categories: Item, Required?, Location, Why Needed, Example Page(s), Responsive behavior based on page width, and Code (In some cases, surrounding code is provided a reference.)
  • A Responsive Breakpoint Summary at the end of this page illustrates how viewports impact page elements in the context of the entire page

  1. Document Type Declaration
  2. Meta Tags
  3. Style Sheets
  4. Scripts
  5. Skip Navigation
  6. HTML  <body> tag element
    1. Wrapper and Container elements
    2. The page-header element
    3. "main-body" body tag element
      1. Divisional Branding Bar
        1. Divisional Branding Bar Basic Option
        2. Divisional Branding Bar without Navigation Option
        3. Divisional Branding Bar with Navigation Option
        4. Divisional Branding Bar with Navigation and Header Image Option
      2. Breadcrumb Bar
      3. Skip Navigation Target
      4. Body content
      5. Footer

Document Type Declaration

  • Item: <!DOCTYPE>
    • Required?: Yes
    • Location?: Very first thing in your HTML document, before the <html> tag
    • Why needed?: Ensures all pages use the HTML5 Document Type.
    • Code:
       <!DOCTYPE>

Meta Tags

  • Item: meta-http-equiv tags
    • Required?: Yes
    • Location?: After opening <html> tag
    • Why needed?:  Ensures Proper Encoding
    • Code:
      • Displays the webpage in EdgeHTML mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11.
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      • Specifies the character encoding for the document.
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
      • Displays the webpage in EdgeHTML mode, which is the highest standards mode supported by Internet Explorer, from Internet Explorer 6 through IE11 and Chrome Frame.
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  • Item: meta-name viewport tag
    • Required?: Yes
    • Location?: Before the ending </head> tag
    • Why needed?:  Ensures that the browser will scale to the specified viewport
    • Code:
      <meta name="viewport" content="initial-scale=1, maximum-scale=1"> 

Style Sheets

  • About these Style Sheets
    • The National Library of Medicine (NLM) header requires the use of three stylesheets (normalize.css, master_rwd.css, and jquery-ui.css)
    • Links to all the Styles are required.
  • Item: normalize.css
    • Required?: Yes
    • Location?: Before the </head> tag.
    • Why needed?: Creates a consistent view across browsers.
    • Code:
      <link href="//www.nlm.nih.gov/styles/normalize.css" rel="stylesheet" />
  • Item: master_rwd.css
    • Required?: Yes.
    • Location?: Before the </head> tag.
    • Why needed?:  The main style sheet for the entire site.
    • Code:
       <link href="//www.nlm.nih.gov/styles/master_rwd.css" rel="stylesheet" media="all" />
  • Item: jquery-ui.css
    • Required?: Yes
    • Location?: Before the </head> tag.
    • Why Needed?: Style sheet used to style page components which rely on jquery.
    • Code:
       <link rel="stylesheet" href="//www.nlm.nih.gov/core/jquery-ui/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />

Scripts

  • Item: modernizr.2.8.3.custom.js
    • Required? : Yes
    • Location: Before the </head> tag.
    • Why needed: Required so that responsive page components work correctly.
    • Code:
      <script src="//www.nlm.nih.gov/scripts/modernizr.2.8.3.custom.js"></script>
  • Item: survey.js
    • Required? :Yes
    • Location: Before the </head> tag.
    • Why needed: Required for the NLM customer satisfaction survey
    • Code:
      <script src="/www.nlm.nih.gov/share/scripts/survey.js" type="text/javascript" language="javascript"></script>
  • Item: master_rwd.js
    • Required?: Yes
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why needed: Required so that responsive page components work correctly.
    • Code:
      <script src="//www.nlm.nih.gov/scripts/master_rwd.js"></script>
  • Item: jquery.min.js
    • Required?: Yes
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why needed: Required so that page components requiring jquery work correctly.
    • Code:
      <script src="//www.nlm.nih.gov/scripts/jquery11/jquery.min.js"></script>
  • Item: jquery-ui.js
    • Required?: Yes
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why needed.: Required so that page components requiring jquery work correctly.
    • Code:
      <script src="//www.nlm.nih.gov/scripts/jquery11/jquery-ui.js"></script>
  • Item: jquery.slicknav.js
    • Required?: Yes
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why needed: Required so that the drop-down menus work correctly.
    • Code:
      <script src="//www.nlm.nih.gov/scripts/jquery.slicknav.js"></script>
  • Item: No script for slider jquery javascript
    • Required?: Yes
    • Location: Before the <title> tag.
    • Why needed: Required so that responsive version of the drop-down menus degrade gracefully if Javascript is disabled.
    • Code:
      <noscript><style>#slider {display:none;}</style></noscript>
  • Item: Embedded slicknav javascript
    • Required?: Yes
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why needed?: Required so that the drop-down menus work correctly.
    • Code:
      <script type="text/javascript">
      $nlm(document).ready(function(){  $nlm('#menu').slicknav({
      'label' : '',
      prependTo:'#nav',
      'allowParentLinks': 'true',
      });
          $nlm(function () {
            // Slideshow
           $nlm("#slider").responsiveSlides({  auto: true,
             pager: true,      
             nav: true,
             speed: 500, 
             timeout: 8000,
             pause: true, 
           });
         });
             });
      </script>
  • Item: util.js
    • Required?: Yes
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why Needed?: Required so that the NLM Search works properly
    • Code:
      <script src="//www.nlm.nih.gov/scripts/util.js"></script>
  • Item: responsiveslides.min.js
    • Required?: No
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why Needed?: Needed for pages that use a rotating slide feature. Examples: NLM Home Page and  History of Medicine Home Page
    • Code:
      <script src="//www.nlm.nih.gov/scripts/responsiveslides.min.js"></script>

  • Item: SmartSource Data Collector tag
    • Required?:  No
    • Location: After the last content element of the page but before the ending </body> tag
    • Why needed: Used to gather more reliable page usage statistics
    • Code:
      <!-- START OF SmartSource Data Collector TAG -->
      <!-- Copyright (c) 1996-2010 WebTrends Inc. All rights reserved. -->
      <!-- Version: 9.3.0 -->
      <!-- Tag Builder Version: 3.1 -->
      <!-- Created: 12/14/2010 4:50:39 PM -->
      <script src="/scripts/webtrends.js" type="text/javascript"></script>
      <!-- =================================================================================== -->
      <!-- Warning: The two script blocks below must remain inline. Moving them to an external -->
      <!-- JavaScript include file can cause serious problems with cross-domain tracking. -->
      <!-- =================================================================================== -->
      <script type="text/javascript">

      //<![CDATA[
      var _tag=new
      WebTrends();
      _tag.dcsGetId();

      //]]>
      </script>
      <script type="text/javascript">
      //<![CDATA[

      _tag.dcsCustom=function(){
      // Add custom parameters here.
      //_tag.DCSext.param_name=param_value;
      _tag.DCSext.dcsid=_tag.dcsid;
      }
      _tag.trackAllEvents=true;
      _tag.dcsCollect();
      //]]>

      </script>

      <noscript>
      <div><img alt="DCSIMG" id="DCSIMG" width="1" height="1" src="//wtsdc.nlm.nih.gov/dcs58q90x1jarh82x3ay50066_8v6r/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=9.3.0&amp;WT.dcssip=www.nlm.nih.gov"/></div>
      </noscript>
      <!-- END OF SmartSource Data Collector TAG -->
  • Item: Crazy Egg scripts
    • Required ?: No
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why needed: Scripts gather statistical information that can be used to create heat maps
    • Code:
      <script type="text/javascript">
      setTimeout(function()
      {var a=document.createElement("script"); var b=document.getElementsByTagName("script")[0]; a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0027/2050.js?"+Math.floor(new Date().getTime()/3600000); a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
      </script>

Skip Navigation

  • Item:
  • Required?: Yes
  • Location: Immediately before the <div id="body"> tag
  • Why Needed?: Gives users ability to tab directly to page content .
  • Code:
    <div class="skipnavigation"><a class="skipnavigation" href="#skip" title="Skip the navigation on this page">Skip Navigation Bar</a></div>

HTML <body> tag element

  • Required? Yes
  • Location: Immediately after </head> tag.
  • Why Needed?: Required for all HTML files.
  • Code.
     <body>

Wrapper and Container elements

  • Required? Yes
  • Location: Immediately before the <!--Open Header--> section
  • Why Needed?: These tags control the basic page appearance.
    Two options: a fluid width or a fixed width.
  • Code for Fluid width option option.
    <div id="wrapper-fluid">
    <div id="container-fluid">
  • Code for Fixed width option
    Note: The max width value on this element is 960px.
    <div id="wrapper">
    <div id="container">

The page-header element

  • Required? Yes.
  • Location: First child element within the <body> tag element
  • Why needed?: Parent for the following items:
    • header-sub
      • logo
      • NLMStar
      • searchForm
    • search-under
      • contact-us
      • social-home
    • mobile-slick
    • nav
      • slicknav_menu
      • nojs
      • topnav hide-me show-me
  • Code:
    <div id="page-header" class="clearfix">
    	<div id="header-sub">
    		<a class="logo" href="http://www.nlm.nih.gov">
    		<img id="NLMStar" width="210" src="/images/NLM_Starburst2x.png" alt="">
    		<form id="searchForm" name="searchForm" target="_self" action="//vsearch.nlm.nih.gov/vivisimo/cgi-bin/query-meta" method="get">
    	</div>
    
    	<div class="search-under">
    		<p class="contact-us">
    		<div class="social-home">
    	</div>
    
    	<div id="mobileslick">
    		<ul id="menu" class="topnav show-me">
    	</div>
    
    	<div id="nav">
    		<div class="slicknav_menu">
    		<div id="nojs" style="display: none;">
    		<ul class="topnav hide-me show-me">
    	</div>
    </div>

The header-sub element

  • Required? Yes.
  • Location: First child element with the page-header element
  • Why needed?: Parent for the following items:
    • header-sub
      • logo
      • NLMStar
      • searchForm
  • Code:
    <div id="header-sub">
    <a class="logo" href="http://www.nlm.nih.gov">
    <img id="NLMStar" width="210" src="/images/NLM_Starburst2x.png" alt="">
    <form id="searchForm"name="searchForm" target="_self" action="//vsearch.nlm.nih.gov/vivisimo/cgi-bin/query-meta" method="get">
    </div>
The logo element
  • Required? Yes.
  • Location: First child element within the header-sub element
  • Why needed?: Controls the NIH Logo and U.S. National Library of Medicine text.
  • Code:
    <a class="logo" href="http://www.nlm.nih.gov">
    <h1>U.S. National Library <span>of Medicine</span></h1>
    </a>
  • Responsive behavior based on page width:
    • 951 Pixels or Greater:  Normal view
    • 950 Pixels or less (871 to 950) : U.S. National Library of Medicine image - Reduce Width. Wrap Text
    • 481 Pixels or less (283 to 481):
      • NIH Logo - Reduce Height
      • U.S. National Library of Medicine image - Reduce Height. Unwrap Text
    • 282 Pixels or less
      • U.S. National Library of Medicine image - Reduce Height. Unwrap Text
The NLMStar element
  • Required? Yes.
  • Location: Second child element within the header-sub element
  • Why needed?: Controls the Starburst image.
  • Code:
    <img id="NLMStar" width="210" src="/images/NLM_Starburst2x.png" alt="">
  • Responsive behavior based on page width:
    • 951 Pixels or Greater:  Normal view
    • 950 Pixels or less (871 to 950) : Starburst image - Move to left
    • 600 Pixels or less (482 to 600) : Starburst image - Reduce Height
    • 481 Pixels or less: Starburst image - Remove
The searchForm element
  • Required? Yes.
  • Location: Third child element within the header-sub element
  • Why needed?: Controls the Search box in the NLM header.
  • Code:
    <form id="searchForm" name="searchForm" target="_self" action="//vsearch.nlm.nih.gov/vivisimo/cgi-bin/query-meta" method="get">
       <label class="hidden" for="search">Search</label>
       <input id="search" class="search-input inactive ui-autocomplete-input" type="text" value="Search" name="query" autocomplete="off">
       <input type="hidden" value="nlm-main-website" name="v:project">
    </form>
  • Responsive behavior based on page width:
    • 951 Pixels or Greater:  Normal view
    • 799  Pixels or less (601 to 799) : Search box - Move to center below U.S. National Library of Medicine image and Starburst image

The search-under element

  • Required? Yes.
  • Location: The second child element within the page-header element
  • Why needed?: Parent for the following items:
    • contact-us
    • social-home
  • Code:
    <div class="search-under">
      <p class="contact-us">
      <div class="social-home">
    </div>
    
The contact-us element
  • Required? Yes.
  • Location: First child element within the search-under element
  • Why needed?: Controls the Contact NLM link in the NLM header.
  • Code:
    <p class="contact-us">
       <a href="http://apps2.nlm.nih.gov/mainweb/siebel/nlm/index.cfm">Contact NLM</a>
    </p>
  • Responsive behavior based on page width:
    • 951 Pixels or Greater:  Normal view
    • 870 Pixels or less (800 to 870) : Contact NLM link - Move to Right above Search Box 
    • 799 Pixels or less (601 to 799) : Contact NLM link - Move to Top Right
    • 481 Pixels ore less (283 to 481) : Contact NLM link - Remove (still available in the footer)
The social-home element
  • Required? Yes.
  • Location: Second child element within the search-under element
  • Why needed?: Controls the Social Items icon group in the NLM header.
  • Code:
    <div class="social-home">
       <a class="at300bs at15nc at15t_compact addthisNLM" target="_blank" href="http://www.addthis.com/bookmark.php?v=300&title=National%20Library%20of%20Medicine">
         <img class="social-home-item" height="16" title="Add This" alt="Add This" src="/images/addthis.png">
       </a>
       <a href="//www.nlm.nih.gov/listserv/rss_podcasts.html">
         <img class="social-home-item" height="16" alt="RSS Icon" src="//www.nlm.nih.gov/images/rss-social.png">
       </a>
       <a href="http://twitter.com/nlm_news" title="External link: please review our privacy policy.">
         <img class="social-home-item" height="16" alt="Twitter Icon" src="//www.nlm.nih.gov/images/twitter-social.png">
       </a>
       <a href="http://www.facebook.com/nationallibraryofmedicine" title="External link: please review our privacy policy.">
         <img class="social-home-item" height="16" alt="Facebook Icon" src="//www.nlm.nih.gov/images/facebook-social.png">
       </a>
    </div>
  • Responsive behavior based on page width:
    • 951 Pixels or Greater:  Normal view
    • 870 Pixels or less (800 to 870) : Social Items icon group - Move to Left above Search Box 
    • 799 Pixels or less (601 to 799) : Social Items icon group - Move to Top Right below Contact NLM link
    • 481 Pixels ore less (283 to 481) Social Items icon group - Move to below Search Box

The Mobile Navigation element

  • Required? Yes.
  • Location: Third child element within the page-header element
  • Why needed?: Controls Navigation behavior for page 799 pixels or less
  • Code:
    
    <!-- Mobile Navigation BEGIN -->
    <div id="mobileslick">
    <ul id="menu" class="topnav show-me">
       <li>Databases
        <ul>
          <li><a href="http://www.ncbi.nlm.nih.gov/pubmed/">PubMed/MEDLINE</a></li>
          <li><a href="http://www.nlm.nih.gov/mesh/MBrowser.html">MeSH</a></li>
          <li><a href="http://www.nlm.nih.gov/research/umls/">UMLS</a></li>
          <li><a href="http://clinicaltrials.gov/">ClinicalTrials.gov</a></li>
          <li><a href="http://www.nlm.nih.gov/medlineplus/">MedlinePlus</a></li>
          <li><a href="http://toxnet.nlm.nih.gov/">TOXNET</a></li>
          <li><a href="http://ihm.nlm.nih.gov/luna/servlet/view/all">Images from the History of Medicine</a></li>
          <li><a href="http://locatorplus.gov">LocatorPlus</a></li>
          <li><a href="http://wwwcf2.nlm.nih.gov/nlm_eresources/eresources/search_database.cfm">All NLM Databases &amp; APIs</a></li>
        </ul>
       </li>
       <li>Find, Read, Learn
        <ul>
          <li><a href="http://www.ncbi.nlm.nih.gov/pubmed/">Search biomedical literature</a></li>
          <li><a href="http://www.nlm.nih.gov/medical-terms.html">Find medical terminologies</a></li>
          <li><a href="http://locatorplus.gov/">Search NLM collections</a></li>
          <li><a href="http://www.nlm.nih.gov/medlineplus/healthtopics.html">Read about diseases</a></li>
          <li><a href="http://www.nlm.nih.gov/learn-about-drugs.html">Learn about drugs</a></li>
          <li><a href="http://www.nlm.nih.gov/hmd/explore-history.html">Explore history</a></li>
          <li><a href="http://clinicaltrials.gov/">Find a clinical trial</a></li>
          <li><a href="http://www.nlm.nih.gov/medlineplus/mplusdictionary.html">Use a medical dictionary</a></li>
          <li><a href="http://www.ncbi.nlm.nih.gov/pmc/">Find free full-text articles</a></li>
        </ul>
       </li>
       <li>Explore NLM
        <ul>
          <li><a href="http://www.nlm.nih.gov/about/index.html">About NLM</a></li>
          <li><a href="http://www.nlm.nih.gov/hinfo.html">Health Information</a></li>
          <li><a href="http://www.nlm.nih.gov/libserv.html">Library Catalog &amp; Services</a></li>
          <li><a href="http://www.nlm.nih.gov/hmd/index.html">History of Medicine</a></li>
          <li><a href="http://www.nlm.nih.gov/onlineexhibitions.html">Online Exhibitions &amp; Digital Projects</a></li>
          <li><a href="http://www.nlm.nih.gov/portals/publishers.html">Information for Publishers</a></li>
          <li><a href="http://www.nlm.nih.gov/about/visitor.html">Visit the Library</a></li>
        </ul>
       </li>
       <li>Research at NLM
        <ul>
          <li><a href="http://www.ncbi.nlm.nih.gov/genome/guide/human/resources.shtml">Human Genome Resources</a></li>
          <li><a href="http://www.nlm.nih.gov/biomedical.html">Biomedical Research &amp; Informatics</a></li>
          <li><a href="http://sis.nlm.nih.gov/enviro.html">Environmental Health &amp; Toxicology</a></li>
          <li><a href="http://www.nlm.nih.gov/hsrph.html">Health Services Research &amp; Public Health</a></li>
          <li><a href="http://www.nlm.nih.gov/healthit.html">Health Information Technology</a></li>
        </ul>
       </li>
       <li>NLM for You
        <ul>
          <li><a href="http://www.nlm.nih.gov/grants.html">Grants &amp; Funding</a></li>
          <li><a href="http://www.nlm.nih.gov/healthit/meaningful_use.html">Meaningful Use Tools</a></li>
          <li><a href="http://www.nlm.nih.gov/training.html">Training &amp; Outreach</a></li>
          <li><a href="http://www.nlm.nih.gov/network.html">Network of Medical Libraries</a></li>
          <li><a href="http://www.nlm.nih.gov/regional-activities.html">Regional Activities</a></li>
          <li><a href="http://www.nlm.nih.gov/careers/careers.html">Careers @ NLM</a></li>
          <li><a href="http://www.nlm.nih.gov/mobile/index.html">Mobile Gallery</a></li>
        </ul>
       </li>
    </ul>
    </div>
    <!-- Mobile Navigation END -->
  • Responsive behavior based on page width:
    • 799 Pixels or less: Mobile Navigation element - Navigation Menu - Mobile view

The Navigation element

  • Required? Yes.
  • Location: Fourth child element within the page-header element
  • Why needed?: Controls Navigation behavior for page 800 pixels or greater
  • Code:
    <div id="nav">
    
    <!--Open Nav-->
      <div id="nojs">
       <noscript>
        <ul id="no-script-nav">
         <li><a href="//www.nlm.nih.gov/noscript-nav.html">Site Navigation</a></li>
        </ul>
       </noscript>
      </div>
    <!--Open drop-->
      <ul class="topnav hide-me">
      </ul>
    <!--Close drop-->
    <!--Close Nav-->
    </div>
    
  • Responsive behavior based on page width:
    • 800 Pixels or greater: Navigation element - Navigation Menu - Standard Page view

"main-body" body tag element

  • Required? Yes.
  • Location: Second child element within the <body> tag element
  • Why needed?: Contains all of the content below the page-header element. There are different classes for different color schemes.
  • Code:
     <div id="main-body" class="nlm-blue"> 
    Note: Different classes exist for different color schemes which are used for Divisional Branding Bar - Branded Options and Headings.
    These classes are coded beginning near line 1214 on https://www.nlm.nih.gov/styles/master_rwd.css

Divisional Branding Bar

  • Required? Yes.
  • Location: First child element within the "main-body" body tag element
  • Why needed?:
    • You must use either the Divisional Branding Bar - Empty Option or a specific Divisional Branding Bar Option.
      • All of these options are discussed immediately below this section.
  • Responsive behavior based on page width: All Responsive behaviors for the Divisional Branding Bar element are discussed under the "Divisional Branding Bar with Navigation and Header Image Option" below.
Divisional Branding Bar Basic Option
  • Required? Yes, if a specific Divisional Branding Bar option isn't used.
  • Location: First child element within the "main-body" body tag element
  • Why needed?: The Divisional Branding Bar - Empty Version is only required if a specific Divisional Branding Bar is not used. (See specific Divisional Branding Bar instructions below).
  • Example Page: NLM Main Page Example - No Headers
  • Code View:
    <div id="main-body" class="nlm-blue">
    <div id="barbranding"></div>
Divisional Branding Bar without Navigation Option
  • Required ?: Yes, if the Divisional Branding Bar Basic option isn't used.
  • Location: First child element within the "main-body" body tag element.
    The color is controlled by adding a class to #main-body which opens prior to #barbranding.
  • Why needed?: Different classes exist for different color schemes which are used for Divisional Branding Bar - Branded Versions and Headings.
    These classes are coded beginning near line 1214 on https://www.nlm.nih.gov/styles/master_rwd.css
  • Example Page: NLM Main Site Coding Examples - Divisional Branding Bar without Navigation Option
  • Code View:
    <div id="main-body" class="grape">
      <div id="barbranding">
         <h3>Divisional Branding Bar without Navigation Option</h3>
         <div class="breadcrumb-brand"></div>
    </div>
Divisional Branding Bar with Navigation Option
  • Required ?: Yes, if one of the Divisional Branding Bar bar options mentioned earlier isn't used.
  • Location: First child element within the "main-body" body tag element.
    The color is controlled via the same code as mentioned in the Divisional Branding Bar without Navigation Option mentioned above.
  • Why needed?: This is option adds navigation links to the Division Header.
  • Example Page: NLM Main Site Coding Examples - Divisional Branding Bar with Navigation Option
  • Code View:
    <div id="main-body" class="grape">
       <div id="barbranding">
         <h3>Divisional Branding Bar with Navigation Option</h3>
         <div class="breadcrumb-brand">
           <ul>
            <li>
                <a title="Index Page" href="/web/documentation/TemplateDocumentation/index.html">
                    <strong>NLM Main Site Coding Examples</strong>
                </a>
            </li>
            <li>
                <a title="Index Page 2" href="/web/documentation/TemplateDocumentation/index.html">
                   <strong>NLM Main Site Coding Examples 2</strong>
                </a>
            </li>
            <li>
                <a title="Index Page 3" href="/web/documentation/TemplateDocumentation/index.html">
                   <strong>NLM Main Site Coding Examples 3</strong>
                 </a>
            </li>
           </ul>
         </div>
       </div>
  • Code View Note: The “|” (pipe) character. used as the separator in the Navigation option is managed via the css beginning near line 893 on https://www.nlm.nih.gov/styles/master_rwd.css
    Divisional Branding Bar
     #barbranding li + li:before {
      content: " | ";
      padding: 0 10px; }
Divisional Branding Bar with Navigation and Header Image Option
  • Required ?: Yes, if one of the Divisional Branding Bar bar options mentioned earlier isn't used.
  • Location: First child element within the "main-body" body tag element.
    The color controlled via the same code as mentioned in the Divisional Branding Bar without Navigation Option mentioned above.
    The Navigation option is managed via the css mentioned in the Divisional Branding Bar with Navigation Option mentioned above.
  • Why needed?: This is option a the ability to brand pages with an image located in the upper left of the page within the Division Header.
  • Example Page: NLM Main Site Coding Examples - Divisional Branding Bar with Navigation and Header Image Option
  • Code View:
    <div id="main-body" class="grape">
      <div id="barbranding" style="padding-left:0px;">
        <a href="https://www.nlm.nih.gov">
        <img height="55" alt="Go to the NLM Home page" style="float:left;margin-top:0px;" src="/images/nlm-logo-white.png">
        </a>
        <h3>Divisional Branding Bar with Navigation and Header Image Option</h3>
         <div class="breadcrumb-brand">
           <ul>
            <li>
                <a title="Index Page" href="/web/documentation/TemplateDocumentation/index.html">
                    <strong>NLM Main Site Coding Examples</strong>
                </a>
            </li>
            <li>
                <a title="Index Page 2" href="/web/documentation/TemplateDocumentation/index.html">
                   <strong>NLM Main Site Coding Examples 2</strong>
                </a>
            </li>
            <li>
                <a title="Index Page 3" href="/web/documentation/TemplateDocumentation/index.html">
                   <strong>NLM Main Site Coding Examples 3</strong>
                 </a>
            </li>
           </ul>
         </div>
       </div>
  • Responsive behavior based on page width; for all Divisional Branding Bar elements:
    • 951 Pixels or Greater
      • Divisional Branding Bar Title : Normal view
      • Divisional Branding Bar – Navigation links : Normal view
      • Header Image : Normal view
    • 950 Pixels or less (871 to 950)
      • Header Image : Removed
      • Divisional Branding Bar Title : Wrap text
    • 799 Pixels or less (601 to 799)
      • Divisional Branding Bar – Navigation links : Move to left. Wrap text.

Breadcrumb Bar

  • Required ?: Yes
  • Location: Second child element within the "main-body" body tag element.
  • Why needed?: Breadcrumb container for the page. Navigation elements are separated by a “>” (greater than) character
  • Example Page: NLM Main Site Coding Examples - Generic Templated Page with Breadcrumbs
  • Code View:
    <div id="breadcrumb-div">
     <p>
        <a title="NLM Home" href="/">Home</a>
       >
        <a title="NLM Main Site Coding Examples " href="https://www.nlm.nih.gov/web/documentation/TemplateDocumentation/index.html">NLM Main Site Coding Examples </a>
       >
        <a title="NLM Main Site Coding Instructions" href="https://www.nlm.nih.gov/web/documentation/index.html">NLM Main Site Coding Instructions</a>
     </p>
    </div>
  • Responsive behavior based on page width:
    • Text within the Breadcrumb Bar element will wrap depending on the viewport and amount of text.

Skip Navigation Target

  • Required ?: Yes
  • Location: Third child element within the "main-body" body tag element.
  • Why needed?: Landing target location for the Skip Navigation anchor mentioned above.
  • Code View:
    <a name="skip" id="skipnav"></a>

Body content

  • Required ?: Yes
  • Location: Fourth child element within the "main-body" body tag element.
  • Why needed?:
    • In order for body elements to display properly, elements must be in a semantic tag (e.g. <p>, <th>, <table>, <ul>, etc.
    • You must use one of the three Body content options discussed immediately below this section.
  • Example Page: NLM Main Site Coding Examples - Generic Templated Page with Breadcrumbs
Body content Single Column Option
  • Required ?: Yes, if one of the body content options mentioned below isn't used.
  • Location: Fourth child element within the "main-body" body tag element.
  • Why needed?:
    • In order for body elements to display properly, elements must be in a semantic tag (e.g. <p>, <th>, <table>, <ul>, etc.
    • Content is contained in a single div tag.
  • Example Page: NLM Main Site Coding Examples - Generic Templated Page with Breadcrumbs
  • Code View::
    <div id="body">
       <div class="clearfix">
         <h1>Generic Content Using TinyMCE</h1>
        <p>Lorem ipsum dolor sit...</p>
       </div>
    </div>
  • Responsive behavior based on page width: Text within the Body content Single Column Option will wrap depending on the viewport and amount of text.
Body content Two Column Option
  • Required ?: Yes, if one of the body content options mentioned above or below isn't used.
  • Location: Fourth child element within the "main-body" body tag element.
  • Why needed?:
    • In order for body elements to display properly, elements must be in a semantic tag (e.g. <p>, <th>, <table>, <ul>, etc.
    • Content is contained in a two div tags.
    • Column widths are managed via the grid class selected. These Grid classes are coded near line 309 https://www.nlm.nih.gov/styles/master_rwd.css
  • Example Page: Two Column Template Example
  • Code View for a page where the left column uses about 75% of the page and the right column uses 25% of the page :
    <div id="body">
       <div class="clearfix">
        <h1>Basic Page</h1>
          <div class="items">
            <div class="columnA grid_9" style="">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            </div>
            <div class="columnB grid_3" style="">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            </div>
          <div style="clear:both"></div>
       </div>
    </div>
  • Responsive behavior based on page width:
    • 800 Pixels or greater: Two columns appear on the page. Text will wrap depending on the viewport and amount of text.
    • 799 Pixels or less (601 to 799): Content in  div class="columnB grid_X" floats below div class="columnA grid_X" 
Body content Secondary Column Option
  • Required ?: Yes, if one of the body content options mentioned above isn't used.
  • Location: Fourth child element within the "main-body" body tag element.
  • Why needed?:
    • In order for body elements to display properly, elements must be in a semantic tag (e.g. <p>, <th>, <table>, <ul>, etc.
    • A distinctive display is needed for content in a second column.
    • If the Secondary Column Option is used, the secondary content is contained within <div id="secondary"...
    • Column widths are managed via the grid class selected. These Grid classes are coded near line 309 https://www.nlm.nih.gov/styles/master_rwd.css
  • Example Page: Related Pages : Second Column TeamSite Component : Postion Left
  • Code View:
    <div id="body">
      <div class="clearfix">
        <div id="primary" class="grid_9 right">
          <h1>Related Pages : Second Column TeamSite Component : Postion Left</h1>
          <p>Main Column Content Field</p>
          <p>Lorem ipsum dolor sit amet....</p>
        </div><!--end primary div-->
        <div id="secondary" class="grid_3 left">
          <div id="relatedPages">
            <ul>
             <li>
               <h2>Item Text 1: Related Pages - Position Left</h2>
             <ul>
               <li>Content 1: Relaged Pages - Position Left </li>
            </ul>
            </li>
            <li>
              <h2>Item Text 2: Related Pages - Position Left</h2>
             <ul>
               <li>Content 2: Related Pages - Position Left </li>
             </ul>
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            </li>
            </ul>
          </div><!--relatedPages-->
        </div><!--end secondary div-->
      </div>
    </div><!--body-->
  • Responsive behavior based on page width:
    • 800 Pixels or greater: Two columns appear on the page. Text will wrap depending on the viewport and amount of text.
    • 799 Pixels or less (601 to 799): Content in  div id="secondary" floats below div id="primary" 

Footer

  • Required?: Yes. 
  • Location: Fifth child element within the "main-body" body tag element.
  • Why needed?: The footer is the location for the following sections:
    • Footer Info section which contains:
      • Copyright link
      • Privacy link
      • Accessibility link
      • Site Map link
      • Viewers and Players link
      • U.S. National Library of Medicine, 8600 Rockville Pike, Bethesda, MD 20894
      • National Instituters of Health link
      • Health & Human Services link
      • Freedom of Information Act link
      • Contact Us link
    • USA.gov section which links to USA.gov
    • Footer Review section which contains:
      • Last reviewed date
      • Last updated date
      • First published date
      • Metadata link
      • Permanence level indicator
  • Code View
    <div id="footer-sub">
       <div id="footer-info" class="grid_6">
          <a href="http://www.nlm.nih.gov/copyright.html">Copyright</a>,
          <a href="http://www.nlm.nih.gov/privacy.html">Privacy</a>,
          <a href="http://www.nlm.nih.gov/accessibility.html">Accessibility</a>,
          <a href="http://www.nlm.nih.gov/sitemap.html">Site Map</a>,
          <a href="http://www.nlm.nih.gov/plugins.html">Viewers and Players</a>
          <br />
          U.S. National Library of Medicine, 8600 Rockville Pike, Bethesda, MD 20894
          <br />
          <a href="http://www.nih.gov/">National Institutes of Health</a>,
          <a href="http://www.hhs.gov/">Health &amp; Human Services</a> <br />
          <a href="http://www.nih.gov/icd/od/foia/index.htm">Freedom of Information Act</a>
          , 
          <a href="http://apps.nlm.nih.gov/mainweb/siebel/nlm/index.cfm">Contact Us</a> 
    
          <a id="footer-usa" href="http://www.usa.gov/">
            <img alt="USA.gov logo" src="/images/usa_gov_optim.svg" />
          </a> 
       </div>
       <div id="footer-review" class="grid_6">
          <strong>Last reviewed:</strong> 04 March 2016<br />
          <strong>Last updated:</strong> 04 March 2016<br />
          <strong>First published:</strong> 05 February 2015<br />
          <a onclick="javascript:openPopup('http://www.nlm.nih.gov/cgi/viewMeta.pl
               ?url=http://www.nlm.nih.gov/web/documentation/TemplateDocumentation/SecondColRelatedPagesLeft.html&description=full'); 
               return false;" href="http://www.nlm.nih.gov/cgi/viewMeta.pl?
               url=http://www.nlm.nih.gov/web/documentation/TemplateDocumentation/SecondColRelatedPagesLeft.html&description=full">
          <strong>Metadata</strong>
          </a>
         |
          <a href="/permlevels.html" onclick="javascript:openPopup('/permlevels.html');return false;">
             <strong>Permanence level</strong></a><strong>:</strong> 
             Permanence Not Guaranteed<br />
       </div>
    </div>

Responsive Breakpoint Summary

There are Seven Break Points which impact the NLM Headers and Footers

951 Pixels or Greater

  1. NIH logo image
  2. U.S. National Library of Medicine image
  3. Starburst image
  4. Search box
  5. Contact NLM link
  6. Social Items icon group
  7. Drop Down Navigation menu
  8. Divisional Branding Bar Header image
  9. Divisional Branding Bar Title
  10. Divisional Branding Bar – Navigation links
  11. Breadcrumb bar
  12. Content
  13. Footer Info section
  14. USA.gov section
  15. Footer Review section

NLM Main Viewport - 951 pixels or greater

950 Pixels or less (871 to 950)

  1. NIH logo image
  2. U.S. National Library of Medicine image - Reduce Width. Wrap Text
  3. Starburst image - Move to left
  4. Search box
  5. Contact NLM link
  6. Social Items icon group
  7. Drop Down Navigation menu
  8. Divisional Branding Bar Header image - Remove
  9. Divisional Branding Bar Title
  10. Divisional Branding Bar – Navigation links
  11. Breadcrumb bar
  12. Content
  13. Footer Info section
  14. USA.gov section
  15. Footer Review section

NLM Main Viewport - 950 Pixels or less (871 to 950)

870 Pixels or less (800 to 870)

  1. NIH logo image
  2. U.S. National Library of Medicine image
  3. Starburst image
  4. Search box
  5. Contact NLM link - Move to Right above Search Box
  6. Social Items icon group - Move to Right above Search Box
  7. Drop Down Navigation menu
  1. Divisional Branding Bar Title
  2. Divisional Branding Bar – Navigation links
  3. Breadcrumb bar
  4. Content
  5. Footer Info section
  6. USA.gov section
  7. Footer Review section

NLM Main Viewport - 870 Pixels or less (800 to 870)

799 Pixels or less (601 to 799)

  1. NIH logo image
  2. U.S. National Library of Medicine image
  3. Starburst image
  4. Search box - Move to center below U.S. National Library of Medicine image and Starburst
  5. Contact NLM link - Move to Top Right
  6. Social Items icon group - Move to Top Right below Contact NLM Link
  7. Drop Down Navigation menu - Change to Hamburger Menu - Align Left
  1. Divisional Branding Bar Title
  2. Divisional Branding Bar – Navigation links - Move to the Left
  3. Breadcrumb bar
  4. Content
  5. Footer Info section - Move to the Left
  6. USA.gov section - Align to the Right
  7. Footer Review section - Move to the Left

NLM Main Viewport - 799 Pixels or less (601 to 799)

600 Pixels or less (482 to 600)

  1. NIH logo image
  2. U.S. National Library of Medicine image
  3. Starburst image- Reduce Height
  4. Search box
  5. Contact NLM link
  6. Social Items icon group
  7. Drop Down Navigation menu
  1. Divisional Branding Bar Title
  2. Divisional Branding Bar – Navigation links
  3. Breadcrumb bar
  4. Content
  5. Footer Info section
  6. USA.gov section
  7. Footer Review section

NLM Main Viewport - 600 Pixels or less (482 to 600)

481 Pixels or less (283 to 481)

  1. NIH logo image - Reduce Height
  2. U.S. National Library of Medicine image - Reduce Height, Unwrap Text
  3. Starburst image - Remove
  4. Search box
  5. Contact NLM link - Remove (still available in the footer)
  6. Social Items icon group - Move to below Search Box
  7. Drop Down Navigation menu
  1. Divisional Branding Bar Title
  2. Divisional Branding Bar – Navigation links
  3. Breadcrumb bar
  4. Content
  5. Footer Info section
  6. USA.gov section - Move to the Left
  7. Footer Review section - Wrap Text

NLM Main Viewport - 481 Pixels or less (283 to 481)

282 Pixels or less

  1. NIH logo image
  2. U.S. National Library of Medicine image - Wrap Text
  1. Search box
  1. Social Items icon group

  2. Drop Down Navigation menu
  1. Divisional Branding Bar Title
  2. Divisional Branding Bar – Navigation links
  3. Breadcrumb bar
  4. Content
  5. Footer Info section
  6. USA.gov section
  7. Footer Review section

NLM Main Viewport - 282 Pixels or less