EPAFiles: Web Design
Note: EPA no longer updates this information, but it may be useful as a reference or resource.
EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.
Scripting Links of Note
A primary goal of the EPA Web Design is to stop mixing presentation with structure, making it easier to rebrand and change the look-and-feel throughout the site simply by changing the style sheet. Further separation is possible by avoiding inline styles and classes, and using inheritance and contextual selectors.
This means—unless there are special circumstances—all we ever need to see in EPA's Web template:
(Note, all JS should be linked at the bottom of the HTML, just before the closing
</body> tag. Placing scripts here will speed up epa.gov for our readers. If your scripts are linked at the top, it would be good practice to adjust your templates.)
The second script is a set of core EPA functions, described below.
- web pages aren't dependent on it to work: it is an enhancement
- functions first check to see if an object is available. If not, then it fails silently.
- does not rely on browser specific extensions
- is loaded last, so the content is available for reading, while the script downloads
a elements), loop through all of the links in the page and apply the events accordingly, e.g. if the element has a specific class name.
Core EPA Functions
- Inserting the "Page last updated" date and the page URL into the footer
- Providing a simpler way of creating a "New!" icon, using the
- Targeting site-wide announcements to specific pages:
- EPA, AA/RA and Program Office home pages
- All pages
- Providing alternate colors for data tables rows.
- Suggesting search terms when you use the search box
- Rendering the Share links in the upper right of every page (What is this?)