Skip Navigation Bar

Coding Instructions for the National Library of Medicine's Main Website

These instructions are for developers who are creating HTML that will incorporated into templated pages within the NLM Main site. The instructions are organized into five main sections as well as information about the Responsive Breakpoint Summary.

  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

See the Responsive Breakpoint Summary which illustrates how the seven viewports impact page elements in the context of the entire page.


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: 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: Google Tag Manager
    • Required?:  No
    • Location: First entry in the <body> tag
    • Why needed: Used to gather more reliable page usage statistics
    • Code: Contact NLM for information about this code.
  • Item: paratureNLMmain.js
    • Required?: Yes Only if the page doesn't use the default JQuery command character, $.
      (If the page uses the JQuery command character, $., then use parature.js mentioned immediately below.)
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why Needed?: Needed so that questions posted https://support.nlm.nih.gov/ contain source page information
    • Code:
      <script src="//www.nlm.nih.gov/scripts/paratureNLMmain.js"></script>
  • Item: parature.js
    • Required?: Yes. Only if the page uses the default JQuery command character, $.
      (If the page doesn't use the JQuery command character, $., then use paratureNLMmain.js mentioned immediately above.)
    • Location: After the last content element of the page but before the ending </body> tag.
    • Why Needed?: Needed so that questions posted https://support.nlm.nih.gov/ contain source page information
    • Code:
      <script src="//www.nlm.nih.gov/scripts/parature.js"></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:
  • Code: The page-header element contains it's child elements within
    <div id="page-header" class="clearfix">
      Child elements
    </div>

The header-sub element

  • Required? Yes.
  • Location: First child element with the page-header element
  • Why needed?: Parent for the following items:
  • Code: The page-header element contains it's child elements within
    <div id="header-sub">
      Child elements
    </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. Wrap 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="https://www.nlm.nih.gov/images/NLM_Starburst2x.png" alt="">
  • Responsive behavior based on page width:
    • 951 Pixels or Greater:  Normal view
    • 950 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 method="get" action="//vsearch.nlm.nih.gov/vivisimo/cgi-bin/query-meta" target="_self" name="searchForm" id="searchForm">
        <label for="search" class="hidden">Search</label>
        <input type="text" name="query" value="Search" class="search-input" id="search"/>
        <input type="hidden" name="v:project" value="nlm-main-website" />
    </form>
           
  • Responsive behavior based on page width:
    • 920 Pixels or Greater: Normal view
    • 919 Pixels or less (871 to 919): Above Drop Down Menu
    • 870 Pixels or less (800 to 870): Above Drop Down Menu
    • 799 Pixels or less : Center below U.S. National Library of Medicine image

The search-under element

  • Required? Yes.
  • Location: The second child element within the page-header element
  • Why needed?: Parent for the following items:
  • Code: The search-under element contains it's child elements within
    <div class="search-under">
      Child elements
    </div>
    
The contact-us element
  • Required? Yes.
  • Location: First child element within the search-under element
  • Why needed?: Controls the NLM Customer Support link in the NLM header.
  • Code:
    <p class="contact-us">
       <a class="paratureLink" href="https://support.nlm.nih.gov/ics/support/default.asp?deptID=28054&amp;from=" target="_blank">NLM Customer Support</a>
    </p>
  • Responsive behavior based on page width:
    • 920 Pixels or Greater: Normal view
    • 919 Pixels or less (871 to 919): Above Search box and Social Items Icon group
    • 870 Pixels or less (800 to 870): Above Search Box. Right of the Social Items Icon group
    • 799 Pixels or less (601 to 799): Above the Social Items Icon group
    • 600 Pixels or less (462 to 600): Above the Social Items Icon group
    • 481 Pixels or less: Removed (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 href="https://public.govdelivery.com/accounts/USNLMOCPL/subscriber/new?topic_id=USNLMOCPL_3">
       <img alt="Subscribe to Email Updates" src="https://www.nlm.nih.gov/images/subscribe.svg" title="Subscribe to Email Updates"></a>
    <a href="https://www.nlm.nih.gov/listserv/rss_podcasts.html">
       <img alt="Follow NLM RSS feeds " src="https://www.nlm.nih.gov/images/icon_rss_100.svg" title="Follow NLM RSS feeds"></a>
    <a href="https://www.facebook.com/nationallibraryofmedicine">
       <img alt="Visit us on Facebook" src="https://www.nlm.nih.gov/images/icon_facebook_100.svg" title="Visit us on Facebook"></a>
    <a href="https://twitter.com/nlm_news"> <img alt="Visit us on Twitter" src="https://www.nlm.nih.gov/images/icon_twitter_100.svg" title="Visit us on Twitter"></a> <a href="https://www.youtube.com/user/NLMNIH"> <img alt="Visit us on Youtube" src="https://www.nlm.nih.gov/images/icon_youtube_100.svg" title="Visit us on Youtube"></a>
    </div>
  • Responsive behavior based on page width:
    • 920 Pixels or Greater: Normal view
    • 919 Pixels or less (871 to 919): Above Drop Down Navigation menu with NLM Customer Support and Search box
    • 870 Pixels or less (800 to 870): Above Search Box. Left of the NLM Customer Support Link
    • 799 Pixels or less (601 to 799): Below the NLM Customer Support Link
    • 600 Pixels or less (462 to 600): Below the NLM Customer Support Link
    • 481 Pixels or less: Top right corner below U.S. National Library of Medicine image

The Mobile Drop Down 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="https://www.ncbi.nlm.nih.gov/pubmed/">PubMed/MEDLINE</a></li>
          <li><a href="https://meshb.nlm.nih.gov">MeSH</a></li>
          <li><a href="https://www.nlm.nih.gov/research/umls/">UMLS</a></li>
          <li><a href="https://clinicaltrials.gov/">ClinicalTrials.gov</a></li>
          <li><a href="https://www.medlineplus.gov/">MedlinePlus</a></li>
          <li><a href="https://toxnet.nlm.nih.gov/">TOXNET</a></li>
          <li><a href="https://collections.nlm.nih.gov/">Images from the History of Medicine</a></li>
          <li><a href="https://www.nlm.nih.gov/hmd/ihm/">Digital Collections</a></li>
          <li><a href="https://locatorplus.gov">LocatorPlus</a></li>
          <li><a href="https://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="https://www.ncbi.nlm.nih.gov/pubmed/">Search biomedical literature</a></li>
          <li><a href="https://www.nlm.nih.gov/medical-terms.html">Find medical terminologies</a></li>
          <li><a href="https://locatorplus.gov/">Search NLM collections</a></li>
          <li><a href="https://www.medlineplus.gov/healthtopics.html">Read about diseases</a></li>
          <li><a href="https://www.nlm.nih.gov/learn-about-drugs.html">Learn about drugs</a></li>
          <li><a href="https://www.nlm.nih.gov/hmd/explore-history.html">Explore history</a></li>
          <li><a href="https://clinicaltrials.gov/">Find a clinical trial</a></li>
          <li><a href="https://www.medlineplus.gov/mplusdictionary.html">Use a medical dictionary</a></li>
          <li><a href="https://www.ncbi.nlm.nih.gov/pmc/">Find free full-text articles</a></li>
        </ul>
       </li>
       <li>Explore NLM
        <ul>
          <li><a href="https://www.nlm.nih.gov/about/index.html">About NLM</a></li>
          <li><a href="https://www.nlm.nih.gov/hinfo.html">Health Information</a></li>
          <li><a href="https://www.nlm.nih.gov/libserv.html">Library Catalog &amp; Services</a></li>
          <li><a href="https://www.nlm.nih.gov/hmd/index.html">History of Medicine</a></li>
          <li><a href="https://www.nlm.nih.gov/digitalprojects.html">Online Exhibitions &amp; Digital Projects</a></li>
          <li><a href="https://www.nlm.nih.gov/portals/publishers.html">Information for Publishers</a></li>
          <li><a href="https://www.nlm.nih.gov/about/visitor.html">Visit the Library</a></li>
          <li><a href="https://www.nlm.nih.gov/information-in-other-languages.html">Health Information in Other Languages</a></li>
        </ul>
       </li>
       <li>Research at NLM
        <ul>
          <li><a href="https://www.ncbi.nlm.nih.gov/projects/genome/guide/human/">Human Genome Resources</a></li>
          <li><a href="https://www.nlm.nih.gov/biomedical.html">Biomedical Research &amp; Informatics</a></li>
          <li><a href="https://sis.nlm.nih.gov/enviro.html">Environmental Health &amp; Toxicology</a></li>
          <li><a href="https://www.nlm.nih.gov/hsrph.html">Health Services Research &amp; Public Health</a></li>
          <li><a href="https://www.nlm.nih.gov/healthit/index.html">Health Information Technology</a></li>
        </ul>
       </li>
       <li>NLM for You
        <ul>
          <li><a href="https://www.nlm.nih.gov/grants.html">Grants &amp; Funding</a></li>
          <li><a href="https://www.nlm.nih.gov/healthit/meaningful_use.html">Meaningful Use Tools</a></li>
          <li><a href="https://www.nlm.nih.gov/training.html">Training &amp; Outreach</a></li>
          <li><a href="https://nnlm.gov/">National Network of Medical Libraries</a></li>
          <li><a href="https://www.nlm.nih.gov/regional-activities.html">Regional Activities</a></li>
          <li><a href="https://www.nlm.nih.gov/careers/careers.html">Careers @ NLM</a></li>
          <li><a href="https://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 Drop Down Navigation element - Navigation Menu - Mobile view

The Drop Down 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/sitemap.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: Drop Down 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="https://www.nlm.nih.gov/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
  • 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 class="paratureLink" href="https://support.nlm.nih.gov/ics/support/default.asp?deptID=28054&amp;from=" target="_blank">NLM Customer Support</a>
          <a id="footer-usa" href="http://www.usa.gov/">
            <img alt="USA.gov logo" src="https://www.nlm.nih.gov/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 />
         
       </div>
    </div>

Responsive Breakpoint Summary

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

Examples below based on this Example Page

  1. 951 Pixels or Greater Example which opens a new window for this viewport
  2. 950 Pixels or less (920 to 950) Example which opens a new window for this viewport
  3. 919 Pixels or less (871 to 919) Example which opens a new window for this viewport
  4. 870 Pixels or less (800 to 870) Example which opens a new window for this viewport
  5. 799 Pixels or less (601 to 799) Example which opens a new window for this viewport
  6. 600 Pixels or less (482 to 600) Example which opens a new window for this viewport
  7. 481 Pixels or less (283 to 481) Example which opens a new window for this viewport
  8. 282 Pixels or less Example which opens a new window for this viewport

Click on this thumbnail which will open the overview image in separate window.
This image can be used as a reference in the table below
NLM Main Viewport - 951 pixels or greater

Responsive Breakpoint Summary Table

Page Element / BreakPoint
951 Pixels or Greater
950 Pixels or less (920 to 950) 919 Pixels or less (871 to 919) 870 Pixels or less (800 to 870) 799 Pixels or less (601 to 799) 600 Pixels or less (482 to 600) 481 Pixels or less (283 to 481) 282 Pixels or less
 
1.NIH logo image Present Present Present Present Present Smaller Smaller Smaller
2. U.S. National Library of Medicine image Present Wrap Text Wrap Text Wrap Text Wrap Text Smaller Smaller - Unwrap Text Smaller - Wrap Text
3.Starburst image Present Removed Removed Removed Removed Removed Removed Removed
4.Search box Present Present Above Drop Down Navigation menu with NLM Customer Support and Social Items Icon group Above Drop Down Navigation menu with NLM Customer Support and Social Items Icon group Center below U.S. National Library of Medicine image Center below U.S. National Library of Medicine image Center below U.S. National Library of Medicine image Center below U.S. National Library of Medicine image
5.NLM Customer Support Link Present Present Above Search box and Social Items Icon group Above Search Box. Right of the Social Items Icon group Above the Social Items Icon group Above the Social Items Icon group Removed (still available in the footer) Removed (still available in the footer)
6.Social Items icon group Present Present Above Drop Down Navigation menu with NLM Customer Support and Search box Above Search Box. Left of the NLM Customer Support Link Below the NLM Customer Support Link Below the NLM Customer Support Link Top right corner below U.S. National Library of Medicine image Top right corner below U.S. National Library of Medicine image
7. Drop Down Navigation menu Present Present Present Present Hamburger Menu - Left Hamburger Menu - Left Hamburger Menu - Left Hamburger Menu - Left
8.Divisional Branding Bar Header image Present Removed Removed Removed Removed Removed Removed Removed
9.Divisional Branding Bar Title Present Present Present Present Present Present Present Present
10.Divisional Branding Bar – Navigation links Present Present Present Present Left Left Left Left
11.Breadcrumb bar Present Present Present Present Present Present Present Present
12.Content Present Present Present Present Present Present Present Present
13.Footer Info section Present Present Present Present Left Left Left Left
14.USA.gov section Present Present Present Present Right Right Left Left
15.Footer Review section Present Present Present Present Left Left Left Left