Page tree

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


titleRoot 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 -