Page tree
Skip to end of metadata
Go to start of metadata

The Lens pattern library and style guide have been designed as a reference point for anyone working with pages that use Lens.

The pattern library lists existing components in the design system, along with notes on implementation, HTML structure and example layouts using featured components.

The style guide details the core elements of the design system - grid structure, colour palette and typography.

Where is it?

The Lens pattern library and style guide can be found at:

Installing the pattern library and style guide locally

The Lens pattern library and style guide runs on Fractal ( from Clearleft.

Step-by-step instructions

Required Node and NPM versions

Make sure that you have an up-to-date version of both Node and NPM. The current build of Fractal requires Node.js v4.4.7+ to run.


1) Install the Fractal command line tool. This makes managing Fractal a lot easier.

npm install -g @frctl/fractal

2) Clone the pattern library repo (

git clone

3) CD to the directory and install Fractal in your project

npm install --save @frctl/fractal

4) Run up the Fractal server on the command line. The optional --sync flag activates BrowserSync functionality.

fractal start --sync

5) Visit http://localhost:3000 to view your local version of the pattern library and style guide

Working with Fractal and the in-built server

General notes on working with Fractal

  • If BrowserSync is running (see step 4 of the installation instructions above) then changes are implemented immediately upon saving the file.
  • Config changes requires a Fractal server restart to work.

Adding a new component

Coming soon!

Adding style guide documentation

Coming soon!

Exporting a static version of the pattern library

While creating new components or adding documentation, the simplest way to work with Fractal is to use the in-built server. Additions are immediately synced to your browser, making it quick and easy to spot any issues.

However once a feature, component or documentation is complete you will want to 'build' a static version of the pattern library and style guide ready for deployment.

Step-by-step instructions

1) Stop the Fractal server (if running).

2) Generate a static version of the pattern library with the following command:

fractal build

This will create a new directory in the root of the project called /build. The static version of the pattern library is self-contained - everything you need is in this directory.

Root relative image paths not working in the pattern library

Due to Lens CSS image paths being root relative (/lens/universal/), background images declared in CSS, such as the University logo, fail to appear in the static version of the pattern library.

Current workaround

Lens uses a pre-set variable ($image-url: '/lens/universal/images') to standardise and simplify image paths declared in CSS.

This variable is set in /lens/universal/scss/_structure.scss.

  1. Change the path in the variable to ../../lens/universal/images
  2. Compile Lens with the standard Grunt command
  3. Rename the compiled site.css to style.css
  4. Copy style.css into the /build/lens/css directory in the pattern library
  5. Restore the original path in the variable so all images in Lens don't break!

This workaround is temporary and will be replaced with an automated build system ASAP.


Uploading to the staging environment

The staging environment for the Lens Design System are hosted on the staging server.

  1. Using an SFTP client, log in to www-admin or digilin-02 with your university credentials
  2. Navigate to /www/vhosts/bath-dev/lens-design-system
  3. Copy the files from your local version's /build directory into the remote /lens-design-system root
  4. Check out your handiwork on

Next steps

Pivotal board for the Lens design system -

  • No labels