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 (http://fractal.build) from Clearleft.
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.
2) Clone the pattern library repo (https://gitlab.bath.ac.uk/digital/lens-pattern-library)
3) CD to the directory and install Fractal in your project
4) Run up the Fractal server on the command line. The optional
--sync flag activates BrowserSync functionality.
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
Adding style guide documentation
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.
1) Stop the Fractal server (if running).
2) Generate a static version of the pattern library with the following command:
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.
Lens uses a pre-set variable (
') to standardise and simplify image paths declared in CSS.
This variable is set in
- Change the path in the variable to
- Compile Lens with the standard Grunt command
- Rename the compiled
/build/lens/cssdirectory in the pattern library
- 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.
- Using an SFTP client, log in to www-admin or digilin-02 with your university credentials
- Navigate to
- Copy the files from your local version's
/builddirectory into the remote
- Check out your handiwork on http://www.test.bath.ac.uk/lens-design-system
Pivotal board for the Lens design system - https://www.pivotaltracker.com/n/projects/2162380