MBC Style Guide

Live style guide used across several MBC products. It contains visual examples, explanations of use and snippets of code.

  • Contribution: design research, front-end development.
  • Teammates: Sam Bible.
  • Duration: 9 Months, June 2014.
  • Sponsor: Lightspeed Systems.

My Big Campus is a project of a respectable size that has been adding new features (that could be considered stand-alone products by themselves) on a yearly basis, sometimes implemented by different teams. As a result, we found that there was a lack of design consistency across the site and the CSS code was not efficient enough or DRY.

At that point, we realized we needed to make changes, promote a more consistent design and refactor our CSS. The best way I found to establish and promote good practice was to use a live style guide. I used the same software GitHub used for their Style Guide, and it allowed us to automatically update our style guide after any changes were made on the CSS of the site.

Screenshot of MBC Style Guide
Every module of the style guide included a snippet of code.

In order to improve CSS scalability, I decided to build our own framework after a failed experiment with a popular UI framework. I followed the SMACSS methodology for the structure and the BEM naming convention for the styles naming. You can learn more about the refactor process in this blog post I wrote a few months ago.

The final result was a stylesheet file that was 70% lighter and 1.5 seconds faster than the original one.