With some exceptions, JavaScript should be included in the footer of your page, just before the </body> tag in your HTML pages. Certain scripts (where noted) do require being loaded between the <head> and </head> tags instead.
Assets
Scripts
MAX Custom Bootstrap
Our standard UI library is a customized version of the Bootstrap 3 framework. If you're using any Bootstrap-specific features, you'll also need the Bootstrap JavaScript library. (Note: this is simply a MAX-hosted version of the standard Bootstrap JavaScript library.) You'll also need jQuery. To include them in your project, add these lines of code to the footer of your pages:
Bootstrap
<script src="//design.max.gov/assets/scripts/max-bootstrap.min.js"></script>
<script src="//design.max.gov/assets/scripts/jquery.min.js"></script>You'll also need the MAX Custom Bootstrap stylesheet. To include that in your project, add this line of code to the <head> section of your pages:
Bootstrap
<link href="//design.max.gov/assets/styles/max-bootstrap.min.css" rel="stylesheet">MAX Validation
If your project needs to validate form input, you can use the custom MAX Validation library. This library is based on Validate.js, but includes additional functions for validating common form field types such as dates. To include this in your project, add this line of code to the footer of your pages:
Validate.js
<script src="//design.max.gov/assets/scripts/max-validation.min.js"></script>MAX Guides
The MAX Design Team uses an additional common library to build guides like this one. To include the MAX Guides JavaScript in your project, add this line of code to the footer of your pages:
MAX Guides
<script src="//design.max.gov/assets/scripts/max-guide.min.js"></script>You'll also need the MAX Guides stylesheet. To include that in your project, add this line of code to the <head> section of your pages:
MAX Guides
<link href="//design.max.gov/assets/styles/max-guide.min.css" rel="stylesheet">Prism
If your project displays code for developers to view, it's very helpful to highlight your code. Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
Prism uses JavaScript to highlight syntax. To include that in your project, add this line of code to the footer of your pages:
Prism
<script src="//design.max.gov/assets/scripts/prism.min.js"></script>You'll also need the customized (fully accessible) MAX stylesheet for Prism in your project. To include that in your project, add this line of code to the <head> section of your pages:
Prism
<link href="//design.max.gov/assets/styles/max-prism.min.css" rel="stylesheet">jQuery
jQuery is a fast, small, and feature-rich JavaScript library. Because MAX applications must support older browsers, we use the most recent version of jQuery 1.x. (jQuery 2.x does not support Internet Explorer 6/7/8.) To include jQuery in your project, add this line of code to the footer of your pages:
jQuery
<script src="//design.max.gov/assets/scripts/jquery.min.js"></script>Modernizr
To use newer web technologies in our applications, we must build in fallbacks (“polyfills”) for older browsers that do not support these features. Modernizr is a collection of superfast “detects” which run as your web page loads and tell you what the user's browser supports. To include Modernizr in your project, add this line of code to the bottom of the <head> section of your pages:
Modernizr
<script src="//design.max.gov/assets/scripts/modernizr.min.js"></script>HTML5 Shiv
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy browsers such as IE 6-8. To include the HTML5 Shiv in your project, add these lines of code (including a conditional comment that prevents the script from loading in browsers that don't need it) to the bottom of the <head> section of your pages:
HTML5 Shiv
<!--[if lt IE 9]>
<script src="//design.max.gov/assets/scripts/html5shiv.min.js"></script>
<![endif]-->Respond.js
Respond.js is a fast, lightweight polyfill for min/max-width CSS3 Media Queries for legacy browsers such as IE 6-8. This is a key tool to allow us to build responsive web applications that still work in older browsers. To include Respond.js in your project, add these lines of code (including a conditional comment that prevents the script from loading in browsers that don't need it) to the bottom of the <head> section of your pages:
Respond.js
<!--[if lt IE 9]>
<script src="//design.max.gov/assets/scripts/respond.min.js"></script>
<![endif]-->