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.
core-nojquery.js includes all the components of
core.js without the main jQuery library.
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.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:
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.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]-->
<body> element. Note: you must manually link to all required dependencies separately.
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: