Launch site: spectra.matthewleedesign.com
In 2015, Comcast launched Spectra, a new company dedicated to hosting live entertainment events across the country. I worked with Philadelphia-based agency 160over90 to help translate their static designs into responsive front-end code. Although the site only had three unique templates, the design pushed the limits of just how much CSS could behave like “Photoshop in the browser,” making this one of my more challenging front-end projects to date.
The design included a set of vector icons that would be used throughout the site, appearing in different colors on different pages. I decided to render these as SVG icons, combining all vector art into a single sprite using Icomoon. Inline SVG would let me control their appearance with CSS, but I wanted to avoid importing a large block on vector code at the top of each page. I instead used the SVG sprite as external resource, which makes for cleaner HTML and allows the file to be cached by the browser. Since external SVG resources aren’t supported in Internet Explorer, I added the script SVG for Everybody, which injects the SVG inline for browsers that need it.
Using CSS to apply fill colors to inline SVG is straightforward, but the design called for the icons to be filled with one of four different gradients. This was more of a challenge, since SVG didn’t allow the gradients to be applied through either background-image or background-clip. The solution was to define the four different gradient fills in a separate SVG defs file, then apply them through CSS by referencing each gradient’s unique ID.
Headline text also used the same gradient swatches. This was relatively easy in Webkit browsers, which support background-clip on text. However, this property degrades quite poorly in browsers that don’t support it. By carefully building a mixin with browser-specific properties, I was able to guarantee an acceptable fallback whenever background-clip wasn’t supported. Similarly, I added solid fallbacks for the SVG icons as well.
The site’s hero images were comprised of black-and-white photos and gradient overlays, mixed together using Photoshop blending modes. We wanted these overlays to be applied through CSS, allowing the client to simply upload a black-and-white photo in the background. Although browsers are starting to offer blend modes, the support still varies widely. The desired blend mode (color) wasn’t yet supported in Sarafi, but we found that hard-light was a close and acceptable fallback. Internet Explorer doesn’t offer any support for blend modes, so we relied on purely using a lower-value opacity for the gradient overlay.
Another layer of complexity was that each page had its own color scheme: blue-red, orange-yellow, blue-yellow, and orange-blue. The design called for all the gradient-filled elements to completely change their palette on each page of the site. To accomplish this, I built a “master mixin” containing three variable arguments: the two colors in the gradient, and the fallback color to be used if gradients weren’t supported. Within that mixin, I styled the color properties of any page elements that would rely on this flexible color scheme. I then wrote a series of classes that, when added to the body element, would apply a page-wide change in color.
Spectra’s client list contained a good deal of information for a mobile screen size, even when using a responsive table pattern that styles table cells like block items. In order to allow for better progressive disclosure, I added a simple toggle pattern that lets mobile users read more about each client by tapping their name. More and more information is gradually displayed as the screen widens, until full-width tables can fit comfortably and the toggle pattern is no longer needed.
In order to help Spectra’s in-house team maintain the code we were delivering to them, I constructed a front-end styleguide. It documents a wide range of UI elements such as typography, grid, color, forms, and icons, describes how to use them, and highlights where they can be found and modified in the system of Sass partials.
Produced with 160over90; art direction by Ryan Blain.