University of St Andrews - Pattern library

A pattern library of components to use on digital services for the University of St Andrews.

How to use in your project

There are two ways to use the pattern library in your project.

1. Install via Node.js package manager (recommended)
2. Install using compiled files

1. Install via npm

This provides the most flexibility as you can choose to include only the components that you are using.

1. Install Node.js. If you have not already installed version 4.2.0 or later of Node.js, install the latest Long Term Support (LTS) version.
2. cd to the root of your project and check if you have a package.json file. If you do not have the file, create it by running: npm init.
3. Install Dart Sass - version 1.0.0 or higher.
4. Install the pattern library by running: npm install @stadigicomms/pattern-library --save. This will save the @stadigicomms/pattern-library to your node_modules folder

You can then directly reference individual components.

2. Install using compiled files.

You can also install the pattern library files via the CDN links, this includes all components.

Run the pattern library locally

The pattern library uses Fractal, to display components and their variants, which simplifies development and testing.

Install

To install your own local copy of the pattern library follow these steps:

1. Clone the repo on GitLab.
2. Ensure you have node.js installed.
3. Run npm install in the directory you have saved the files. This will install all the dependencies for the project.

Run tasks

The following tasks can then be run:

Build development files

These are the CSS, JavaScript files and static assets that Fractal references to present the various components.

Run:

npm run dev

This will clear the contents of the /public directory and then compile the updated files to this location.

Build production files

These are the optimised CSS, JavaScript files and static assets that should be included within a project.

Run:

npm run build

This will clear the contents of the /build directory and then compile the updated files to this location.

View the pattern library

This launches Fractal to let you browse the components at the specified local URL.

Run:

npm run browse

This will start a new instance of Fractal on a local URL which will be specified in the terminal. This task remains running in the background as any new changes to development files will then automatically be updated in Fractal.

Watch for new changes to development files

Run:

npm run watch

This will re-compile the CSS and JavaScript to the /public directory if any changes are made. This task remains running in the background and can be used in parallel with the Fractal task to automatically update development files.