Responsive Templates
BNL's webpage templates are responsive across the entire browser/device resolution spectrum. This means that the same page will display properly regardless of the device (desktop computer, tablet device, mobile phone, etc.) and browser viewport resolution that the page is rendered in.
The Lab's web pages are built on a css grid framework, which can be either a fixed-width grid (where the page content area is always 960 pixels wide) or a fluid grid (where the page content area shrinks and grows based on the browser's resolution).
How It Works
Every BNL web page contains a link to one master external stylesheet, which can be the fixed-width or fluid grid stylesheet:
/common/templates/global/css/BNL-960-fluid.css/common/templates/global/css/BNL-960.css
Each of these master external stylesheets imports all of the other stylesheets necessary to render the page in the standard BNL template.
Fluid Grid Style Sheet Imports
The /common/templates/global/css/BNL-960-fluid.css master stylesheet imports the following external stylesheets to the page:
@import url("/common/scripts/jquery/bxslider/jquery.bxslider.css");
@import url("/common/jquery/jquery-ui/latest/jquery-ui.css");
@import url("/common/scripts/jquery/shadowbox/shadowbox.css");
@import url("/common/icons/latest/css/font-awesome.min.css");
@import url("/common/jquery/sidr/latest/stylesheets/jquery.sidr.dark.css");
@import url("/common/templates/global/css/grid-fluid/960-fluid.css");
@import url("/common/templates/global/css/grid-fluid/bnl-master-styles.css");
@import url("/common/templates/global/css/grid-fluid/bnl-cms-styles.css");
@import url("/common/templates/global/css/grid-fluid/fluid-defaults.css");
@import url("/common/templates/global/css/grid-fluid/fluid-xsm.css") screen and (min-width:720px) and (max-width:850px);
@import url("/common/templates/global/css/grid-fluid/fluid-sm.css") screen and (min-width:850px) and (max-width:1100px);
@import url("/common/templates/global/css/grid-fluid/fluid-med.css") screen and (min-width:1100px) and (max-width:1300px);
@import url("/common/templates/global/css/grid-fluid/fluid-lg.css") screen and (min-width:1300px) and (max-width:1600px);
@import url("/common/templates/global/css/grid-fluid/fluid-xlg.css") screen and (min-width:1600px);
@import url("/common/templates/global/css/bnl-print.css") print;
Fixed-Width Grid Style Sheet Imports
The /common/templates/global/css/BNL-960.css master stylesheet imports the following external stylesheets to the page:
@import url("/common/scripts/jquery/bxslider/jquery.bxslider.css");
@import url("/common/jquery/jquery-ui/latest/jquery-ui.css");
@import url("/common/scripts/jquery/shadowbox/shadowbox.css");
@import url("/common/icons/latest/css/font-awesome.min.css");
@import url("/common/jquery/sidr/latest/stylesheets/jquery.sidr.dark.css");
@import url("/common/templates/global/css/grid-static/960.css");
@import url("/common/templates/global/css/grid-static/bnl-master-styles.css");
@import url("/common/templates/global/css/grid-static/bnl-cms-styles.css");
@import url("/common/templates/global/css/bnl-print.css") print;
Crossing the Desktop ↔ Mobile Threshold (720px)
In addition to supplying custom "mobile" styles with the mobile.css stylesheet, a number of things are done with Javascript to provide a tailored mobile browser experience. This code is located in the /common/templates/global/scripts/BNLscripts.js file, which is included on every BNL webpage.
The <body> tag will always contain a class attribute to indicate whether the page is being rendered in the desktop or in the mobile version as follows:
- <body class="body-desktop">
- <body class="body-mobile">
You can use this class atrribute to write CSS or jQuery/JavaScript code that's targeted to desktop or mobile browsers.
There are a number of "mobile-only" elements that are hidden on desktop browsers by default (with CSS display:none;) and are set to only display when the browser width is less than 720 pixels. These include the black mobile "top" bar, which contains the BNL logo and links to the navigation menu and search button; as well as the black mobile "bottom" bar, which includes a button/link to the top of the page.
In addition to those elements that are hidden by default and only visible on mobile devices, there are a number of "desktop only" elements that are hidden (or moved to alternate locations in the DOM) on mobile devices. For example:
- The global nav links are hidden by default on mobile and relocated to the bottom of the page
- The search box is hidden by default and appears when the search icon is clicked
- The standard BNL and DOE logos are hidden
- The local site navigation is hidden by default and moved down to the bottom of the page
- Only the top-level (primary nav links) of the local site navigation are available on mobile (the drop-doen and mega menu panels are never displayed)
- All grid divs are set to 100% width and stacked vertically (all content appears in a single column)
Using a combination of Javascript and CSS, all of these mobile changes are reversed (display properties reset and content moved back to its original location) when the device width crosses from mobile (<720px) back to the desktop width. To prevent excessive memory and processor consumption, the Javascript that runs when the window is resized is "throttled" to only fire once per second, which is why there is a slight delay in content rendering when resizing the browser across the desktop/mobile threshold.
It All Works 'Out of the Box'
...but additional customization is available
For a majority of your webpage content, you don't have to do anything for the content elements to render properly at different device widths. However, a number of responsive HTML elements and style classes are available that will automatically show/hide or modify how elements render between desktop and mobile browsers.
