Implementation Details
Requirements
-
jQuery 2.2.4:
- Must be included before
script.js
. - UND recommends using a CDN.
- UND uses the following CDN for jQuery 2.2.4:
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
-
Compatibility with newer versions of jQuery has not been tested and cannot be guaranteed.
- Must be included before
Focus Styles
Our focus styles (applied when tabbing) require JavaScript and use a plugin called
What Input. What Input is bundled with the script.js
file that we provide. However, if a third party choses to not include script.js
file, What Input should be installed for proper focus styles and focus style behavior.
Fonts
As of v2.0.0, as long as a third party service/app is hosted under UND's domain, https://[*.]und.edu
, there should be no additional modifications to get official UND fonts to display.
If a third party service/app is not hosted under UND's domain, UND's official fonts will not be available. When this occurs, the third party will need to provide our official fonts themselves or provide the appropriate fallback fonts outlined below.
If a third party is implementing fallback fonts, the third party may want to consider
removing font code from style.css
to remove superfluous requests to font foundaries that will fail.
Fallback Fonts
UND's fallback fonts, Oswald Medium and Trocchi, are available from Google Fonts and typography websites like FontSquirrel. Arial is a websafe font that does not need to be imported.
Official Font | Fallback Font |
---|---|
Trade Gothic ABCDEFGHIJKLMNOPQRSTUVWXYZ |
Oswald Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ |
Sentinel Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ |
Trocchi Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ |
Helvetica Neue ABCDEFGHIJKLMNOPQRSTUVWXYZ |
Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ |
CSS Font Stacks
Trade Gothic | 'Trade Gothic', 'Oswald Medium', 'Oswald', Arial, sans-serif |
---|---|
Sentinel Medium | 'Sentinel SSm A', 'Sentinel SSm B', 'Trocchi', 'Georgia', serif |
Helvetica Neue | 'Helvetica Neue', 'Helvetica', Arial, sans-serif |
Form Elements
The following form elements require our script.js
JavaScript file to be included to effectively replicate our form styles:
- File type inputs
- Select
- Multiselect
- Radio
- Checkbox
SVG Icons
Hosted
If you are having trouble with getting our SVG icons to display, please contact us.
Self-Hosted
The template bundle includes a copy of our SVG icons, they are located in svgstore.svg
. The icons are loaded via JavaScript. The path to the svgstore.svg
file in script.js
will need to be updated.
Find and replace the following code with the path to the location of the svgstore.svg
on your server.
:"//und.edu/_resources/platforms/tpt/v1.0.0")+"/img/svgstore.svg";
An updated path might look something like this:
:"//example.com/assets/")+"/images/svgstore.svg";