Building a pattern library: wobbly boxes (part 1)

One of the biggest challenges of the UI design of the Marie Curie website came from the brand's 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 box

The most widely used graphic asset the refreshed Marie Curie visual identity is a an irregular shaped yellow frame. The frame was developed to help people easily identify a Marie Curie piece of communication, particularly in medical situations, where they are sometimes mistaken for NHS literature.

Frame examples
Framing device used in printed materials and social media

The yellow frame works when the piece of communication is rectangular – leaflets, posters, social media etc. but it was harder to translate the frame to the fluid layout of the Marie Curie website. One option was to invert the frame and use it as a simple container for content across the site. This retains the colour and the shape – key to maintaining consistency, but eliminates the need for a rectangular container, providing the fluidity needed on a responsive website.

Because the wobbly box was (as the name suggests) an irregular shape, this could only be achieved using background images. The box device also had many potential applications, from separating sections of content, to calls to action. This posed a risk to performance and ongoing maintenance, as the site could easily end up using many background images of multiple sizes and colours for different use cases, not to mention getting images to render consistently over a wide range of screen resolutions.

Wobbly box examples
Wobbly box device used on the website

Therefore, to create a robust UI pattern for the Marie Curie website, there were a number of things the wobbly box needed to do:

  1. Stretch to the full width and height of a container
  2. Have crisp edges with no fuzziness on high pixel density displays
  3. Be easy to change the background colour
  4. Not rely on multiple background images
  5. Be cross browser compatible back to IE 10 and provide a nice fallback for older browsers

Scaling SVG background images

I opted to use SVG images because (being vector based) I thought they could fulfill the first two requirements; scaling the width and height of any given container, while retaining the crisp lines of the wobbly box graphic on high pixel density displays. Initially I assumed I’d be able to use an SVG background-image property with background-size: 100% to stretch the SVG image to the size of the container.

SVG background image with background size set to 100%

However, I quickly discovered that SVGs don’t stretch beyond their natural aspect ratio. You need to delve into the SVG markup1 and reset the aspect ratio using the preserveAspectRatio="none" attribute.

SVG markup with and without the preserveAspectRatio attribute (spot the difference)

Once the preserveAspectRatio attribute is set to none, the SVG background will stretch out of its orginal aspect ratio to fill the container. This fulfills the first and second requirement of the wobbly box pattern. And it’s supported in the latest versions of Chrome, Safari and Firefox2 and in IE 9+.

SVG background image with preserveAspectRatio set to none and background size set to 100%

Changing the background colour

The third requirement for the wobbly box pattern was to have an easy way to modify the background colour — ideally by adding or switching a class. When you use SVG images inline with your HTML markup you can use CSS to manipulate the fill colour. Unfortunately this isn’t an option when importing SVGs using the background-image property in CSS. Instead I opted to make a sprite of my SVG, containing a path for each of the colours I wanted to use, then I manipulated the background-position property.

SVG image sprite markup
Using an SVG image sprite with switching classes to change the wobbly box colour

Reducing HTTP requests

Having fulfilled the first three requirements, I wanted to make sure my pattern was as fast to load as possible. Although it was only making a single HTTP request, I removed the need for the extra request by embedding my SVG image data directly into my CSS3 using data URIs. And, if you’re using Sass, there is a Compass helper that will encode your image file automatically.

Base 64 encoding a background image using SCSS
.wobbly-box {
  background-image: inline-image('http://localhost:4000/img/posts/wobbly-box.svg');
}
SCSS
.wobbly-box {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBmaWxsPSIjRkZDRDAwIiBkPSJNMjk2LjMgMjcxYzYuOS0zNC44IDIuNC01OC44IDAuMi05My4yIC0yLjgtNDIuNC0xLTQyLjcgMC4zLTk2LjQgLTMuMS0yNy4zIDIuNC00OS45LTMuMy02M0MyODUuNSAwIDI0My44IDIuMSAyMjkuMSAyLjEgMTUwLjggMS44IDEwMy42LTIuNCAzNS4zIDIgMzAuNyAyLjMgMjYgMi42IDIxLjkgMy45Yy0xMS4zIDMuNi0yMCAxMi45LTIxIDIwLjkgLTIuOSAyMi43IDIgNDUuNCAyLjQgNjguMSAxLjEgNTcuMi0xLjQgMTE3LjItMS4zIDE3Mi45IDAgOS45IDAuNiAyMC45IDExLjggMjcuNyAxMC45IDYuNyAzOS42IDYuNyA1NC43IDYuNCA0NC4zLTEgODguNiAwLjYgMTMyLjgtMC40QzIzMi4xIDI5OC44IDI4OS45IDMwNCAyOTYuMyAyNzF6Ii8+PC9zdmc+');
}
Compiled CSS

Inline data URIs don’t decrease the size of your image file, you’re just moving data that would be requested seperately into your compiled CSS file, so be sure to optimize your images4 as much as possible before converting. Data URIs are supported in the latest versions of Chrome, Safari and Firefox and in IE9+.

Setting fallbacks and print styles

Finally I used Modernizr to provide a simple fallback for browsers that don’t support SVG by applying a background-color. I also added a print reset, which removes images and background colours when printed.

Fallback styles for browsers with no SVG support and print styles

There we have our wobbly box — a flexible container pattern using a vector based background image. It scales to the size of the content, it’s easy to switch the colour, there are no additional HTTP requests and there is a graceful fallback for browsers without SVG support.

I’ve subsequently developed this pattern further, replacing Base 64 encoding with URL encoding. This gives you the option to manipulate the background colours using Sass functions, which I discuss in part 2 of this post.


Notes

  1. More information about creating and optimising SVGs, Using SVG, CSS Tricks.
  2. Firefox requires you to declare both the width and height values for the background-size property.
  3. I’ve since revised my thinking on Base 64 encoding as discussed in part two of this post.
  4. Some handy SVG optimisation tools SVG Editor, Peter Collingridge, SVG OMG, Jake Archibald.