Introducing the new design system

David Kindness
Friday 17 September 2021

The University of St Andrews design system and the accompanying new pattern library, that it supports, aims to build upon the success of the current digital pattern library (DPL).

The DPL began development at the end of 2014 and has been regularly updated since then to support the University’s primary web site, alongside many associated sites and web applications. While continuous improvement is a core principle that we follow, with the advancement of web technology it was only a matter of time before a replacement system made more sense.

The DPL relies heavily on a deprecated version of Bootstrap as a foundation on which all the patterns and layouts have been built. jQuery is used for a sizeable proportion of the JavaScript. While these tried and tested technologies still did the job, they had several issues:

  • Large single compiled CSS and JavaScript file sizes have continued to grow which impacts performance and SEO.
  • ‘Baked in’ Bootstrap and jQuery code causes conflicts with modern web application frameworks, reducing uptake by other development teams.
  • Lack of flexibility forces other developers to maintain their own parallel DPL versions.

Taking inspiration from leading examples of large-scale pattern libraries and design systems, such as GovUK’s design system and Google’s Material Design, we have separated the pattern library code from the guidance and documentation of the design system. This allows different methods to be used to construct and deploy each of these while keeping a tight focus on their differing key objectives.

Pattern library

The new pattern library consists of a set of components alongside a streamlined core of layouts, helpers and third-party packages. The pattern library is built in a modular fashion making use of the modern features provided by Sass and JavaScript. This modular approach allows developers to only include the components that they need in their project, resulting in significant performance gains.

The pattern library includes the Fractal documentation tool to assist in development and maintenance of the components, while each version of the pattern library is also published to npm. The pattern library will grow as new components are added, with the intended aim to replace the current DPL with this new resource.

Design system

The new design system is a detailed documentation resource for both developers and content creators who are creating or maintaining University web sites and applications. It combines technical information on how to correctly use the new pattern library alongside guidance on building accessible user interfaces that follows best practice and the University of St Andrews brand.

The design system site itself makes use of the pattern library as a dependency via npm and extends this to include application specific CSS and JavaScript – acting as a proof of concept that other developers could follow.

The digital communications team have a lengthy backlog to grow this resource to include all pattern library components, further design guidance and helpful examples.

Get involved

To find out more information about either of the new projects, or to request new features, please contact the digital communications team at [email protected].

Related topics