Design System
v1.5.0
NDS on GitHub
Getting Started
Thank you for your interest in using the NIAID Design System (NDS). This page contains information on how to get started with NDS.
Quick Start
The fastest way to start using the NIAID Design System is to download and add the NDS CSS and JS files to your HTML.
CSS
Download the Global NDS CSS file and include the following code in the <head> of your HTML.
<link rel="stylesheet" href="PATH-TO-CSS/nds-min.css" media="all" />
JS
The NIAID Design System relies on several third-party libraries to enhance both the user experience and the accessibility of our web components.
The bundled version of NDS's JavaScript is needed for many of our components to operate properly. This version includes several initializations of third-party library components and relies on jQuery to function. To use this version, download the NDS Bundled JS file and the accompanying third-party libraries. Include the scripts right before the closing </body> tag.
<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/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/stickybits/stickybits.min.js"></script>
<script src="PATH-TO-JS/js/global/nds-min.js"></script>
</body>
Refer to the Components page to find out which components rely on third-party libraries.
Components
The NIAID Design System is comprised of a comprehensive set of flexible web components. These components can be combined and reused to build any number of policy- and brand-compliant websites. Once you have included the NDS CSS and JS files, you can leverage NDS components. Visit the Components page for documentation on available components and usage guidelines.
Static Site Builder
The Static Site Builder is a tool that is designed to rapidly create static HTML websites powered by the NIAID Design System. The tool is built using Pattern Lab, a framework based on the Twig templating language and Atomic Design principles. The Static Site Builder is perfect for small websites with a simple navigational structure and content that changes infrequently. The Static Site Builder is easy to use, and does not require a full development team to make simple websites.
NDS Drupal Theme
If your website is more complex and hosts a large amount of rapidly changing content, you may need a content management system (CMS). NDS supports Drupal 9 development through our own NDS Drupal Theme. Using Drupal with your website is complex and will likely require significant developer effort and time. Like any Drupal website, building the theme is only one component of the development involved.
Resources
CSS & JS
Fonts
Design Files
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