Building a pattern library: wobbly keylines

One of the biggest challenges of the UI design of the Marie Curie website came from the new graphic assets. These included a selection of irregular shapes, framing devices and keylines that helped to make up the charity's new visual identity. Another challenge was the colour palette — mainly yellow and orange, not ideal for creating accessible contrast levels in the user interface.

This mini-series of posts covers how I dealt with some of the more challenging assets from Marie Curie’s new visual identity and implemented them as reusable UI patterns on the website.

The wobbly keyline

In addition to the yellow frame discussed previously, another widely used asset in the new Marie Curie visual identity is a handrawn keyline. This is often used within the yellow frame or overlaid on to images, and gives a subtle sense of hand rendering, which can be increased or decreased according to the formality of the communication.

Frame examples
Keyline device used in printed materials and social media

I wanted to use the keyline as a stand alone device for grouping content more subtley than a box of solid colour. Similar to the wobbly box, in order to create a robust UI pattern for the Marie Curie website, there were a number of things the wobbly keyline box needed to achieve:

  1. Stretch to the full width and height of a container without distorting the keyline
  2. Hold any amount of content without distorting the keyline (fluid width and height)
  3. Have crisp edges with no fuzziness on high pixel density displays
  4. Be easy to change the keyline colour
  5. Not rely on multiple background images
  6. Be cross browser compatible back to IE 10 and provide a nice fallback for older browsers
Frame examples
Wobbly keyline box device used on the website

Having successfully implemented SVG background images in the wobbly box pattern, I was confident that a similar approach would work for the wobbly keyline.

Trying (and failing with) background image

The main problem was scaling the 2px keyline consistently across variable width and height containers without distorting it. At first I hoped the stroke width of the SVG path might be unaffected when forced out of its orginal aspect ratio. However, as you can see below, the SVG scaled exactly as you would expect from a bitmap image, distorting the stroke width.

Keyline using SVG background (stroke doesn't scale)

Trying again with border image

Then I tried playing around with the border-image property, at first glance, this seemed to be designed to solve exactly this sort of problem1. I thought if I played around enough with the border-image-slice property I might be able to get close to what I wanted, but no matter what I tried, I ended up with the same stroke width distortion I experienced using background-image. And it wasn’t supported below IE 11.

Keyline using SVG border image (stroke still doesn't scale)

It was beginning to look like the wobbly keyline was only going to be practical for containers with a fixed aspect ratio. This would limit it’s usefulness and make the pattern difficult to maintain — you’d need a different SVG path for every aspect ratio of keyline box. It would get messy very quickly, and even then getting the stroke width consistent across viewports would be almost impossible.

Revisiting the wobbly box pattern

I thought back to the wobbly box pattern I created previously and theorised if I added margin or padding of 2px, then overlaid the same background shape again in a different color, I might be able to fake the consistent stroke width I wanted.

Overlaying wobbly box pattern to create a wobbly keyline box

By extending the wobbly box pattern I was able to create the exact effect I was after. The 2px keyline remains at a consistent width across all container widths and heights. It would also be easy change the keyline width should I wish to, by increasing the border-width. And, by using the existing wobbly box pattern all the colour variations and fallback styles are already built in2.

There are a few limitations to this method, the main one being that the overlay box needs to have an opaque fill colour to create the keyline effect. For example, it wouldn’t be possible to have a transparent box with a keyline overlaid on to an image. But as the Marie Curie website is mostly on a white background this isn’t a major problem for me.

If you look closely at the SCSS above, you’ll see the wobbly keyline adds another layer of complexity to the original wobbly box pattern. When we mix in the colour switching classes and the SVG background image sprite, there is still a maintenance task here to manage those assets. The next post in this series will look at how we can reduce that maintenance overhead even further, by using URL encoding and Sass functions to remove the need for the background image sprite and tidy up the SCSS.


Notes

  1. Border image, CSS Tricks.
  2. See the previous post in this series, The Marie Curie pattern library: wobbly boxes (part 1).