Using the pattern library

In order to use the digital pattern library (DPL) on your website, you must link to the core CSS and JavaScript assets on each page of the site. This page explains your options.

Integration steps

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.26.0/styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/1.26.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.26.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>/.

Endpoint
https://www.st-andrews.ac.uk/~cdn
Package
dpl
Version
1.26.0

The most up-to-date version of the DPL can be found at:

https://www.st-andrews.ac.uk/~cdn/dpl/1.26.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 can access 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.26.0/styles/screen.css" rel="stylesheet" type="text/css" media="screen" />   
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/1.26.0/styles/print.css" rel="stylesheet" type="text/css" media="print" />

JavaScript

There are three JavaScript options.

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: