Using the pattern library

Instructions for the different methods of using the pattern library in your web site or application.

Usage

The pattern library provides a consistent visual brand and approach to design for University of St Andrews web sites and applications. It consists of a set of stylesheets, JavaScript and static assets that collectively can be used to build entire digital experiences - using the core design and component elements detailed in the design system.

There are a number of different ways to use the pattern library in your project.

Link to compiled assets

The simplest method is to link directly to the latest version of the pattern library assets hosted on the University's CDN.

  • CSS https://st-andrews.ac.uk/~cdn/sta-pattern-library/X.Y.Z/build.css
  • JavaScript https://st-andrews.ac.uk/~cdn/sta-pattern-library/X.Y.Z/build.js

A single stylesheet and single JavaScript file contain the compressed compiled code for all components and core features of the pattern library, where X.Y.Z represents the version number of the pattern library to be used. It is recommended to regularly update to using the most recent version to take advantage of any accessibility of usability improvements.

Once included, simply refer to the design system for the correct HTML markup and CSS classes to display the desired layouts and components.

Integrate the pattern library

Including the source code directly into your project provides a number of benefits, over linking to the full compiled assets.

  • Only include the components that you need to optimise your CSS and JavaScript.
  • Make use of existing variables and functions to extend the pattern library into your project.
  • Use the Nunjucks macros, if supported by your project, to greater separate content from layout for the components.

Option 1: install via npm

The pattern library is available as a package on npm - @stadigicomms/pattern-library. To install the package as a dependency for your project, run the following command
npm i @stadigicomms/pattern-library.

The design system documentation website is itself built using this method.

Option 2: download from Gitlab

Alternatively you can also download the source files from the repo hosted on University of St Andrews Gitlab - sta-pattern-library (University network connection required).

Version control

Both the design system and the pattern library follow the principles of semantic versioning to manage updates and show when breaking changes may occur.

It is important to note that the pattern library and the design system documentation website are separate entities, with their own version numbering. For example the design system may undergo numerous version updates to its documentation, all while still using the same version release of the pattern library.

The design system documentation website will always reference the latest stable release of the pattern library.