In order to use the digital pattern library (DPL) you must link to the core CSS and JavaScript assets on each page. This page explains your options.
To quickly get set up and use the DPL, simply include the following lines of code within your web page or application.
Link to the CSS files (for screen and print) within <head>.
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/styles/print.css" rel="stylesheet" type="text/css" media="print" />
Link to the JavaScript file at the end of your <body> element.
<script src="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/scripts/core.js"></script>
</body>You should link to the CDN versions of the core files, if possible. This takes advantage of users having already cached a copy of the core assets and also makes your project easier to update in the future.
Links to the CDN assets have the form: <endpoint>/<package>/<version>/<path-to-asset>/.
| endpoint | https://www.st-andrews.ac.uk/~cdn |
|---|---|
| package | dpl |
| version | 1.0.0 |
The most up-to-date version of the DPL can be found at:
https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/If something prevents you from linking to the CDN files and you need build the core files from source, you may gain access to the source code via Git and then follow the contributing guide to set up Grunt to build the files. You may then copy the files in the `build` folder into your project.
This contains all the CSS needed to support the DPL: Bootstrap, Bootstrap theme, print styles and all patterns.
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/styles/print.css" rel="stylesheet" type="text/css" media="print" />There are three JavaScript options.
This option includes all the JavaScript needed in one file. It includes:
<script src="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/scripts/core.js" type="text/javascript"></script>This option is for those who need to use the DPL within an application that already pulls in the jQuery core library. This version includes:
<script src="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/scripts/core-nojquery.js" type="text/javascript"></script>This option includes only the JavaScript required for the patterns. It is for those who need fine control over which elements are included.
<script src="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/scripts/core-base.js" type="text/javascript"></script>If you use this version then you will need to include any required dependencies manually:
See the Gruntfile.js to determine which additional JavaScript pieces are rolled into core.js.
The following package is supported but not required:
The pattern library is agnostic of platform. Integrating the pattern library with a content management system such as WordPress or T4 must follow these rules:
The digital communications team must be consulted when using the pattern library with third-party applications, which often offer limited customisation. It may only be possible to use certain elements of the pattern library such as the header and footer. At the very minimum the digital communications team would expect the following patterns to be applied to a third-party application: