Digital pattern library

Using the pattern library

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.

Sections


Quick start

To quickly get set up and use the DPL, simply include the following lines of code within your web page or application.

CSS

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" />

JavaScript

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>

Link to core files

CDN path

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>/.

endpointhttps://www.st-andrews.ac.uk/~cdn
packagedpl
version1.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/

Build core files from source

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.


CSS

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" />

JavaScript

There are three JavaScript options.

Everything (default)

This option includes all the JavaScript needed in one file. It includes:

  • jQuery core
  • jQuery plugins
  • Bootstrap JavaScript
  • Patterns JavaScript
<script src="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/scripts/core.js" type="text/javascript"></script>

No jQuery

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:

  • jQuery core
  • jQuery plugins
  • Bootstrap JavaScript
  • Patterns JavaScript
<script src="https://www.st-andrews.ac.uk/~cdn/dpl/1.0.0/scripts/core-nojquery.js" type="text/javascript"></script>

Patterns only

This option includes only the JavaScript required for the patterns. It is for those who need fine control over which elements are included.

  • jQuery core
  • jQuery plugins
  • Bootstrap JavaScript
  • Patterns JavaScript
<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:

  • jQuery DataTables (v1.10.13) is supported and the digital communications team provides additional JavaScript and CSS to match the pattern library. See DataTables for more information.

Content management systems

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 core CSS and JavaScript files must be referenced from the CDN. A local copy must not be stored within the content management system.
  • Naming conventions for the patterns must be mirrored in the content management system themes and templates. If the name of a pattern is changed, this must also be updated in the content management system.
  • The code of a pattern (HTML, CSS, JavaScript) must not be added to or modified, other than to allow the content to be edited, for example, by the addition of tags to indicate editable areas.

Third-party applications

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: