ShopRunner Styleguide

When I first came on at ShopRunner I was tasked early on with redesigning the careers page of ShopRunner.com. It became almost immediately apparent that this was going to be a lot easier said than done. Their front end-technologies had not seen much love in what looked like a pretty long while.

There was no underlying framework or structure in place, no centralized CSS stylesheet, haphazardly applied mobile solutions where any were present at all, and inline styling was rampant. All of this meant that both the structure and visual treatments from page to page were unpredictable, difficult to reproduce, and often made the website as a whole look pretty disjointed.

Not only was all of this troubling from a front end design perspective, but I could see that having to essentially start from scratch every time a new page or feature was needed was seriously hampering engineering efforts in a very real and profound way.

In order to address these issues I initiated and championed an effort to modernize ShopRunner.com using Foundation responsive framework to provide core structure, make the site truly mobile freindly, and improve the overall quality of the front-end code across the board.

As a part of this effort, I created a comprehensive interactive web styleguide for internal reference that could easily be leveraged by anyone on the team needing to do development work on the website going forward.

For V1 of the styleguide, I didn’t deviate too drastically from the existing visual treatments and styles, but instead chose clean up and add to what I saw in use already. The key difference being that now that all of the styling was aggregated into one stylesheet in a way that encouraged better semantic markup it would now be much easier to do a major visual redesign in the future.