Design System
v1.5.0
NDS on GitHub
Migration Guide
Updated: March 3, 2021
Overview
This page will explain how pre-existing websites can leverage the NIAID Design System (NDS) to become compliant with NIAID's digital policies and branding. If you are looking to build a new site from scratch, be sure to check out the Getting Started page for more information.
Starting the Migration Process
The first step in migrating your pre-existing site to NDS is to include the global CSS and JS files in your site.
Depending on the architecture of your digital property, where you add these files in code may vary. With plain HTML, the CSS file should be linked to from the <head> of the HTML document, and the JS files should be linked to just above the closing </body> tag.
CSS
<link rel="stylesheet" href="PATH-TO-CSS/nds-min.css" media="all" />
JS
<script src="PATH-TO-JS/js/libraries/jquery/jquery.min.js"></script>
<script src="PATH-TO-JS/js/libraries/select2/select2.full.min.js"></script>
<script src="PATH-TO-JS/js/libraries/materialize/materialize.min.js"></script>
<script src="PATH-TO-JS/js/libraries/bootstrap/bootstrap.bundle.min.js"></script>
<script src="PATH-TO-JS/js/libraries/match-media/match-media.js"></script>
<script src="PATH-TO-JS/js/libraries/datatables/datatables.min.js"></script>
<script src="PATH-TO-JS/js/libraries/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="PATH-TO-JS/js/libraries/uswds/uswds.min.js"></script>
<script src="PATH-TO-JS/js/global/nds-min.js"></script>
</body>
Adding the Header & Footer
The two most important components for NIAID brand compliance are the header and footer. The raw HTML markup for these two components is found below and can be copied directly into your project regardless of the front-end architecture. NDS may also offer these patterns as React, Angular, or Vue components in the future.
Header Component
Footer Component
Choosing Theme Styles
There are five theme dimensions that you can customize after adding the NDS CSS stylesheet to your website: Fonts, Body Fonts, Colors, Shadows, and Corners. The following sections describe your options for each and how to apply your choices to your website.
Developing with Typography
NDS users can select font families for the headings and body of a page. For the headings, there are four available fonts to choose from — Public Sans, Roboto, Martel, and Merriweather. To apply one of these fonts to your headings, add the appropriate class to the <body> tag:
- Public Sans:
style--headings--public-sans - Roboto:
style--headings--roboto - Martel:
style--headings--martel - Merriweather:
style--headings--merriweather
For body font, NDS provides two options: Public Sans and Roboto. To apply one of these fonts to your body, add the appropriate class to the <body> tag:
- Public Sans:
style--body--public-sans - Roboto:
style--body--roboto
You may download any of these font families below:
Developing with Colors
Currently, NDS users have three color palette options to choose from. More palettes may be available in the future. Add the corresponding body class for your desired palette:
Theme 1 (Default):
style--colors--theme-1
#157B8D
Primary
#497951
Secondary
#262626
Tertiary
#75C3AC
Accent
Theme 2:
style--colors--theme-2
#586FAB
Primary
#247BA0
Secondary
#244D56
Tertiary
#FAB952
Accent
Theme 3:
style--colors--theme-3
#14675A
Primary
#423E63
Secondary
#123B56
Tertiary
#79A9D1
Accent
Developing with Shadows
NDS supports both flat and shadowed visual style. By default, NDS is configured with shadowing. If flat design is desired, remove the following class from the body:
style--shadows
Developing with Corners
There are three corner styles available with NDS: Sharp, Semi-Rounded, and Fully-Rounded. To apply one of these corner styles to your site, add the appropriate body class:
- Sharp:
style--corners--straight - Semi-Rounded:
style--corners--semirounded - Fully-Rounded:
style--corners--rounded
Adding Additional NDS Components
After you include the CSS and JS files in your project and add the header and footer, you may want to leverage other NDS components as well. Check out the Components page for HTML code snippets of NDS patterns, as well as detailed information on how to use them.
Ask Questions, Report Issues, Stay Informed
For questions about the NIAID Design System or to report issues, please visit the Issues tab of the NDS repository on GitHub. To get updates on NDS features and changes, please add yourself as a "Watcher" on the NDS GitHub repository.
NDS on GitHub