CSS stylesheets should always be included between the <head> and </head> tags in your HTML pages.
Assets
Styles
MAX Custom Bootstrap
Our standard UI library is a customized version of the Bootstrap 3 framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
To include the MAX Custom Bootstrap stylesheet 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">If you're using any of Bootstrap's interactive features (such as tabs or modals), you'll also need the MAX Bootstrap JavaScript library. To include that in your project, add this line of code to the footer of your pages:
Bootstrap
<script src="//design.max.gov/assets/scripts/max-bootstrap.min.js"></script>MAX Fonts
To maintain a consistent user experience and the MAX brand, it is preferable to use standard MAX typefaces in all MAX applications. By including this stylesheet, you'll have access to use them in your CSS code.
If you're using the MAX Custom Bootstrap stylesheet, you don't need this stylesheet — our typefaces will work by default.
To include the MAX Fonts stylesheet in your project, add this line of code to the <head> section of your pages:
MAX Fonts
<link href="//design.max.gov/assets/styles/max-fonts.min.css" rel="stylesheet">You can use them in your CSS like this:
Trajan Pro
font-family: "Trajan Pro", Georgia, "Times New Roman", Times, serif;Open Sans
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;Open Sans Condensed
font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;MAX Guides
The MAX Design Team uses an additional common library to build guides like this one.
To include the MAX Guides stylesheet 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">MAX Guides also use a very small bit of JavaScript. To include that 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>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.
To include a customized (fully accessible) MAX stylesheet for Prism 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">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>