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.
There are a number of different JavaScript options to choose between.
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.
core-nojquery.js includes all the components of core.js without the main jQuery library.
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:
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.
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>| endpoint | https://www.st-andrews.ac.uk/~cdn |
|---|---|
| package | dpl |
| version | 0.19.0 |
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.
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/0.19.0/styles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="https://www.st-andrews.ac.uk/~cdn/dpl/0.19.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.19.0/styles/ie.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->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.19.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.19.0/scripts/core-base.js" type="text/javascript" ></script>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:
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: