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.
- Install via Node.js package manager (recommended)
- 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.
- 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.
- 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
. - Install Dart Sass - version 1.0.0 or higher.
- Install the pattern library by running:
npm install @stadigicomms/pattern-library --save
. This will save the@stadigicomms/pattern-library
to yournode_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:
- Clone the repo on GitLab.
- Ensure you have node.js installed.
- 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.