Digital pattern library

Using the pattern library

In order to use the pattern library you have to include the assets. You have to make several decisions: type of assets and where to include the assets from.

Type: JavaScript

There are a number of different JavaScript options to choose between.

Combined JavaScript

core.js has all the JavaScript needed in one file. It includes Bootstrap's JavaScript code, jQuery and jQuery plugins in addition to pattern-related JavaScript.

No jQuery

core-nojquery.js includes all the components of core.js without the main jQuery library.

Pattern only JavaScript

A pattern-only version of the JavaScript file, core-base.js, does not include jQuery, Bootstrap JavaScript and other external JavaScript libraries. If you use that version then you need to include these dependencies manually:

See the Gruntfile.js to determine which additional JavaScript pieces are rolled into core.js.

The following package is supported by not required:

Type: Patterns or bootstrap-only CSS

There are two flavours of the CSS files that you can choose between. A combined CSS file, screen.css, that has all the CSS needed in one file, or a separate Bootstrap-only CSS file, screen-bootstrap-only.css. screen.css includes CSS for the patterns laid out in the library in addition to the underlying custom Boostrap theme. The screen-bootstrap-only.css includes only the Bootstrap theme, meaning that patterns such as the header, footer, etc are not supported.

Where: CDN or local

Including core files from the CDN

It is preferable to be using a CDN version 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
version0.23.0

Building core files from source

If you'd rather build the core files from source, you can do so by gaining access to the source code through git and then following the Contributing guide to setting up Grunt to build the files. You can then copy the files in the build folder into your project.

You need to include the following HTML code in your pages. The code uses the CDN, if you have built your own version of the files, then you can change the paths to link to those files instead.

Styles

<link href="https://www.st-andrews.ac.uk/~cdn/dpl/0.23.0/styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/0.23.0/styles/print.css" rel="stylesheet" type="text/css" media="print" />
<!--[if lt IE 9]><link href="https://www.st-andrews.ac.uk/~cdn/dpl/0.23.0/styles/ie.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

Scripts

If you want the combined JavaScript file, then include the following at the end of your<body> element.

<script src="https://www.st-andrews.ac.uk/~cdn/dpl/0.23.0/scripts/core.js" type="text/javascript" ></script>

If you want the pattern-only JavaScript file, then include the following at the end of your<body> element. Note: you must manually link to all required dependencies separately.

<script src="https://www.st-andrews.ac.uk/~cdn/dpl/0.23.0/scripts/core-base.js" type="text/javascript" ></script>

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 we would expect the following to be applied to a third-party application:

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 use the following principals: