GNB Design System Code Kit
The starter kit contains all the files you need to start building consistent, accessible experiences. It includes CSS, JS, web fonts, images, and a starter HTML page to help you get started quickly.
Join the mailing list
Get updates about version releases, new features, and upcoming developer workshops.
Add the CSS to your project
The stylesheet in the Design System Code Kit contains all the styles for everything in the design system including the grid system.
We prefixed our component class names with gnb- to prevent conflicts
with other platforms, allowing for safe integration with other libraries and frameworks.
HTML
<!-- Put this in the <head> of your pages -->
<link rel="stylesheet" href="../css/gnb-1.0.0" type="text/css" />
Add the javascript to your project
The GNB Design System Code Kit contains all the separate files for the components that use javascript, and a bundle file that contains everything in a single file, so you can implement it the way that works best for your project.
HTML
<!-- Put this just before the closing </body> tag in your pages -->
<script src="../js/gnb-1.0.0.js" type="text/javascript"></script>
Individual component javascript files
| Component | Filename |
|---|---|
| Accordions | gnb-accordions-1.0.0.js |
| Forms | gnb-forms-1.0.0.js |
| Main navigation | gnb-menus-1.0.0.js |
| Modals | gnb-modals-1.0.0.js |
| Progress bar | gnb-progress-1.0.0.js |
| Sticky top nav | gnb-sticky-top-1.0.0.js |
| Tabs | gnb-tabs-1.0.0.js |
| Tags | gnb-tags-1.0.0.js |
Self-host the fonts
If you need to host your fonts locally, you can download our webfonts package to use in your project.
Drop the 2 folders in the zip archive into the root of your project, and update the code in the
<head> with links to the CSS files in the webfonts package.
HTML
<!-- Put this in the <head> of your pages -->
<link rel="stylesheet" type="text/css" href="../css/gnb-fonts-1.0.1.css" />
<link rel="stylesheet" type="text/css" href="../css/fontawesome-6.4.0.css" />
Resources
The design system principles inform our approach to front-end web, allowing us to create responsive and accessible experiences that are optimized for use on any device.